0.89) ; 117 } 118 119 .left_a { 120 margin : 0 ; 121 float
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body { 8 margin: 0; /*设置外边距为0*/ 9 text-align: center; 10 background-color: #ffffcc; 11 } 12 13 #container { 14 margin: 0 auto; /*居中显示，块自适应宽*/ 15 width: 800px; 16 height: 1000px; 17 } 18 19 #header { 20 float: left; /*元素向左浮动*/ 21 width: 800px; 22 height: 100px; 23 margin: 0 auto; 24 clear: both; /*拒绝下方的元素飘上来，例如menu*/ 25 background-color: #ff0000; 26 } 27 28 #logo { 29 float: left; 30 width: 250px; 31 height: 90px; 32 background-color: green; 33 clear: right; 34 margin: 0; 35 } 36 37 #banner { 38 float: right; 39 width: 540px; 40 height: 90px; 41 margin: 0; 42 background-color: #67ff0c; 43 } 44 45 #menu { 46 width: 800px; 47 height: 35px; 48 margin: 0 auto; 49 clear: both; 50 } 51 52 #menu ul{ 53 float:left; 54 list-style: none; 55 margin: 0 auto; 56 } 57 #menu ul li{ 58 float:left; 59 display: block; 60 line-height: 35px; 61 margin: 0 10px; 62 } 63 .menuDiv{ 64 width: 1px; 65 height: 35px; 66 background-color: green; 67 } 68 #menu ul li a:link,#menu ul li a:visited{ 69 font-weight: bold; 70 color: #0000ff; 71 72 } 73 #menu ul li a:hover{ 74 font-weight: 800; 75 color: red; 76 } 77 78 .nav { 79 margin: 0 auto; 80 width: 800px; 81 height: 10px; 82 clear: both; 83 background-color: #ffffff; 84 line-height: 10px; /*设置行高，免得字体超过*/ 85 } 86 87 .nav_a { 88 float: left; 89 /*margin: 0 auto;因为不占整屏的宽度所以就不设置了*/ 90 width: 610px; 91 height: 10px; 92 clear: both; 93 background-color: #ffffff; 94 line-height: 10px; 95 } 96 97 .left_main { 98 margin: 0; 99 float: left; 100 width: 610px; 101 height: 420px; 102 clear: right; 103 background-color: #ff0000; 104 } 105 106 .right_main { 107 margin: 0; 108 float: right; 109 width: 180px; 110 height: 420px; 111 background-color: rgba(91, 69, 180, 0.89); 112 } 113 114 .left_a { 115 margin: 0; 116 float: left; 117 width: 300px; 118 height: 205px; 119 background-color: #0000ff; 120 } 121 122 .left_b { 123 margin: 0; 124 float: right; 125 width: 300px; 126 height: 205px; 127 clear: right; /*可有可无*/ 128 background-color: #0000ff; 129 } 130 131 .con { 132 margin: 0px; 133 width: 800px; 134 height: 200px; 135 clear: both; 136 border-bottom-style: solid; 137 background-color: #691a36; 138 } 139 140 .one { 141 margin-left: 5px; 142 float: left; 143 width: 150px; 144 height: 200px; 145 clear: left; 146 background-color: #ff99f0; 147 } 148 149 .two { 150 float: left; 151 margin-left: 10px; 152 width: 150px; 153 height: 200px; 154 background-color: #ffccf0; 155 } 156 157 .three { 158 float: left; 159 margin-left: 10px; 160 width: 150px; 161 height: 200px; 162 background-color: #0ffff0; 163 } 164 165 .four { 166 float: left; 167 margin-left: 10px; 168 width: 150px; 169 height: 200px; 170 background-color: #f0fff0; 171 } 172 173 .five { 174 float: left; 175 margin-left: 10px; 176 width: 150px; 177 height: 200px; 178 background-color: rgba(35, 255, 202, 0.45); 179 } 180 181 #footer { 182 margin: 0 auto; 183 width: 800px; 184 height: 25px; 185 background-color: red; 186 } 187 188 .tab1 h3{ 189 margin: 0px; 190 width: 290px; 191 height: 20px; 192 float: left; 193 font-size: 13px; 194 text-align: left; 195 color: red; 196 line-height: 20px; 197 /*background: url(1.jpg);*/ 198 background: #adff2f; 199 padding-left: 10px; 200 201 } 202 203 .tab2{ 204 margin: 0px; 205 width: 300px; 206 height: 185px; 207 background: yellow; 208 } 209 .tab2 ul{ 210 margin: 4px 0 0; 211 list-style: none; 212 padding: 0; 213 background: gray; 214 } 215 .tab2 ul li{ 216 float: left; 217 width: 50%; 218 /*background: gold;*/ 219 220 } 221 .tab2 ul li a{ 222 display: block; 223 width: 84%; 224 height: 25px; 225 line-height: 25px; 226 margin-left: 8px; 227 font-size: 12px; 228 text-decoration: none; 229 color: #333; 230 } 231 232 </style> 233 </head> 234 <body> 235 236 237 <div id="container"> 238 <div id="header"> 239 <div id="logo">logo</div> 240 <div id="banner">banner</div> 241 </div> 242 <div id="menu"> 243 <ul> 244 <li><a href="1.html">网站首页</a></li> 245 <li class="menuDiv"></li> 246 <li><a href="#">关于瓦猫</a></li> 247 <li class="menuDiv"></li> 248 <li><a href="#">网站首页</a></li> 249 <li class="menuDiv"></li> 250 <li><a href="#">关于瓦猫</a></li> 251 <li class="menuDiv"></li> 252 <li><a href="#">网站首页</a></li> 253 <li class="menuDiv"></li> 254 <li><a href="#">关于瓦猫</a></li> 255 <li class="menuDiv"></li> 256 <li><a href="#">关于瓦猫</a></li> 257 <li class="menuDiv"></li> 258 259 260 </ul> 261 </div> 262 <div class="nav">nav</div> 263 <div class="left_main"> 264 <div class="left_a"> 265 <div class="tab1"> 266 <h3>第一栏目</h3> 267 </div> 268 <div class="tab2"> 269 <ul> 270 <li><a href="#">111111111</a></li> 271 <li><a href="#">111111111</a></li> 272 <li><a href="#">111111111</a></li> 273 <li><a href="#">111111111</a></li> 274 <li><a href="#">111111111</a></li> 275 <li><a href="#">111111111</a></li> 276 <li><a href="#">111111111</a></li> 277 <li><a href="#">111111111</a></li> 278 <li><a href="#">111111111</a></li> 279 <li><a href="#">111111111</a></li> 280 <li><a href="#">111111111</a></li> 281 <li><a href="#">111111111</a></li> 282 </ul> 283 </div> 284 </div> 285 <div class="left_b"> 286 <div class="tab1"> 287 <h3>第一栏目</h3> 288 </div> 289 <div class="tab2"> 290 <ul> 291 <li><a href="#">111111111</a></li> 292 <li><a href="#">111111111</a></li> 293 <li><a href="#">111111111</a></li> 294 <li><a href="#">111111111</a></li> 295 <li><a href="#">111111111</a></li> 296 <li><a href="#">111111111</a></li> 297 <li><a href="#">111111111</a></li> 298 <li><a href="#">111111111</a></li> 299 <li><a href="#">111111111</a></li> 300 <li><a href="#">111111111</a></li> 301 <li><a href="#">111111111</a></li> 302 <li><a href="#">111111111</a></li> 303 </ul> 304 </div> 305 </div> 306 <div class="nav_a">nav</div> 307 <div class="left_a"> 308 <div class="tab1"> 309 <h3>第一栏目</h3> 310 </div> 311 <div class="tab2"> 312 <ul> 313 <li><a href="#">111111111</a></li> 314 <li><a href="#">111111111</a></li> 315 <li><a href="#">111111111</a></li> 316 <li><a href="#">111111111</a></li> 317 <li><a href="#">111111111</a></li> 318 <li><a href="#">111111111</a></li> 319 <li><a href="#">111111111</a></li> 320 <li><a href="#">111111111</a></li> 321 <li><a href="#">111111111</a></li> 322 <li><a href="#">111111111</a></li> 323 <li><a href="#">111111111</a></li> 324 <li><a href="#">111111111</a></li> 325 </ul> 326 </div> 327 </div> 328 <div class="left_b"> 329 <div class="tab1"> 330 <h3>第一栏目</h3> 331 </div> 332 <div class="tab2"> 333 <ul> 334 <li><a href="#">111111111</a></li> 335 <li><a href="#">111111111</a></li> 336 <li><a href="#">111111111</a></li> 337 <li><a href="#">111111111</a></li> 338 <li><a href="#">111111111</a></li> 339 <li><a href="#">111111111</a></li> 340 <li><a href="#">111111111</a></li> 341 <li><a href="#">111111111</a></li> 342 <li><a href="#">111111111</a></li> 343 <li><a href="#">111111111</a></li> 344 <li><a href="#">111111111</a></li> 345 <li><a href="#">111111111</a></li> 346 </ul> 347 </div> 348 </div> 349 </div> 350 <div class="right_main">right_main</div> 351 <div class="nav">nav</div> 352 <div class="con"> 353 <div class="one">one</div> 354 <div class="two">two</div> 355 <div class="three">three</div> 356 <div class="four">four</div> 357 <div class="five">five</div> 358 </div> 359 <div class="con"> 360 <div class="one">one</div> 361 <div class="two">two</div> 362 <div class="three">three</div> 363 <div class="four">four</div> 364 <div class="five">five</div> 365 </div> 366 <div id="footer">footer</div> 367 368 </div> 369 </body> 370 </html>
View Code2.second:
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/29891.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")