DIV+CSS布局网站基本框架

Posted on 2016-03-12 14:10  Y-HKL  阅读(251)  评论(0)  编辑  收藏  举报

html代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>DIV+CSS布局网站首页实例</title>
  6 <link rel="stylesheet" type="text/css" href="css/layout.css" />
  7 </head>
  8 
  9 <body>
 10     <div id="container">
 11         <div id="header">
 12             <div id="logo">
 13             
 14             </div>
 15             <div id="banner">
 16             
 17             </div>
 18             <div id="tool">
 19             
 20             </div>
 21             <div class="nav"></div>
 22             <div id="menu">
 23                 <ul>
 24                     <li><a href="#">联系我们</a></li>
 25                     <li class="tiao"></li>
 26                     <li><a href="#">联系我们</a></li>
 27                     <li class="tiao"></li>
 28                     <li><a href="#">联系我们</a></li>
 29                     <li class="tiao"></li>
 30                     <li><a href="#">联系我们</a></li>
 31                     <li class="tiao"></li>
 32                     <li><a href="#">联系我们</a></li>
 33                     <li class="tiao"></li>
 34                     <li><a href="#">联系我们</a></li>
 35                 </ul>
 36             </div>
 37         </div>
 38         <div class="nav"></div>
 39         <div id="main">
 40             <div class="leftbox">
 41                 <div class="left">
 42                     <div class="tit"><h3>热门文章</h3></div>
 43                     
 44                     <div class="content">
 45                             <ul>
 46                                 <li><a href="#">aaaaaaaaaa</a></li>
 47                                 <li><a href="#">aaaaaaaaaa</a></li>
 48                                 <li><a href="#">aaaaaaaaaa</a></li>
 49                                 <li><a href="#">aaaaaaaaaa</a></li>
 50                                 <li><a href="#">aaaaaaaaaa</a></li>
 51                             </ul>
 52                     </div>
 53                 </div>
 54                 <div class="right">
 55                 
 56                 </div>
 57                 <div class="nav"></div>
 58                 <div class="left">
 59                 
 60                 </div>
 61                 <div class="right">
 62                 
 63                 </div>
 64             </div>
 65             <div class="rightbox">
 66             
 67             </div>
 68             <div class="nav"></div>
 69             <div class="guanggao">
 70                 <div class="tit"><h3>热门文章</h3></div>
 71             </div>
 72             <div class="nav"></div>
 73             <div class="leftbox">
 74                 <div class="left">
 75                     <div class="tit"><h3>热门文章</h3></div>
 76                     
 77                     <div class="content"></div>
 78                 </div>
 79                 <div class="right">
 80                 
 81                 </div>
 82                 <div class="nav"></div>
 83                 <div class="left">
 84                 
 85                 </div>
 86                 <div class="right">
 87                 
 88                 </div>
 89             </div>
 90             <div class="rightbox">
 91             
 92             </div>
 93         </div>
 94         <div class="nav"></div>
 95         <div id="footer">
 96         
 97         </div>
 98     </div>
 99 </body>
100 </html>

layout.css代码

  1 /* CSS Document */
  2 body{
  3     margin:0px;
  4     padding:0px;
  5     font:12px "宋体";
  6     text-align:center;
  7 }
  8 
  9 #container{
 10     margin-left:auto;
 11     margin-right:auto;
 12     width:1300px;
 13     text-align:left;
 14 }
 15 
 16 #header{
 17     width:100%;
 18     float:left;
 19 }
 20 
 21 #header #logo{
 22     width:19%;
 23     height:80px;
 24     background:#ff00ff;
 25     float:left;
 26 }
 27 
 28 #header #banner{
 29     width:65%;
 30     height:80px;
 31     margin-left:1%;
 32     background:blue;
 33     float:left;
 34 }
 35 
 36 #header #tool{
 37     width:14%;
 38     height:80px;
 39     background:black;
 40     float:right;
 41 }
 42 
 43 #header #menu{
 44     width:100%;
 45     /*height:28px;*/
 46     background-color:#aaa;
 47     float:inherit;
 48     /*float:left;
 49     float:both;*/
 50 }
 51 #main{
 52     width:1300px;
 53     float:left;
 54 }
 55 
 56 #main .leftbox{
 57     float:left;
 58     width:990px;
 59 }
 60 
 61 .leftbox .left{
 62     float:left;
 63     width:400px;
 64     height:195px;
 65     background:yellow;
 66 }
 67 .tit{
 68     float:left;
 69     width:100%;
 70     height:26px;
 71     background:url(../images/title.png) no-repeat right;
 72 }
 73 
 74 .content{
 75     float:left;
 76     width:398px !important;
 77     width:400px;
 78     height:169px;
 79     border:1px solid #bbb;
 80 }
 81 
 82 .content li{
 83     width:100%;
 84     text-align:left;
 85     padding-left:5px;
 86     line-height:20px;
 87     font-size:16px;
 88 }
 89 
 90 .content li{
 91     background:url(../images/li_icon.gif) no-repeat 0 center;
 92     padding-left:15px;
 93 }
 94 
 95 .content li a{
 96     text-decoration:none;
 97     background:url(../images/dot.gif) repeat-x bottom;
 98 }
 99 
100 .tit h3{
101     margin:0px;
102     padding:0px;
103     padding-left:5px;
104     width:350px;
105     line-height:26px;
106     font-size:14px;
107     background:url(../images/title.png) no-repeat left;
108 }
109 
110 .leftbox .right{
111     float:right;
112     width:580px;
113     height:195px;
114     background:yellow;
115 }
116 
117 #main .rightbox{
118     float:right;
119     width:300px;
120     height:400px;
121     background:red;
122 }
123 
124 .guanggao{
125     float:left;
126     width:100%;
127     height:100px;
128     background:green;
129 }
130 
131 ul{
132     background:yellow;
133     margin:0px;
134     padding:0px;
135     list-style:none;
136 }
137 
138 #menu li{
139     height:20px;
140     line-height:20px;
141     padding-top:5px;
142     padding-bottom:5px;
143     width:100px;
144     float:left;
145     text-align:center;
146 }
147 
148 #menu a{
149     color:white;
150 }
151 
152 #header #menu .tiao{
153     width:1px;
154     height:10px;
155     margin-top:5px;
156     overflow:hidden;
157     background:#000;
158     float:left;
159 }
160 
161 #footer{
162     width:1300px;
163     height:80px;
164     background:blue;
165     float:left;
166 }
167 
168 .nav{
169     width:100%;
170     height:10px;
171     clear:both;
172     overflow:hidden;      /*IE指定的最小高度为18px，所以我们让超出部分隐藏*/
173     float:left;
174 }
175 
176 a:hover{
177     position:relative;
178     top:1px;
179     left:1px;
180     color:red;
181 }