您的位置：首页 > Web前端

web前端布局练手项目

2017-02-26 12:06 363 查看

仿北大首页布局(只关心布局)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>练手项目1---Mr.Robot</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#top{
margin: 0 auto;
/*top栏居中对齐*/
height: 103px;
width: 970px;
}
#top #logo{
height: 103px;
width: 277px;
float: left;
background-color: red;
}
#top #language{
height: 49px;
width: 137px;
margin-bottom: 8px;
float: right;
background-color: green;
}
#top #nav{
width: 679px;
height: 46px;
float:right;
background-color: green;
}
#content{
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
height: 435px;
width: 970px;
/*background-color: gray;*/
}
#content #leftpart{
float: left;
height: 435px;
width: 310px;
background-color: yellow;
margin-right: 10px;
}
#content #rightpart{
float: left;
width: 650px;
height: 435px;
margin-bottom: 10px;
/*background-color: black;*/
}
#content #main{
width: 450px;
height: 400px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
#content #rightpart #news1{
width: 450px;
height: 240px;
margin-bottom: 10px;
background-color: skyblue;
}
#content #rightpart #news2{
width: 450px;
height: 110px;
margin-bottom: 10px;
background-color: green;
}
#content #rightpart #news3{
width: 450px;
height: 30px;
margin-bottom: 10px;
background-color: skyblue;
}
#content #rightpart #hotpic{
width: 190px;
height: 400px;
float: left;
background-color: purple;
}
#content #rightpart #links{
float: left;
width: 650px;
height: 25px;
background-color: yellow;
}
#footer{
height: 35px;
width: 970px;
background-color: skyblue;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 头部 -->
<div id="top">
<div id="logo"></div>
<div id="language"></div>
<div id="nav"></div>
</div>
<!-- 主要内容 -->
<div id="content">
<div id="leftpart"></div>
<div id="rightpart">
<div id="main">
<div id="news1"></div>
<div id="news2"></div>
<div id="news3"></div>
</div>
<div id="hotpic"></div>
<div id="links"></div>
</div>
</div>
<!-- 页尾 -->
<div id="footer"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html web

相关文章推荐

新的分享

章节导航