2021-03-18

最新推荐文章于 2024-10-02 15:35:50 发布

zt702839194

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量47

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/zt702839194/article/details/114983926

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米商城</title>
		<style>
			a{
				/*取消下划线：text-decoration: none;*/
				text-decoration: none;
			}
			p2{
				color: red;
			}
			p3{
				color: blue;
			}
			.box{
				width: 1473px;
				height: 795px;
				background-color: whitesmoke;
				margin: auto;
			}
			.box1{
				float: left;
				width: 70px;
				height: 55px;
				font-size: 25px;
				text-align: center;
				line-height: 55px;
			}
			.box2{
				float: right;
				width: 120px;
				height: 55px;
				font-size: 28px;
				text-align: center;
				line-height: 55px;
			}
			.box3{
				width: 1475px;
				height: 737px;
				overflow: hidden;
			}
			.box4{
				float: left;
				width: 280px;
				height: 740px;
			}
			.box5{
				float: left;
				width: 1177px;
				height: 740px;
				margin-left: 16px;
			}
			.box6{
				width:1177px;
				height: 370px;
			}
			.box7{
				width:1177px;
				height: 370px;
				overflow: hidden;
			}
			.box8{
				float: left;
				width: 281.25px;
				height: 362px;
				background-color: white;
				margin-right: 16px;
				margin-bottom: 16px;
			}
			.box9{
				float: left;
				width: 281.25px;
				height: 362px;
				background-color: white;
				margin-bottom: 16px;
			}
			.box10{
				width: 240px;
				height: 240px;
				margin: auto;
			}
			.box11{
				width: 180px;
				height: 33px;
				font-size: 16px;
				text-align: center;
				line-height: 16px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">
				手机
			</div>
			<div class="box2">
				<a href="https://www.baidu.com">查看全部</a>
			</div>
			<div class="box3">
				<div class="box4"><img src="img/4.jpg.jpg"/></div>
				<div class="box5">
					<div class="box6">
						<div class="box8">
							<div class="box10"><img src="img/5.jpg.jpg"/></div>
							<div class="box11">
								<p>小米10S</p>
								<p2>骁龙|对称式双扬立体声</p2>
								<p3>3299元起</p3>
							</div>
						</div>
						<div class="box8">
							<div class="box10"><img src="img/5.jpg.jpg"/></div>
							<div class="box11">
								<p>小米10S</p>
								<p2>骁龙|对称式双扬立体声</p2>
								<p3>3299元起</p3>
							</div>
						</div>
						<div class="box8">
							<div class="box10"><img src="img/5.jpg.jpg"/></div>
							<div class="box11">
								<p>小米10S</p>
								<p2>骁龙|对称式双扬立体声</p2>
								<p3>3299元起</p3>
							</div>
						</div>
						<div class="box9">
							<div class="box10"><img src="img/5.jpg.jpg"/></div>
							<div class="box11">
								<p>小米10S</p>
								<p2>骁龙|对称式双扬立体声</p2>
								<p3>3299元起</p3>
							</div>
						</div>
					</div>
					<div class="box7">
						<div class="box8">
							<div class="box10"><img src="img/5.jpg.jpg"/></div>
							<div class="box11">
								<p>小米10S</p>
								<p2>骁龙|对称式双扬立体声</p2>
								<p3>3299元起</p3>
							</div>
						</div>
						<div class="box8">
							<div class="box10"><img src="img/5.jpg.jpg"/></div>
							<div class="box11">
								<p>小米10S</p>
								<p2>骁龙|对称式双扬立体声</p2>
								<p3>3299元起</p3>
							</div>
						</div>
						<div class="box8">
							<div class="box10"><img src="img/5.jpg.jpg"/></div>
							<div class="box11">
								<p>小米10S</p>
								<p2>骁龙|对称式双扬立体声</p2>SR
								<p3>3299元起</p3>
							</div>
						</div>
						<div class="box9">
							<div class="box10"><img src="img/5.jpg.jpg"/></div>
							<div class="box11">
								<p>小米10S</p>
								<p2>骁龙|对称式双扬立体声</p2>
								<p3>3299元起</p3>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
`