任务要求：
简单对网页进行分割布局，基本思路上中下三部分，然后在每一部分细分
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="qiyecss/qiye.css" type="text/css" rel="stylesheet"> </head> <body> <div id="body"> <div id="top"> <div class="logo"></div> <div class="search">搜索产品 <input class="text" type="text" name="" value="" > <input class="button" type="button" name="" value=""> </div> </div> <div id="back_top"> <div class="back_a"></div> <div class="back_b"></div> <div class="back_one"> <ul> <li><a href="#">首页</a></li> <li><a href="#"><span >企业新闻</span></a></li> <li><a href="#">企业简介</a></li> <li><a href="#">产品展厅</a></li> <li><a href="#">企业历史</a></li> <li><a href="#">招商加盟</a></li> <li><a href="#">网上下单</a></li> <li><a href="#">联系我们</a></li> </ul> </div> <!--<div style="clear: both"></div>--> <div class="back_two"> <ul> <li><a herf="#">企业动态</a></li> <li><a herf="#">领导产品</a></li> <li><a herf="#">产品咨询</a></li> <li><a herf="#">通知公告</a></li> </ul> </div> </div> <div id="content_top"> <div class="content_left"> <div clss="sign_she"><img src="images/pic.jpg" alt=""></div> <div class="sign_shang"></div> <div class="sign_ren"></div> </div> <div class="content_middle"> <div class="xuxian"> <p class="p">苹果iphone 4手机将于9月25日在中国上市</p> <p>日前中国联通正式宣布将于9月25日9时在中国大陆市场全面推出iPhone4，并为iPhone4用户量身定制了合约计划。</p> </div> <!-- <hr>--> <ul> <li><a href="#">纯CSS实现三列DIV等高布局</a><span>9-22</span></li> <li><a href="#">HTML元素的ID和Name属性的区别</a><span>9-22</span></li> <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a><span>9-22</span></li> <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a><span>9-22</span></li> <li><a href="#">javascript为FF设置首页</a><span>9-22</span></li> <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a><span>9-22</span></li> </ul> </div> <div class="content_right"> <div class="right_one"><span style="color: red"> 产品</span>导购</div> <div class="right_two"> <div class="yuyin"><b>语音业务</b><br> 普通电话 | 语音数字中继</div> </div> <div class="right_three"> <div class="yuyin"><b>语音业务</b><br> 普通电话 | 语音数字中继</div> </div> <div class="right_four"> <div class="yuyin"><b>语音业务</b><br> 普通电话 | 语音数字中继</div> </div> <div class="right_five"></div> </div> </div> <!--内容图片去--> <div id="content_two"> <div class="zuobian"> <div class="images"> <div class="zuobian_top"> <b><span>热门</span>产品</b></div> <div class="xiangce"> <ul> <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li> </ul> </div> </div> <div class="history_left"> <div class="history_lefttop"> <span style="padding: 30px"><b>企业历史</b></span><!--设置padding-left无效--> <div class="more"> <span style="padding:0px 0px 0px 30px ;font-size: 14px;"><a href="#">更多..</a></span> </div> </div> <div class="history_leftcontent"> <a class="history_apple" href="#"><img src="images/pic5.gif"></a> <a style="text-decoration: none" href="#">多角度对比 苹果iPod系列真机</a><br> 导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播… </div> <div class="history_leftlist"> <ul> <li><a href="#">纯CSS实现三列DIV等高布局</a></li> <li><a href="#">HTML元素的ID和Name属性的区别</a></li> <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li> <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li> <li><a href="#">javascript为FF设置首页</a></li> <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li> </ul> </div> </div> <div class="history_right"> <div class="history_righttop"> <span style="padding: 30px"><b>企业历史</b></span><!--设置padding-left无效--> <div class="more"> <span style="padding:0px 0px 0px 30px ;font-size: 14px;"><a href="#">更多..</a></span> </div> </div> <div class="history_leftcontent"> <a class="history_apple" href="#"><img src="images/pic5.gif"></a> <a style="text-decoration: none" href="#">多角度对比 苹果iPod系列真机</a><br> 导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播… </div> <div class="history_leftlist"> <ul> <li><a href="#">纯CSS实现三列DIV等高布局</a></li> <li><a href="#">HTML元素的ID和Name属性的区别</a></li> <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li> <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li> <li><a href="#">javascript为FF设置首页</a></li> <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li> </ul> </div> </div> </div> <div class="youbian"> <div class="questions"> <div class="que1"><span style="color: red"> 使用</span>问答</div> <div class="que2"> <ul> <li>最新出的这个产品如何使用？</li> <li>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</li> </ul> </div> <div class="que3"> <ul> <li>最新出的这个产品如何使用？？</li> <li>该产品采用全新的技术，较上一...</li> </ul> </div> <div class="que4"> <ul> <li>最新出的这个产品如何使用？？</li> <li>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了....</li> </ul> </div> <div class="que5"> <ul> <li>最新出的这个产品如何使用？？</li> <li>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了....</li> </ul> </div> <div class="que6"> <ul> <li>最新出的这个产品如何使用？？</li> <li>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</li> </ul> </div> <div class="que7"> </div> </div> <div class="iphone"> <div class="ipone_top"> <span style="color: red"> 联系</span>我们 </div> <div ipone_image> <img src="images/tel.gif" alt=""> </div> </div> </div> </div> <!--底部--> <div id="foot"> <div class="foot_top"> <center> <a href="#">关于我们 || 产品目录 || 联系我们 || 友情链接 || 反馈问题 || 广告合作</a> </center> </div> <div class="foot_foot"> <center> <p>Copyright © 2007 - 2010 aa25.cn All Rights Reserved</p> <p>标准之路 版权所有 京ICP备10007159号</p> </center> </div> </div> </div> </body> </html>
/* CSS Document */ *{ margin: 0; padding: 0; } #body{ margin: 0 auto; width: 905px; height: 1200px; } /*顶部div*/ #top{ width: 100%; height: 75px; } /*中间div*/ #content_top{ width: 100%; height: 260px; margin-top: 10px; } .logo{ background-image:url(../images/logo.jpg); background-repeat: no-repeat; height: 75px; width: 185px; background-position:0 50%; display: inline-block; float: left;/*即使给div设置了宽，依然独占一行，所以要设置成行内元素*/ } .search{ width: 277px; display: inline-block; float: left; margin-left: 638px; margin-top: -36px; font-size: 13px; } .button{ background:none; background-image: url(../images/btn_srh.gif); width: 58px; height: 23px; border: none; } .text{ background: none; background-image: url(../images/srh_bg.gif); } /*顶部背景图*/ #back_top{ height: 66px; width: 100%; background-image:url(../images/../images/nav_bg.gif); background-repeat: repeat-x; } /*导航栏*/ .back_a{ float: left; height: 66px; width: 4px; background:url(../images/../images/nav_bg.gif) no-repeat; background-position: 0 33%; overflow: hidden; } .back_b{ height: 66px; width: 4px; background:url(../images/../images/nav_bg.gif) no-repeat; background-position: -6px -66px; overflow: hidden; float: right; } .back_one ul li{ list-style: none; float: left; margin: 7px 25px; } .back_one ul li a{ text-decoration: none; color: white; font-weight:bold; } .back_one ul li a span{ background-image: url(../images/../images/nav_bg.gif); overflow: hidden; background-position: -2px -132px; color: #000000; text-align: center; display: inline-block; height: 30px; width: 94px; } .back_two ul li{ font-size: 12px; list-style: none; float: left; margin-left: 29px; margin-top: 6px; } .back_two ul{ position: absolute; /* 添加absoulute目的是脱离文本流，不受上层影响*/ top: 35px; } /*中部部内*/ .content_left{ height: 255px; width: 272px; display: inline-block; float: left; } .sign_shang{ height: 39px; width: 131px; background-image: url(../images/../images/btn_login.gif); display: inline-block; float: left; } .sign_ren{ height: 39px; width: 131px; background-image: url(../images/../images/../images/btn_login1.gif); display: inline-block; float: left; margin-left: 6px; } /*上部中间*/ .content_middle{ height: 255px; width: 390px; background-image: url(../images/../images/hot_bg.gif); background-repeat: no-repeat; display: inline-block; float: left; margin-left: 5px; } .content_middle .p{ font-size: 18px; font-weight: bold; text-align: center; margin-top: 15px; } .content_middle p{ font-size: 13px; margin: 15px; } .content_middle ul li{ list-style-image:url(../images/wuxu.jpg); font-size: 13px; margin:3px 36px 0; } .content_middle span{ display: inline-block; float: right; color: #7B9F11; } .content_middle a{ text-decoration: none; color: #000000; } .conten_middle .xuxian{ border: 1px #CCCCCC dashed; width: 350px; height: 80px; } /*不显示,设置边框无用*/ /*上部右方*/ .content_right{ height: 255px; width: 230px; float: left; margin-left: 7px; background-image: url(../images/side_bg.gif); } .right_one{ height: 28px; width: 100%; line-height: 28px; margin: auto; } .right_two{ height: 74px; width: 207px; background-image: url(../images/../images/icon2.gif) ; background-repeat: no-repeat; background-position: 10px 11px; border-bottom-style:dashed; border-width: 0.1px; margin-left: 4px; font-size: 14px; } .yuyin { position: relative; top:17px; right: -62px; } .right_three{ height: 74px; width: 207px; background-image: url(../images/../images/icon2.gif) ; background-repeat: no-repeat; background-position: 10px -60px; border-bottom-style:dashed; border-width: 0.1px; margin-left: 4px; font-size: 14px; } .right_four{ height: 74px; width: 207px; background-image: url(../images/../images/icon2.gif) ; background-repeat: no-repeat; background-position: 10px -134px; margin-left: 4px; font-size: 14px; } .right_five{ height: 5px; width: 100%; background-image: url(../images/side_bg.gif); background-position: 0% 100%; } /*内容第二部分*/ #content_two{ height: 630px; width: 100%; margin:auto; } .images{ border: 1px solid #DBDBDB; height: 293px; width: 660px; display: inline-block; float: left; margin-top: 10px; /*为什么之右images也浮动起来，下面的才能上来*/ } .zuobian_top{ height: 30px; width: 100%; background-color: #F7F7F7; line-height: 30px; } .xiangce ul li{ list-style: none; float: left; } .xiangce ul li img{ display: block; margin:0 auto; } .xiangce ul li a{ display:block; text-align: center; margin: 20px 0px 0px 20px; text-decoration: none; color: #000000; font-size: 14px } /*企业历史左边的*/ .history_left{ border: 1px solid #DBDBDB; height: 288px; width: 327px; float: left; display:inline-block; margin-top: 10px; } .history_lefttop{ height: 30px; width: 100%; background-color: #F7F7F7; line-height: 30px; background-image: url(../images/icon.gif) ;/*如何用img实现backgrondposition的效果*/ background-repeat: no-repeat; background-position: 10px 5px; overflow: hidden; } .more{ width: 70px; height: 30px; background-image: url(../images/icon.gif) ; background-repeat: no-repeat; background-position: 10px 5px; overflow: hidden; display: inline-block; float: right; } .history_leftcontent{ font-size: 13px; margin: 17px; color: #A7A3A4; } .history_leftcontent .history_apple{ margin-right: 15px; float: left; } .history_leftlist a{ text-decoration: none; color: #000000; } .history_leftlist ul li{ list-style-image:url(../images/wuxu.jpg); font-size: 13px; margin:3px 0px 3px 32px; } .history_right{ border: 1px solid #DBDBDB; height: 288px; width: 327px; float: left; display: inline-block; margin-top: 10px; margin-left: 5px; } .history_righttop{ height: 30px; width: 100%; background-color: #F7F7F7; line-height: 30px; background-image: url(../images/icon.gif) ;/*如何用img实现backgrondposition的效果*/ background-repeat: no-repeat; background-position: 10px 5px; overflow: hidden; } /*右边问答区*/ .questions{ height: 434px; width: 229px; margin-top: 10px; font-size: 13px; display: inline-block; margin-left: 12px; background-image: url(../images/side_bg.gif); background-repeat: no-repeat; overflow: hidden; background-position: 0% 0%; } .que1{ font-size: 16px; height: 28px; width: 100%; line-height: 28px; margin: auto; } .que2,.que6{ margin: 5px 5px 0px 30px; } .questions ul{ list-style-image: url( ../images/wuxu.jpg); margin-bottom: 10px; } .que3{ border: 1px dashed #DCDCDC; margin: 5px 5px 0px 30px; border-left-style: hidden; border-right-style: hidden; } .que4,.que5{ border: 1px dashed #DCDCDC; margin: 5px 5px 0px 30px; border-left-style: hidden; border-right-style: hidden; border-top-style: hidden; } .que7{ background-image: url(../images/side_bg.gif); background-position: 0% 100%; margin-top: -5px; margin-left: 0px; line-height: 33px; } .iphone{ border: 1px solid #A29D9E; border-top-style: hidden; border-left-style: hidden; border-right-style: hidden; height: 142px; width: 226px; margin-left: 14px; display: inline-block; margin-top: 10px; background-image: url(../images/side_bg.gif); background-repeat: no-repeat; overflow: hidden; background-position: 0% 0%; } .iphone_top{ font-size: 16px; height: 28px; width: 100%; line-height: 28px; margin: auto; } .ipone_image{ height: 110px; width: 100%; background-image: url(../images/tel.gif); } /*顶部*/ #foot{ width: 100%; height: 90px; margin-top: -13px; } .foot_top{ height: 30px; width: 100%; background-color: #AFAFAF; } .foot_top a{ text-decoration: none; line-height: 30px; text-align: center; color: white; } .foot_foot{ font-size: 13px; color: #666666； } span { color: red; } .back_two { position: relative; }