Chinaunix首页 | 论坛 | 博客

CrowTLFcrowtlf.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

crowtlf

  • 博客访问： 245482
  • 博文数量： 108
  • 博客积分： 3045
  • 博客等级： 中校
  • 技术积分： 1162
  • 用 户 组： 普通用户
  • 注册时间： 2007-04-19 18:26
文章分类

全部博文（108）

推荐博文
DIV+CSS 网页布局

分类： HTML5

2013-07-30 13:28:28

css目录存放Css文件 image目录存放图片


divcss.html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Div+CSS网页布局</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  7. <link rel="stylesheet" type="text/css" href="css/layout.css" />
  8. </head>
  9. <body>
  10.     <div id    ="container">
  11.             <div id="header">
  12.                     <div id="logo"></div>
  13.                     <div id="banner"></div>
  14.                     <div id="tool"></div>
  15.                     <div class="nav"></div>
  16.                     <div id="menu">
  17.                             <ul>
  18.                                     <li ><a href="#">联系我们</a></li>
  19.                                     <li class="tiao"></li>
  20.                                     <li ><a href="#">联系我们</a></li>
  21.                                     <li class="tiao"></li>
  22.                                     <li ><a href="#">联系我们</a></li>
  23.                                     <li class="tiao"></li>
  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.                             </ul>
  34.                     </div>
  35.             </div>
  36.             <div class="nav"></div>
  37.             <div id="main">
  38.                     <div class="leftbox">
  39.                             <div class="left">
  40.                                             <div class="tit"><h3>热门文章</h3></div>
  41.                                             <div class="content">
  42.                                                         <ul>
  43.                                                                     <li><a href="#">aaaaaaaaaa</a></li>
  44.                                                                     <li><a href="#">aaaaaaaaaa</a></li>
  45.                                                                     <li><a href="#">aaaaaaaaaa</a></li>
  46.                                                                     <li><a href="#">aaaaaaaaaa</a></li>
  47.                                                         </ul>
  48.                                             </div>
  49.                             </div>                                
  50.                             <div class="right">
  51.                                             <div class="tit"><h3>热门文章</h3></div>
  52.                                             <div class="content"></div>
  53.                             </div>
  54.                             <div class="nav"></div>
  55.                             <div class="left"></div>
  56.                             <div class="right"></div>
  57.                     </div>
  58.                             
  59.                     <div class="rightbox"></div>
  60.                     <div class="nav"></div>
  61.                     <div class="adv"></div>
  62.                     <div class="nav"></div>
  63.                     <div class="leftbox">
  64.                             <div class="left"></div>
  65.                             <div class="right"></div>
  66.                             <div class="nav"></div>
  67.                             <div class="left"></div>
  68.                             <div class="right"></div>
  69.                     </div>
  70.                     <div class="rightbox"></div>
  71.             </div>
  72.             <div class="nav"></div>
  73.             <div id="footer">
  74.             </div>
  75.     </div>
  76.     
  77. </body>
  78. </html>

layout.css  

  1. body{
  2.     margin:0;
  3.     padding:0;
  4.     font:12px Arial,宋体;
  5.     text-align:center;
  6. }
  7. #container{
  8.     margin-left:auto;
  9.     margin-right:auto;
  10.     width:960px;
  11.     height:600px;
  12.     text-align:left;
  13. }
  14. #header{
  15.     float:left;
  16.     width:100%;
  17. }
  18. #header #logo{
  19.     float:left;
  20.     margin-right:10px;
  21.     width:200px;
  22.     height:80px;
  23.     background:#ff00ff;
  24. }
  25. #header #banner{
  26.     float:left;
  27.     width:600px;
  28.     height:80px;
  29.     background:blue;
  30. }
  31. #header #tool{
  32.     float:right;
  33.     width:140px;
  34.     height:80px;
  35.     background:#a12bbf;
  36. }
  37. #header #menu{
  38.     float:left;
  39.     width:100%;
  40.     background:#aaa;
  41. }
  42. #main{
  43.     float:left;
  44.     width:100%;

  46. }

  48. #main .leftbox{
  49.     float:left;
  50.     width:750px;
  51. }
  52. #main .rightbox{
  53.     float:right;
  54.     width:200px;
  55.     height:400px;
  56.     background:red;
  57. }
  58. #main .adv{
  59.     float:left;
  60.     width:100%;
  61.     height:80px;
  62.     background:green;
  63. }

  65. .leftbox .left{
  66.     float:left;
  67.     width:300px;
  68.     height:200px;
  69.     background:yellow;
  70. }
  71. .tit{
  72.     float:left;
  73.     width:100%;
  74.     height:23px;
  75.     background:url(../image/btn-bg2.gif) no-repeat right;
  76. }
  77. .tit h3{
  78.     margin:0px;
  79.     padding:0px;
  80.     line-height:26px;
  81.     font-size:14px;
  82.     background:url(../image/btn-bg2.gif) no-repeat left;
  83. }
  84. .content
  85. {
  86.     float:left;
  87.     width:298px !important;
  88.     width:300px;
  89.     height:174px;
  90.     border:1px solid #bbb;
  91. }

  93. .content li{
  94.     width:280px;
  95.     text-align:left;
  96.     line-height:20px;
  97.     background:url(../image/dot.gif) repeat-x bottom;
  98. }

  100. .content li a{
  101.     text-decoration:none;
  102.     background:url(../image/cmt-good.gif) no-repeat 0 center;
  103.     padding:20px;
  104. }
  105. .leftbox .right{
  106.     float:right;
  107.     width:440px;
  108.     height:200px;
  109.     background:yellow;
  110. }
  111. a:hover{
  112.     position:relative;
  113.      top:1px;
  114.      left:1px;
  115.      color:red;
  116. }


  119. #footer{
  120.     float:left;
  121.     width:100%;
  122.     height:80px;
  123.     background:blue;
  124.     clear:both;
  125. }
  126. .nav{
  127.     float:left;
  128.     width:100%;
  129.     height:10px;
  130.     clear:both;
  131.     overflow:hidden;
  132. }
  133. ul{
  134.     background:yellow;
  135.     margin:0px;
  136.     padding:0px;
  137.     list-style:none;
  138.     
  139. }

  141. #menu li{
  142.     float:left;
  143.     height:28px;
  144.     line-height:28px;
  145.     text-align:center;
  146.     width:80px;
  147.     float:left;
  148.     
  149. }

  151. #menu a{
  152.     color:white;
  153. }

  155. #header #menu .tiao{
  156.     float:left;
  157.     width:1px;
  158.     height:12px;
  159.     margin-top:8px;
  160.     overflow:hidden;
  161.     background:#000;
  162. }

阅读(343) | 评论(0) | 转发(0) |
0

上一篇：eclipse html插件的下载和安装

下一篇：IE&FF CSS应用的差别

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6