devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

div+css网页标准布局实例_div加css网页布局实例

作者：Monodyee | 2024-03-27 16:40:43

赞

踩

div加css网页布局实例

效果图


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>主页</title>
  6. <link href="css/layout.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="container">
  11.   <div id="header">
  12.     <div id="logo"> <img src="images/logo.gif" width="181" height="45" /> </div>
  13.     <div id="search">
  14.       <form id="form1" name="form1" method="post" action="">
  15.         搜索产品
  16.         <input type="text" name="textfield" id="textfield" />
  17.         <input type="submit" name="button" id="button" value="查询" />
  18.       </form>
  19.     </div>
  20.   </div>
  21.   <div class="clearfloat"></div>
  22.   <div id="nav">
  23.     <div id="nav_l"></div>
  24.     <div id="nav_r"></div>
  25.     <div class="nav_main">
  26.       <ul>
  27.         <li><a href="#"><span>首页</span></a></li>
  28.         <li><a href="#" id="nav_current"><span>企业新闻</span></a></li>
  29.         <li><a href="#"><span>企业简介</span></a></li>
  30.         <li><a href="#"><span>产品展厅</span></a></li>
  31.         <li><a href="#"><span>企业历史</span></a></li>
  32.         <li><a href="#"><span>招商加盟</span></a></li>
  33.         <li><a href="#"><span>网上下单</span></a></li>
  34.         <li><a href="#"><span>联系我们</span></a></li>
  35.       </ul>
  36.     </div>
  37.     <div class="nav_son">
  38.       <ul>
  39.         <li><a href="#">企业动态</a></li>
  40.         <li><a href="#">领导活动</a></li>
  41.         <li><a href="#">产品资讯</a></li>
  42.         <li><a href="#">通知公告</a></li>
  43.       </ul>
  44.     </div>
  45.   </div>
  46.   <div class="clearfloat"></div>
  47.   <div id="maincontent">
  48.     <div id="main">
  49.       <div id="index_top">
  50.         <div id="pic"> 
  51.           <script language='javascript' type="text/javascript">
  52.             linkarr = new Array();
  53.             picarr = new Array();
  54.             textarr = new Array();
  55.             var swf_width=269;
  56.             var swf_height=210;
  57.             var files = "images/pic.jpg|images/pic1.jpg|images/pic2.jpg|images/pic3.jpg";
  58.             var links = "#|#|#|#";
  59.             var texts = "";
  60.             for(i=1;i<picarr.length;i++){
  61.               if(files=="") files = picarr[i];
  62.               else files += "|"+picarr[i];
  63.             }
  64.             for(i=1;i<linkarr.length;i++){
  65.               if(links=="") links = linkarr[i];
  66.               else links += "|"+linkarr[i];
  67.             }
  68.             for(i=1;i<textarr.length;i++){
  69.               if(texts=="") texts = textarr[i];
  70.               else texts += "|"+textarr[i];
  71.             }
  72.             document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
  73.             document.write('<param name="movie" value="images/indexpic.swf"><param name="quality" value="high">');
  74.             document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
  75.             document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');
  76.             document.write('<embed src="images/indexpic.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');
  77.           </script>
  78.           <div id="login"><span><a href="#"><img src="images/btn_login1.gif" alt="个人用户登录" width="131" height="39" /></a></span><a href="#"><img src="images/btn_login.gif" alt="经销商登录" width="131" height="39" /></a></div>
  79.         </div>
  80.         <div id="hot_news">
  81.           <div id="news_top">
  82.             <h1>苹果iphone 4手机将于9月25日在中国上市</h1>
  83.             <p>日前中国联通正式宣布将于9月25日9时在中国大陆市场全面推出iPhone4，并为iPhone4用户量身定制了合约计划。</p>
  84.           </div>
  85.           <div id="news_list">
  86.             <ul>
  87.               <li><span>9-22</span><a href="#">纯CSS实现三列DIV等高布局</a></li>
  88.               <li><span>9-22</span><a href="#">HTML元素的ID和Name属性的区别</a></li>
  89.               <li><span>9-22</span><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
  90.               <li><span>9-22</span><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
  91.               <li><span>9-22</span><a href="#">javascript为FF设置首页</a></li>
  92.               <li><span>9-22</span><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
  93.             </ul>
  94.           </div>
  95.         </div>
  96.       </div>
  97.       <div id="index_pic">
  98.         <h2><span></span></h2>
  99.         <ul>
  100.           <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
  101.           <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
  102.           <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
  103.           <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
  104.           <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
  105.           <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
  106.           <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
  107.           <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
  108.           <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
  109.           <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
  110.         </ul>
  111.       </div>
  112.       <div id="index_box">
  113.         <div class="box">
  114.           <h2><a class="more" href="#">更多..</a><span>企业历史</span></h2>
  115.           <div class="box_con">
  116.             <dl>
  117.               <dt><a href="#"><img src="images/pic5.gif" alt="多角度对比 苹果iPod系列真机" width="91" height="70" /></a></dt>
  118.               <dd><a href="#"><strong>多角度对比 苹果iPod系列真机</strong></a> 导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播…</dd>
  119.             </dl>
  120.             <ul>
  121.               <li><a href="#">纯CSS实现三列DIV等高布局</a></li>
  122.               <li><a href="#">HTML元素的ID和Name属性的区别</a></li>
  123.               <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
  124.               <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
  125.               <li><a href="#">javascript为FF设置首页</a></li>
  126.               <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
  127.               <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
  128.             </ul>
  129.           </div>
  130.         </div>
  131.         <div class="box box1">
  132.           <h2><a class="more" href="#">更多..</a><span>企业历史</span></h2>
  133.           <div class="box_con">
  134.             <dl>
  135.               <dt><a href="#"><img src="images/pic5.gif" alt="多角度对比 苹果iPod系列真机" width="91" height="70" /></a></dt>
  136.               <dd><a href="#"><strong>多角度对比 苹果iPod系列真机</strong></a> 导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播…</dd>
  137.             </dl>
  138.             <ul>
  139.               <li><a href="#">纯CSS实现三列DIV等高布局</a></li>
  140.               <li><a href="#">HTML元素的ID和Name属性的区别</a></li>
  141.               <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
  142.               <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
  143.               <li><a href="#">javascript为FF设置首页</a></li>
  144.               <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
  145.               <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
  146.             </ul>
  147.           </div>
  148.         </div>
  149.       </div>
  150.     </div>
  151.     <div id="side">
  152.       <div class="side_box">
  153.         <h2><strong>产品</strong>导购</h2>
  154.         <div class="side_con product">
  155.           <ul>
  156.             <li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
  157.             <li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
  158.             <li class="product3"><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
  159.           </ul>
  160.         </div>
  161.       </div>
  162.       <div class="side_con ask">
  163.         <dl>
  164.           <dt><a href="#">最新出的这个产品如何使用？</a></dt>
  165.           <dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
  166.         </dl>
  167.         <dl>
  168.           <dt><a href="#">最新出的这个产品如何使用？</a></dt>
  169.           <dd>该产品采用全新的技术，较上一...</dd>
  170.         </dl>
  171.         <dl>
  172.           <dt><a href="#">最新出的这个产品如何使用？</a></dt>
  173.           <dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...</dd>
  174.         </dl>
  175.         <dl>
  176.           <dt><a href="#">最新出的这个产品如何使用？</a></dt>
  177.           <dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...</dd>
  178.         </dl>
  179.         <dl>
  180.           <dt><a href="#">最新出的这个产品如何使用？</a></dt>
  181.           <dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
  182.         </dl>
  183.       </div>
  184.       <div class="side_box">
  185.         <h2><strong>联系</strong>我们</h2>
  186.         <div class="side_con contact"><a href="#"><img src="images/tel.gif" width="222" height="112" /></a></div>
  187.       </div>
  188.     </div>
  189.   </div>
  190.   <div class="clearfloat"></div>
  191.   <div id="footer"><dl>
  192.     <dt><a href="#">关于我们</a>　||　<a href="#">产品目录</a>　||　<a href="#">联系我们</a>　||　<a href="#">友情链接</a>　||　<a href="#">反馈问题</a>　||　<a href="#">广告合作</a></dt>
  193.       <dd>Copyright &copy; 2007 - 2010 aa25.cn   All Rights Reserved<br />
  194.           标准之路  版权所有  京ICP备10007159号</dd>
  195.     </dl></div>
  196. </div>
  197. </body>
  198. </html>

