用盒模型与浮动来实现小米的产品图

最新推荐文章于 2021-11-14 20:44:39 发布

炽叶

最新推荐文章于 2021-11-14 20:44:39 发布

阅读量342

点赞数

本文链接：https://blog.csdn.net/Mon3tr/article/details/100642560

版权

原型：
在这里插入图片描述
网页成品图：

代码部分：

<!DOCTYPE>
<head>
<meta content="text/html; charset=gb2312" />
<title>小米</title>
<style>
	*{
		padding:0;
		margin:0;
	}
	.headerwrap{
		width:1224px;
		background-color:#FFFFFF;
		margin:auto;	
	}
	.xiaomi{
		margin:5px;
		margin-left:12px;
		margin-right:12px;
		float:left;
	}
	.xiaomi3{
		width:127px;
		height:200px;
		border:1px solid black;
		margin:5px auto;
		padding:50px;
		float:left;
		margin-right:12px;
	}
	
	
</style>
</head>

<body>
<div class="headerwrap">
<div class="xiaomi" align="center">
	<img src="mi.png">
</div>
<div class="xiaomi3" align="center">
	<p><img src="m1.png"></p>
	<p>&nbsp; </p>
	<p>小米电视3</p>
	999元 <del>1199元</del>
</div>
<div class="xiaomi3" align="center">
	<img src="m2.png" width="134" height="112">
	<p>&nbsp; </p>
	<p>小米电视5</p>
	1099元 <del>1399元</del>
</div>
<div class="xiaomi3" align="center">
	<img src="m3.png" width="134" height="112">
	<p>&nbsp; </p>
	<p>小米电脑</p>
	4999元 <del>5199元</del>
</div>
<div class="xiaomi3" align="center">
	<p><img src="mi4.png"></p>
	<p>&nbsp; </p>
	<p>小米电脑</p>
	5999元 <del>6199元</del>
</div>



<div class="xiaomi3" align="center">
	<p><img src="m1.png"></p>
	<p>&nbsp; </p>
	<p>小米电视3</p>
	999元 <del>1199元</del>
</div>
<div class="xiaomi3" align="center">
	<img src="m2.png" width="134" height="112">
	<p>&nbsp; </p>
	<p>小米电视5</p>
	1099元 <del>1399元</del>
</div>
<div class="xiaomi3" align="center">
	<img src="m3.png" width="134" height="112">
	<p>&nbsp; </p>
	<p>小米电脑</p>
	4999元 <del>5199元</del>
</div>
<div class="xiaomi3" align="center">
	<p><img src="mi4.png"></p>
	<p>&nbsp; </p>
	<p>小米电脑</p>
	5999元 <del>6199元</del>
</div>
</div>

</body>
</html>