实现网页布局

来源：互联网发布：淘宝退货折旧费怎么算编辑：程序博客网时间：2024/06/02 03:27

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
       <title>页面布局</title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           ul{
               list-style: none;
           }
           a{
               text-decoration: none;
           }
           a:hover{
               color: red;
           }
           .d0{
               width: 980px;
               margin: 0 auto;
           }
           body {
               background: url(img/body-bg.jpg)#000 no-repeat top center;
           }
           .logo {
               margin-top: 34px;
               margin-bottom: 34px;
           }

           nav{
               width: 100%;
               height: 40px;
               line-height: 40px;
               background: #666;
               border-radius: 5px;
           }

           nav ul{
               float: left;
           }
           nav ul li {
               float: left;
               padding: 0 14px;
               padding-top: 14px;
           }

           nav ul li a {
               color: #fff;
           }

           .search {
               float: right;
               width: 137px;
               height: 26px;
               margin-top: 6px;
               border-radius: 5px;
           }

           section {
               margin-top: 30px;
           }

           article {
               width: 674px;
               background: #fff;
               border-radius: 5px;
               float: left;
           }

           .clear {
               display: block;
               clear: both;
           }

           .left {
               padding: 36px;
           }

           .left p {
               color: #666;
               margin: 15px;
           }
           aside{
               float: right;
               width: 240px;

           }
           aside dl{
               background: #fff;
               border-radius: 5px;
           }
       </style>
   </head>
   <body>
       <div class="d0">
           <header>
               <img src="img/logo.png" class="logo" />
           </header>
           <nav class="clear">
               <ul class="clear">
                   <li><a href="#">home</a></li>
                   <li><a href="#">home</a></li>
                   <li><a href="#">home</a></li>
                   <li><a href="#">home</a></li>
               </ul>
               <img src="img/menu.png" class="nav_pic" />
               <input placeholder="Search" class="search" />
           </nav>
           <section class="clear">
               <article>
                   <div class="left">
                       <h2>Just a post Title</h2>
                       <time>May 8,2014 in Categary</time>
                       <img src="img/sample-image.jpg" />
                           <p>Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
                           Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac. Vestibulum congue nisl magna. Ut vulputate odio id dui convallis in adipiscing libero condimentum. Nunc et pharetra enim. Praesent pharetra, neque et luctus tempor, leo sapien
                           faucibus leo, a dignissim turpis ipsum sed libero. Sed sed luctus purus. Aliquam faucibus turpis at libero consectetur euismod. Nam nunc lectus, congue non egestas quis, condimentum ut arcu. Nulla placerat, tortor non egestas rutrum, mi turpis
                           adipiscing dui, et mollis turpis tortor vel orci. Cras a fringilla nunc. Suspendisse volutpat, eros congue scelerisque iaculis, magna odio sodales dui, vitae vulputate elit metus ac arcu. Mauris consequat rhoncus dolor id sagittis. Cras tortor
                           elit, aliquet quis tincidunt eget, dignissim non tortor.
                       </p>
                       <video src="media/Compress.MP4" width="100%" controls width="100%"></video>
                   </div>
               </article>
               <aside>
                   <dl>
                       <dt>Slide Bar</dt>
                       <dd><a href="#">WordPress</a></dd>
                       <dd><a href="#">WordPress</a></dd>
                       <dd><a href="#">WordPress</a></dd>
                   </dl>
               </aside>
           </section>
       </div>
   </body>
</html>

阅读全文

0 0