css文件

  1. @charset "gb2312";
  2. /* CSS Document */
  3.  
  4. body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
  5. ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
  6. ul { list-style:none;}
  7. img { border:0px;}
  8. a { color:#444; text-decoration:none;}
  9. a:hover { color:#f00;}
  10.  
  11. .clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;} 
  12.  
  13. /*body*/
  14. #container { width:900px; margin:0 auto;}
  15.  
  16. /*header*/
  17. #header { height:71px;}
  18. #logo { float:left; margin-top:18px;}
  19. #search { float:right; height:24px; margin-top:30px; color:#444;}
  20. .inp_srh { width:140px; height:17px; padding-left:20px; background:url(../images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbcbcb;}
  21. .btn_srh { width:58px; height:23px; background:url(../images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;}
  22. #search * { vertical-align:middle;}
  23.  
  24. #nav { height:66px; background:url(../images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;}
  25. #nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}
  26. #nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) -5px -66px no-repeat;}
  27. .nav_main { height:36px; overflow:hidden;}
  28. .nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}
  29. .nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;}
  30. .nav_main ul li a span { float:left; display:block; padding-right:20px;}
  31. .nav_main ul li a:hover { background:url(../images/nav_bg.gif) 0 -163px no-repeat; color:#fff;}
  32. .nav_main ul li a:hover span  { background:url(../images/nav_bg.gif) right -163px no-repeat; cursor:pointer;}
  33. .nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(../images/nav_bg.gif) 0 -132px no-repeat; color:#646464;}
  34. .nav_main ul li a#nav_current span { height:31px; background:url(../images/nav_bg.gif) right -132px no-repeat;}
  35. .nav_son { height:30px;}
  36. .nav_son ul li { float:left; margin-top:4px;}
  37. .nav_son ul li a { display:block; width:78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;}
  38. .nav_son ul li a:hover { background:url(../images/nav_bg.gif) 0 -198px no-repeat;}
  39.  
  40.  
  41. /*main*/
  42. #maincontent { overflow:auto; zoom:1;}
  43. #main { float:left; width:664px;}
  44. #index_top { height:255px; overflow:hidden; margin-bottom:8px;}
  45. #pic { float:left; width:269px;}
  46. #login { margin-top:6px;}
  47. #login span { float:right;}
  48. #hot_news { float:right; width:358px; height:225px; padding:15px; background:url(../images/hot_bg.gif) 0 0 no-repeat;}
  49. #news_top { border-bottom:1px dotted #ccc; padding-bottom:8px;}
  50. #news_top h1 { font-size:18px; line-height:2.2; font-family:"microsoft yahei"; color:#444;}
  51. #news_top p { color:#999;}
  52. #news_list { padding-top:6px;}
  53. #news_list ul li { background:url(../images/icon.gif) 0 -300px no-repeat; padding-left:20px; line-height:1.9;}
  54. #news_list ul li span { float:right; color:#579f11;}
  55.  
  56. #index_pic { border:1px solid #dbdbdb; margin-bottom:8px;}
  57. #index_pic h2 { height:28px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb; overflow:hidden;}
  58. #index_pic h2 span { display:block; height:25px; background:url(../images/rmcp.gif) 12px 6px no-repeat;}
  59. #index_pic ul { padding:0 0 15px 0; overflow:auto; zoom:1;}
  60. #index_pic ul li { width:107px; float:left; margin:15px 0 0px 21px; display:inline; text-align:center;}
  61. #index_pic ul li a { display:block;}
  62. #index_pic ul li img { margin-bottom:3px;}
  63.  
  64. #index_box { margin-bottom:8px;}
  65. .box { width:326px; float:left; border:1px solid #dbdbdb;}
  66. .box1 { float:right;}
  67. .box h2 { height:23px; padding:5px 10px 0 10px; font-size:14px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb; color:#444; overflow:hidden;}
  68. .box h2 span { display:block; height:25px; background:url(../images/icon.gif) 0 -3px no-repeat; padding-left:20px;}
  69. .more { float:right; padding-left:13px; font-size:12px; font-weight:normal; color:#db8d3b; background:url(../images/icon.gif) 0 -46px no-repeat;}
  70. .more:hover { color:#cb6d0a; background:url(../images/icon.gif) 0 -96px no-repeat;}
  71. .box_con { height:243px; padding:15px 15px 0 15px; overflow:hidden;}
  72. .box_con dl { height:74px; overflow:hidden;}
  73. .box_con dl dt { float:left; padding:1px; border:1px solid #d8d8d8;}
  74. .box_con dl dd { float:right; width:188px; color:#888; line-height:1.5;}
  75. .box_con dl dd a { display:block; margin-bottom:3px; color:#05a;}
  76. .box_con ul { margin-top:10px;}
  77. .box_con ul li { background:url(../images/icon.gif) 0 -300px no-repeat; padding-left:20px; line-height:1.8;}
  78.  
  79. #side { float:right; width:228px;}
  80. .side_box { margin-bottom:8px;}
  81. .side_box h2 { height:25px; padding:6px 10px 0 10px; background:url(../images/side_bg.gif) 0 0 no-repeat; font-size:14px; color:#444;}
  82. .side_box h2 strong { color:#f30;}
  83. .side_con { padding:0 10px; background:url(../images/side_bg.gif) 0 bottom no-repeat;}
  84. .product { padding:3px 10px;}
  85. .product ul { background:url(../images/icon2.gif) 5px 12px no-repeat;}
  86. .product ul li { height:58px; padding:14px 0 0 64px; border-bottom:1px dashed #dcdcdc; color:#777;}
  87. .product ul li strong { display:block; height:24px; color:#333;}
  88. .product ul li a { color:#777;}
  89. .product ul li a:hover { text-decoration:underline;}
  90. .product ul li.product3 { border-bottom:none;}
  91. .ask dl { padding:9px 0; border-bottom:1px dashed #dcdcdc;}
  92. .ask dl dt { height:22px; overflow:hidden; font-weight:bold; background:url(../images/icon.gif) 0 -149px no-repeat; padding-left:20px;}
  93. .ask dl dt a { color:#666;}
  94. .ask dl dd { color:#666; background:url(../images/icon.gif) 0 -198px no-repeat; padding-left:20px;}
  95. .contact { padding:2px;}
  96.  
  97. /*footer*/
  98. #footer { text-align:center;}
  99. #footer dl dt { height:28px; line-height:28px; background:#afafaf; color:#fff;}
  100. #footer dl dt a { font-weight:bold; color:#fff;}
  101. #footer dl dd { padding:8px 0; color:#666; line-height:2;}


相应图片素材略


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/325523
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号