正文
每天点滴的进行，css+div简单布局...布局
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博雅互动</title>
<link rel="stylesheet" type="text/css" href="css/boya.css" />
</head>
<body>
<div class="head">
<div class="head_logo_conten">
<ul>
<li class="head_logo_logo"></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>
<li class="head_logo_right"></li>
</ul>
</div>
</div>
<div class="head_banner">
</div>
<div class="conten">
<div class="conten_top">
<div class="conten_top_img">
<ul>
<li><img src="data:image/bpt1.jpg" /></li>
<li>博雅互动</li>
<li><a href="#">点我互动</a></li>
</ul>
</div>
<div class="conten_top_img">
<ul>
<li><img src="data:image/bpt2.jpg" /></li>
<li>博雅互动</li>
<li><a href="#">点我互动</a></li>
</ul>
</div>
<div class="conten_top_img">
<ul>
<li><img src="data:image/bpt1.jpg" /></li>
<li>博雅互动</li>
<li><a href="#">点我互动</a></li>
</ul>
</div>
<div class="conten_top_img">
<ul>
<li><img src="data:image/bpt2.jpg" /></li>
<li>博雅互动</li>
<li><a href="#">点我互动</a></li>
</ul>
</div>
</div>
<hr />
<div class="conten_footer">
<div class="conten_footer_left">
<ul>
<li></li>
<li></li>
<li></li>
<li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </span></p></li>
<li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </span></p></li>
<li><p>博雅互动博雅互动博雅互动博雅互动博雅互动<span>11-23 </span></p></li>
</ul>
</div>
<div class="conten_footer_right">
<ul>
<li class="title"><a href="">招聘岗位</a></li>
<li><a href="">PHP 专场招聘</a></li>
<li><a href="">PHP 专场招聘</a></li>
<li><a href="">PHP 专场招聘</a></li>
<li><a href="">PHP 专场招聘</a></li>
</ul>
</div>
</div>
</div>
<div class="top_head">
<a href="#top"><img src="data:image/jiantou.png"/></a>
</div>
</body>
</html>
css：
/*初始化状态*/
body,li,ul,div{
margin: 0px;
padding: 0px;
list-style: none;
}
body{
background: url(../image/indexmainbg.jpg) no-repeat center bottom;
padding-top: 58px;
}
/*头部盒子 头部logo部分*/
.head{
text-align: center;
width: 100%;
height: 58px;
background-color:#191d3a;
position: fixed;
top: 0px;
left: 0px;
}
.head_logo_conten{
width: 1000px;
height: 58px;
margin: 0px auto;
}
.head_logo_conten .head_logo_logo{
width:184px ;
background: url(../image/logo.png) no-repeat center center;
}
.head_logo_conten .head_logo_right{
width:184px ;
background: url(../image/jrwm.png) no-repeat center center;
}
.head_logo_conten li{
width: 100px;
height: 58px;
line-height: 58px;
float: left;
}
a{
text-decoration: none;
}
a:link,a:visited{
color: gray;
}
a:hover{
color: white;
font-weight: bold;
}
/*banner部分*/
.head_banner{
margin: 0 auto;
background: url(../image/banner.jpg) no-repeat center center;
width:100%;
height: 465px;
}
/*conten内容部分*/
.conten{
margin: 0 auto;
width: 1100px;
height: 650px;
}
.conten_top{
width: 1100px;
height: 320px;
text-align: center;
}
hr{
font-weight: bold;
width: 1000px;
}
.conten_top_img{
width: 220px;
height: 260px;
margin:50px 0 0 40px;
float: left;
}
.conten_top_img li{
margin-bottom: 10px;
}
.conten_top_img li a{
color: green;
font-size: 12px;
padding-right: 10px;
background: url(../image/xjt.png) no-repeat right center;
}
/*底部部分*/
.conten_footer{
width: 1100px;
height: 310px;
}
.conten_footer_left,.conten_footer_right{
width: 500px;
height: 310px;
margin-left: 30px;
float: left;
}
.conten_footer_left{
background: url(../image/bynewsbg.jpg) no-repeat center;
}
.conten_footer_left li{
margin-left: 20px;
height: 45px;
list-style: 45px;
}
.conten_footer_left li p{
height: 28px;
border-bottom: 1px dashed gray;
}
.conten_footer_left li span{
float: right;
}
.conten_footer_right{
background: url(../image/zczp.jpg) no-repeat center;
}
.conten_footer_right li{
margin-left:20px;
margin-top: 20px;
font-weight: bold;
width: 350px;
height: 40px;
line-height: 40px;
padding-left:10px ;
}
.title{
background: url(../image/jrwm.png) no-repeat right center;
}
.conten_footer_right .title a{
font-size: 18px;
font-weight: bold;
color:black;
padding-left: 50px;
}
/*返回顶部 定位*/
.top_head{
width:19px ;
height: 19px;
border: 1px solid gainsboro;
border-radius:19px;
position: fixed;
right: 50px;
bottom: 50px;
}
效果图50%窗口：
