master

分支 (1)

管理

管理

master

float_and_others
/
浮动练习.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.header{
				width: 970px;
				height: 103px;
				margin: 0px auto;
				margin-bottom: 10px;
				margin-top: 9px;
			}
			.center{
				width: 970px;
				height: 435px;
				margin: 0px auto;
				margin-bottom: 10px;
			}
			.footer{
				width: 970px;
				height: 35px;
				background-color: blue;
				margin: 0px auto;
			}
			.header .logo{
				float:left;
				width: 277px;
				height: 103px;
				background-color: red;
				margin-right: 14px;

			}
			.header .lan-nav{
				float: left;
				width: 679px;
				height: 103px;
			}
			.lan-nav .lan{
				float: right;
				width: 137px;
				height: 49px;
				background-color: green;
				margin-bottom: 8px;
			}
			.lan-nav .nav{
				float: right;
				width: 679px;
				height: 46px;
				background-color: green;
			}
			.center .body1{
				float:left;
				width: 310px;
				height: 435px;
				background-color: yellow;
				margin-right: 10px;
			}
			.center .body2{
				float: left;
				width: 650px;
				height: 435px;
			}
			.cneter-body1{
				float: left;
				width: 650px;
				height: 400px;
				margin-bottom: 10px;
			}
			.center-body2{
				float: left;
				width: 650px;
				height: 25px;
				background-color: darkgreen;
			}
			.Center-body1{
				float: left;
				width: 450px;
				height: 400px;
				margin-right: 10px;
			}
			.Center-body2{
				float: left;
				width: 190px;
				height: 400px;
				background-color: purple;
			}
			.most-center-body1{
				width: 450px;
				height: 240px;
				margin-bottom: 10px;
				background-color: dodgerblue;
			}
			.most-center-body2{
				width: 450px;
				height: 110px;
				margin-bottom: 10px;
				background-color: dodgerblue;
			}
			.most-center-body3{
				width: 450px;
				height: 30px;
				background-color: dodgerblue;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="logo">
				<img src="img/logo.png" width="277px" height="103px" />
			</div>
			<div class="lan-nav">
				<div class="lan">
					<img src="img/lan.png" width="137px" height="49px" />
				</div>
				<div class="nav">
					<img src="img/nav.png" width="679px" height="46px"/>
				</div>
			</div>
		</div>
		<div class="center">
			<div class="body1">
				<img src="img/body1.png" width="310px" height="435px" />
			</div>
			<div class="body2">
				<div class="cneter-body1">
					<div class="Center-body1">
						<div class="most-center-body1"></div>
						<div class="most-center-body2"></div>
						<div class="most-center-body3"></div>
					</div>
					<div class="Center-body2"></div>
				</div>
				<div class="center-body2"></div>
			</div>
		</div>
		<div class="footer">
			<img src="img/footer.png" width="970px" height="35px" />
		</div>
	</body>
</html>