您的位置：首页 > Web前端 > CSS

CSS+HTML实现布局

2018-01-11 09:21 465 查看 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div+css</title>
<style>
div.first
{
width:1000px;
height:46px;
background-color:#77FF00;
color:blue;
border: 3px solid #0088A8;
padding-top:2px;
padding-bottom:2px;
padding-left:10px;
font-size:30px;
font-weight:bold;
margin:8px auto;
}
.second
{
width:1000px;
height:500px;
background-color:#77FF00;
color:blue;
border: 3px solid #0088A8;
padding-top:2px;
padding-bottom:2px;
padding-left:10px;
font-size:30px;
font-weight:bold;
margin:auto;
}
p.one
{
margin:10px;
width:200px;
height:50px;
padding-left:200px;
padding-right:200px;
padding-top:100px;
padding-bottom:100px;
font-weight:bold;
text-align: center;
background-color:#009FCC;
color:white;
}
p.two
{
margin:10px;
width:150px;
height:50px;
position:absolute;
left:905px;
top:141px;
padding-left:100px;
padding-right:100px;
padding-top:100px;
padding-bottom:100px;
font-weight:bold;
text-align: center;
background-color:#009FCC;
color:white;
}
p.three
{
padding-left:70px;
padding-right:70px;
padding-top:75px;
padding-bottom:75px;
font-weight:bold;
text-align: center;
background-color:#009FCC;
color:white;
width:150px;
height:60px;
position:absolute;
left:283px;
top:390px;
}
p.four
{
padding-left:70px;
padding-right:70px;
padding-top:75px;
padding-bottom:75px;
font-weight:bold;
text-align: center;
background-color:#009FCC;
color:white;
width:150px;
height:60px;
position:absolute;
left:593px;
top:390px;
}
p.five
{
padding-left:100px;
padding-right:100px;
padding-top:75px;
padding-bottom:75px;
font-weight:bold;
text-align: center;
background-color:#009FCC;
color:white;
width:150px;
height:60px;
position:absolute;
left:915px;
top:390px;
}
</style>
</head>
<body>
<div class = "first">
logo标志
</div>
<div class = "first">
导航条
导航条
</div>

<div class="second">
<p class="one">主题内容1<p>
<p class="two">列表区1<p>
<p class="three">主体内容2</p>
<p class="four">主体内容3</p>
<p class="five">列表区2</p>
</div>

<div class = "first">
版权信息
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航