BootStrap框架写的致敬乔布斯的网页

http://codepen.io/Gabyler/pen/oxjRYj

 <div class="container">

  <div class="jumbotron">

    <div class="row">

      <div class="col-md-12">

        <h1 class="text-center">Steve Jobs</h1>

        <h2 class="text-center"><em>The man who change the world</h2>

        <div class="thumbnail">

          <img src="http://img2.cache.netease.com/photo/0025/2013-09-23/99F1MDS70AK00025.jpg">

          <div class="caption text-center">Jobs is an artist and a coder,without his passion and effort,the world can't be so wonderful like now.</div>

        </div>

        <div class="col-md-8 col-md-offset-2">

          <h3>The timeline of Apple and him:</h3>

          <ul>

            <li><strong>1980</strong> -Presentation donated to Computer History Museum</li>

            <li><strong>1983</strong> -International Design Conference in Aspen (IDCA) - 'The Future Isn't What It Used To Be' keynote</li>

            <li><strong>1985</strong> -Playboy Magazine Interview</li>

            <li><strong>1990</strong> -Memory & Imagination: New Pathways to the Library of Congress with Stewart Brand</li>

            <li><strong>1994</strong> -Santa Clara Valley Historical Society Silicon Valley Documentary</li>

            <li><strong>2005</strong>Stanford Commencement Address</li>

          </ul>

          <blockquote>

           <p>Stay hungry, Stay foolish!</p>

            <footer><cite>Barack Hussein Obama</cite></footer>

          </blockquote>

          <p class="text-center">If you want have a further information about jobs,this is <a href="https://en.wikipedia.org/wiki/Timeline_of_Steve_Jobs_media">wikipedia entry</a></p>

        </div>

      </div>

    </div>

  </div>

    <!--jumbotron-->

    <div class="footer text-center">

      <p>This is coded by <a href="http://codepen.io/Gabyler/">Jiale Guo</a>

      </p>

    </div>

 <!--container-->

</div>

Veiw HTML

body {

  margin-top: 60px;

}

View Css