前端小作品--基本网页布局

最新推荐文章于 2024-02-07 10:05:00 发布

赵小小Smile

最新推荐文章于 2024-02-07 10:05:00 发布

阅读量408

点赞数

本文链接：https://blog.csdn.net/qq_23658107/article/details/78114050

版权

<!DOCTYPE html>
<html>
<head>
	<title>网页基本布局</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.header{
			width: 970px;
			height: 103px;
			margin: 0 auto;
			margin-bottom: 10px;
		}
		.header .logo{
			float: left;
			width: 277px;
			height: 103px;
			background-color: skyblue;
			
		}
		.header .language{
			float: right;
			width: 137px;
			height: 49px;
			background-color: green;
			margin-bottom: 8px;
		}
		.header .nav{
			float: right;
			width: 679px;
			height: 46px;
			background-color: green;
		}
		.content{
			width: 970px;
			height: 435px;
			margin: 0 auto;
		}
		.content .banner{
			float: left;
			width: 310px;
			height: 435px;
			background-color: pink;
		}
		.content .main{
			float: right;
			width: 650px;
			height: 435px;
		}
		.content .main .news{
			width: 650px;
			height: 401px;
			margin-bottom: 10px;
		}
		.content .main .links{
			width: 650px;
			height: 25px;
			background-color: purple;
		}
		.content .main .news .newshome{
			float: left;
			width: 450px;
			height: 401px;
		}
		.content .main .news .shots{
			float: right;
			width: 190px;
			height: 401px;
			background-color:red;
		}
		.content .main .news .newshome .news1{
			width: 450px;
			height: 240px;
			background-color: blue;
			margin-bottom: 10px;
		}
		.content .main .news .newshome .news2{
			width: 450px;
			height: 110px;
			background-color: blue;
			margin-bottom: 10px;
		}
		.content .main .news .newshome .news3{
			width: 450px;
			height: 30px;
			background-color: blue;
		}
		.footer{
			width: 970px;
			height: 30px;
			background-color: orange;
			margin: 0 auto;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="logo"></div>
		<div class="language"></div>
		<div class="nav"></div>
	</div>
	<div class="content">
		<div class="banner"></div>
		<div class="main">
			<div class="news">
				<div class="newshome">
					<div class="news1"></div>
					<div class="news2"></div>
					<div class="news3"></div>
				</div>
				<div class="shots"></div>
			</div>
			<div class="links"></div>
		</div>
	</div>
	<div class="footer"></div>

</body>
</html>