CSS代码分析

[zilongxuan001]

#banner .container, 
main header, 
#portfolio .grid, 
#contact>div,
footer #footer-above{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-flow:row wrap;
          flex-flow:row wrap;
  -ms-flex-pack:distribute;
      justify-content:space-around;
  -webkit-box-align:start;
      -ms-flex-align:start;
          align-items:flex-start;
  margin:0 auto; 
}

[zilongxuan001]

banner .container

带有id="banner"的元素内部所有class="container"的元素

示例HTML代码

<header class="navbar navbar-default navbar-fixed-top" id="banner">
  <div class="container"><a class="scrollable" href="#top"><img src="http://qlip.in/images/qlip.png" alt="qlip | UI/UX Design and Development" title="qlip | UI/UX Design and Development"/></a>
    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    <nav class="collapse navbar-collapse" id="navbar" role="navigation">
      <ul class="nav navbar-nav navbar-right">
        <li><a class="scrollable" href="#top">About</a></li>
        <li><a class="scrollable" href="#portfolio">Portfolio</a></li>
        <li><a class="scrollable" href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

[zilongxuan001]

main header,

main元素内部的所有header元素

举例

<main>
  <header>
    <div class="intro-text">
      <p>Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction;  devoted to functional programming and information architecture.</p>
      <hr class="star-bright"/><span class="skills">Web Developer - User Experience Designer - Graphic Artist</span>
    </div><img src="http://qlip.in/images/avatar.jpg" alt="A picture of Justin looking at San Francisco from across the Golden Gate Bridge." title="A picture of Justin looking at San Francisco from across the Golden Gate Bridge."/>
  </header>
</main>

[zilongxuan001]

portfolio .grid,

含有id="portfolio"的元素内部的所有含有class="grid"的元素

举例

 <section id="portfolio">
    <h2>Portfolio</h2>
    <hr class="star-dark"/>
    <ul class="grid">
      <li><img src="http://qlip.in/images/YMCA-Realtor-Donation-3.jpg" alt=""/></li>
      <li><img src="http://qlip.in/images/webcaballero.jpg" alt=""/></li>
      <li><img src="http://qlip.in/images/webmarqas.jpg" alt=""/></li>
      <li><img src="http://qlip.in/images/webbrandaxis.jpg" alt=""/></li>
      <li><img src="http://qlip.in/images/panacea1.jpg" alt=""/></li>
      <li><img src="http://qlip.in/images/webgatomalo.jpg" alt=""/></li>
    </ul>
  </section>

[zilongxuan001]

contact>div

选择父元素为含有id="contact"的所有<div>元素

示例

<section id="contact">
    <h2>Contact Me</h2>
    <hr class="star-dark"/>
    <div>
      <form id="contactForm" novalidate="">
        <div class="form-item">
          <label for="“name”">Name</label>
          <input id="name" type="text" placeholder="Name" required=""/>
        </div>
        <div class="form-item">
          <label for="“email”">Email Address</label>
          <input id="email" type="email" placeholder="Email Address" required=""/>
        </div>
        <div class="form-item">
          <label for="“phone”">Phone Number</label>
          <input id="phone" type="tel" placeholder="Phone Number" required=""/>
        </div>
        <div class="form-item">
          <label for="“message”">Message</label>
          <textarea id="message" rows="5" placeholder="Message" required=""></textarea>
        </div><br/>
        <button type="submit">Send</button>
      </form>
      <div>
        <p>Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Toronto... just feel free to drop me a line anytime.</p>
        <p>I promise to reply A.S.A.P.</p>
        <p>Note: No spam/soliciting pour moi, merci :)</p>
      </div>
    </div>
  </section>

[zilongxuan001]

footer #footer-above

footer元素内所有id="footer-above"的元素

示例元素

<footer>
  <div id="footer-above">
    <div>
      <h3>About this page</h3>
      <p>Made with <i class="fa fa-fw fa-coffee"></i> and <i class="fa fa-fw fa-music"></i><br/>by <a href="http://qlip.in">Justin Sane</a>.</p>
    </div>
    <div>
      <h3>Around the Web</h3>
      <ul>
        <li><a class="button social" href="https://www.linkedin.com/in/hallaathrad"><i class="fa fa-fw fa-linkedin"></i></a></li>
        <li><a class="button social" href="https://github.com/hallaathrad"><i class="fa fa-fw fa-github"></i></a></li>
        <li><a class="button social" href="https://twitter.com/hallaathrad"><i class="fa fa-fw fa-twitter"></i></a></li>
        <li><a class="button social" href="https://www.flickr.com/photos/hallaathrad/" title="My Flickr"><i class="fa fa-fw fa-flickr"></i></a></li>
      </ul>
    </div>
  </div>
  <div id="footer-below">qlip © 
    <script>document.write(new Date().getFullYear())</script>. All Rights Reversed
  </div>
</footer>

[zilongxuan001]

display:-webkit-box;
display:-ms-flexbox;
display:flex;

注 参看 #153