任务要求:
简单对网页进行分割布局,基本思路上中下三部分,然后在每一部分细分
/* 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; }
电话咨询
在线咨询
微信咨询