DIV+CSS布局网站基本框架

时间：2023-03-08 17:22:55

html代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>DIV+CSS布局网站首页实例</title>
 <link rel="stylesheet" type="text/css" href="css/layout.css" />
 </head>

 <body>
     <div id="container">
         <div id="header">
             <div id="logo">

             </div>
             <div id="banner">

             </div>
             <div id="tool">

             </div>
             <div class="nav"></div>
             <div id="menu">
                 <ul>
                     <li><a href="#">联系我们</a></li>
                     <li class="tiao"></li>
                     <li><a href="#">联系我们</a></li>
                     <li class="tiao"></li>
                     <li><a href="#">联系我们</a></li>
                     <li class="tiao"></li>
                     <li><a href="#">联系我们</a></li>
                     <li class="tiao"></li>
                     <li><a href="#">联系我们</a></li>
                     <li class="tiao"></li>
                     <li><a href="#">联系我们</a></li>
                 </ul>
             </div>
         </div>
         <div class="nav"></div>
         <div id="main">
             <div class="leftbox">
                 <div class="left">
                     <div class="tit"><h3>热门文章</h3></div>

                     <div class="content">
                             <ul>
                                 <li><a href="#">aaaaaaaaaa</a></li>
                                 <li><a href="#">aaaaaaaaaa</a></li>
                                 <li><a href="#">aaaaaaaaaa</a></li>
                                 <li><a href="#">aaaaaaaaaa</a></li>
                                 <li><a href="#">aaaaaaaaaa</a></li>
                             </ul>
                     </div>
                 </div>
                 <div class="right">

                 </div>
                 <div class="nav"></div>
                 <div class="left">

                 </div>
                 <div class="right">

                 </div>
             </div>
             <div class="rightbox">

             </div>
             <div class="nav"></div>
             <div class="guanggao">
                 <div class="tit"><h3>热门文章</h3></div>
             </div>
             <div class="nav"></div>
             <div class="leftbox">
                 <div class="left">
                     <div class="tit"><h3>热门文章</h3></div>

                     <div class="content"></div>
                 </div>
                 <div class="right">

                 </div>
                 <div class="nav"></div>
                 <div class="left">

                 </div>
                 <div class="right">

                 </div>
             </div>
             <div class="rightbox">

             </div>
         </div>
         <div class="nav"></div>
         <div id="footer">

         </div>
     </div>
 </body>
 </html>

layout.css代码

 /* CSS Document */
 body{
     margin:0px;
     padding:0px;
     font:12px "宋体";
     text-align:center;
 }

 #container{
     margin-left:auto;
     margin-right:auto;
     width:1300px;
     text-align:left;
 }

 #header{
     width:100%;
     float:left;
 }

 #header #logo{
     width:19%;
     height:80px;
     background:#ff00ff;
     float:left;
 }

 #header #banner{
     width:65%;
     height:80px;
     margin-left:1%;
     background:blue;
     float:left;
 }

 #header #tool{
     width:14%;
     height:80px;
     background:black;
     float:right;
 }

 #header #menu{
     width:100%;
     /*height:28px;*/
     background-color:#aaa;
     float:inherit;
     /*float:left;
     float:both;*/
 }
 #main{
     width:1300px;
     float:left;
 }

 #main .leftbox{
     float:left;
     width:990px;
 }

 .leftbox .left{
     float:left;
     width:400px;
     height:195px;
     background:yellow;
 }
 .tit{
     float:left;
     width:100%;
     height:26px;
     background:url(../images/title.png) no-repeat right;
 }

 .content{
     float:left;
     width:398px !important;
     width:400px;
     height:169px;
     border:1px solid #bbb;
 }

 .content li{
     width:100%;
     text-align:left;
     padding-left:5px;
     line-height:20px;
     font-size:16px;
 }

 .content li{
     background:url(../images/li_icon.gif) no-repeat 0 center;
     padding-left:15px;
 }

 .content li a{
     text-decoration:none;
     background:url(../images/dot.gif) repeat-x bottom;
 }

 .tit h3{
     margin:0px;
     padding:0px;
     padding-left:5px;
     width:350px;
     line-height:26px;
     font-size:14px;
     background:url(../images/title.png) no-repeat left;
 }

 .leftbox .right{
     float:right;
     width:580px;
     height:195px;
     background:yellow;
 }

 #main .rightbox{
     float:right;
     width:300px;
     height:400px;
     background:red;
 }

 .guanggao{
     float:left;
     width:100%;
     height:100px;
     background:green;
 }

 ul{
     background:yellow;
     margin:0px;
     padding:0px;
     list-style:none;
 }

 #menu li{
     height:20px;
     line-height:20px;
     padding-top:5px;
     padding-bottom:5px;
     width:100px;
     float:left;
     text-align:center;
 }

 #menu a{
     color:white;
 }

 #header #menu .tiao{
     width:1px;
     height:10px;
     margin-top:5px;
     overflow:hidden;
     background:#000;
     float:left;
 }

 #footer{
     width:1300px;
     height:80px;
     background:blue;
     float:left;
 }

 .nav{
     width:100%;
     height:10px;
     clear:both;
     overflow:hidden;      /*IE指定的最小高度为18px，所以我们让超出部分隐藏*/
     float:left;
 }

 a:hover{
     position:relative;
     top:1px;
     left:1px;
     color:red;
 }

相关文章