小米官网布局

最新推荐文章于 2022-03-09 16:55:41 发布

无敌代码终结者

最新推荐文章于 2022-03-09 16:55:41 发布

阅读量1.8k

点赞数 3

文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_42280470/article/details/109572075

版权

主要了解CSS中的浮动问题

运行效果如图所示

主要代码如下所示需要自己独立分析去学习，图片资源可以去官方区内去复制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#container {
				width: 1242px;
				height: 614px;
				background-color: aqua;
				margin: 0 auto;
			}
			#left {
				float: left;
				background: url("./img/cebian.jpg") no-repeat;
				width: 234px;
				height: 614px;
			}
			#right {
				float: left;
				text-align: center;
			}
			ul li {
				list-style: none;
				margin-right:12px;
			}
			.first {
				margin-left: 12px;
				float: left;
				width: 240px;
				height: 300px;
				background: url(img/1.jpg) no-repeat;
				background-color: #FFF;
				background-position: center top;
			}
			.second {
				float: left;
				width: 240px;
				height: 300px;
				background: url(img/2.jpg) no-repeat;
				background-color: #FFF;
				background-position: center top;
			}
			.third {
				float: left;
				width: 240px;
				height: 300px;
				background: url(img/3.jpg) no-repeat;
				background-color: #FFF;
				background-position: center top;
			}
			.four {
				margin-right: 0px;
				float: left;
				width: 240px;
				height: 300px;
				background: url(img/4.jpg) no-repeat;
				background-color: #FFF;
				background-position: center top;
			}
			.xia {
				margin-top: 314px;
			}
			.five {
				margin-left: 12px;
				float: left;
				width: 240px;
				height: 300px;
				background: url(img/5.jpg) no-repeat;
				background-color: #FFF;
				background-position: center top;
			}
			.six {
				float: left;
				width: 240px;
				height: 300px;
				background: url(img/6.jpg) no-repeat;
				background-color: #FFF;
				background-position: center top;
			}
			.seven {
				float: left;
				width: 240px;
				height: 300px;
				background: url(img/7.jpg) no-repeat;
				background-color: #FFF;
				background-position: center top;
			}
			.eight {
				margin-right: 0px;
				float: left;
				width: 240px;
				height: 300px;
				background: url(img/8.jpg) no-repeat;
				background-color: #FFF;
				background-position: center top;
			}
			
		</style>
	</head>
	<body>
		<div id="container">
			<div id="left">
				左青龙
			</div>
			<div id="right">
				<ul class="shang">
					<li class="first"></li>
					<li class="second"></li>
					<li class="third"></li>
					<li class="four"></li>
				</ul>
				<ul class="xia">
					<li class="five"></li>
					<li class="six"></li>
					<li class="seven"></li>
					<li class="eight"></li>
				</ul>
			</div>
		</div>
	</body>
</html>