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

电话咨询

在线咨询

微信咨询