float简单布局

最新推荐文章于 2021-06-17 18:43:14 发布

记录杂文

最新推荐文章于 2021-06-17 18:43:14 发布

阅读量207

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/ShenYouRong/article/details/106430083

版权

html 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>浮动布局</title>
	<link rel="stylesheet" type="text/css" href="../css/floatsuccess.css">
	<style>

	</style>
</head>
<body>
	
	<div class="header">
		<div class="log"> logo w:250 h:100</div>
		<div class="language">language w:150,h:50</div>
		<div class="nav">nav w:650 h:50</div>
	</div>
	<div class="content">
		<div class="aside"> w:320 h：400</div>
		<div class="artcile">
			<div class="artcileTop">
				<div class="artcileTopLeft">
					<div class="artcileTopLeftTop">w:650 h350</div>
					<div class="artcileTopLeftBottom"></div>
				</div>
				<div class="artcileTopRight"></div>
			</div>
			<div class="artcileBottom"></div>
		</div>
	</div>
	<div class="footer"></div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
	text-align: center;

}
.header,.content,.footer{
	margin: 10px auto;
}
.heade,.log,.language,.nav{
	display: inline-block;
}
.header{
	width: 980px;
	height: 100px;
	/*background-color: #17b8e0;*/
}

.header>.log{
	float: left;
	width: 250px;
	height: 100px;
	background-color: #0c8977;
}
.header>.language{
	float: right;
	width: 150px;
	height: 50px;
	background-color: #3be41f;

}
.header>.nav{
	float: right;
	width: 650px;
	height: 50px;
	background-color: #088594;
}


.content{
	width: 980px;
	height: 400px;
	/*background-color: #1aed10;*/
}
.content>.aside{
	float: left;
	width: 320px;
	height: 400px;	
	background-color: #ee1b6f;
}
.content>.artcile{
	float: right;
	width: 650px;
	height: 400px;
	/*background-color: #6f0630;*/
}
.content>.artcile>.artcileTop{
	width: 650px;
	height: 350px;
	/*background-color: #616f06;*/
}
.content>.artcile>.artcileTop>.artcileTopLeft{
	width: 400px;
	height: 350px;
	/*background-color: #616f06;*/
	float: left;
}
.content>.artcile>.artcileTop>.artcileTopLeft>.artcileTopLeftTop{
	width: 400px;
	height: 200px;
	background-color: #37ca15;
}
.content>.artcile>.artcileTop>.artcileTopLeft>.artcileTopLeftBottom{
	width: 400px;
	height: 140px;
	background-color: #ac510d;
	margin-top: 10px;
}
.content>.artcile>.artcileTop>.artcileTopRight{
	width: 240px;
	height: 350px;
	background-color: #6db982;
	float: right;
}
.content>.artcile>.artcileBottom{
	width: 650px;
	height: 40px;
	background-color: #c9e411;
	margin-top: 10px;
}
.footer{
	width: 980px;
	height: 40px;
	background-color: #dc4916;

}