HTML+CSS商品小盒子模块

效果:

 html:

<body>
	 <div class="box">
		 <img src="img/图片2.png" alt="">
		 <div class="box2">
			 <p class="zhujie">这是一款蓝牙耳机,这是一款蓝牙耳机,这是一款蓝牙耳机</p>
			 <div class="pinjia">来自****</div>
			 <div class="info">
				 <h4>******</h4>
				 <h3>|</h3>
				 <span>199.9¥</span>
				 </div>
		 </div>
		 
	 </div>
</body>

css:

<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: #e8eae8;
		}
		.box{
			width: 350px;
			height: 490px;
			background-color: #ffffff;
			margin: 0 auto;
		}
		.box img{
			width: 100%;
		}
		.box2{
			padding: 0 30px;
			
		}
		.zhujie{
			margin-top: 40px;
			height: 105px;
			
		}
		
		.pinjia{
			color: #a2a2a2;
			font-size: 12px;
		}
		.info{
			margin-top: 20px;
		}
		.info h4{
			display: inline-block;
			font-weight: 400;
		}
		.info h3{
			display: inline-block;
			color: #747474;
		}
		.info span{
			color: #e19f83;
		}
	</style>

又是美好的一天!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值