web前端佈局練手專案

liushaozhuanyong發表於2017-02-26
Web前端

仿北大首頁佈局(只關心佈局)

<!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>


相關文章