【html盒子模型】-产品案例-小米热门评价产品

本文链接：https://blog.youkuaiyun.com/m0_58152465/article/details/134433563

<style>
           * { 
              margin: 0;
		      padding: 0;}
			body {background-color: #f5f5f5;}
			a {text-decoration: none;
			   color: black;}
			.box {width: 300px;
				  height:415px;
				  background-color: #fff;
				  /* 让块级盒子水平居中对齐 */
				  margin: 20px auto;}
			.box img {/* 图片宽度和父亲一样宽 */
					  width: 100%;}
			.box p {
			    height: 70px;
			    font-size: 14px;
			    /* 应为这个段落没有width属性，所以使用padding不会撑大盒子的宽度 */
			    padding: 0 28px;
			    margin-top: 30px;
			}		
			.appraise {
			    font-size: 12px;
			    color: #b0b0b0;
			    margin-top: 20px;
			    padding: 0 28px;}
			.info {
			    margin-top: 10px;
			    padding: 0 28px;}
			.info h4{
				display:inline-block;
				font-weight: 500;
				font-size: 11px;
				text-decoration: none;
				color: black;}		 
				.info em{
				font-style: normal;
				color: #ebece0;
				margin: 0 6px 0 11px;}		 
				.info span{color:#ff6700;}
			.box1 {
			    width: 300px;
			    height: 163px;
			    border: 1px solid #ccc;
			    margin:0px auto;}		 
			li {list-style: none;}
			.box1 h3 {
			    height: 32px;
			    border-bottom: 1px dotted #ccc;
			    font-size: 14px;
			    font-weight: 400;
			    line-height: 32px;
			    padding-left: 15px;}
			.box1 ul li a {
			    font-size: 12px;
			    color: #666;
			    text-decoration: none;}
			.box1 ul li a:hover {text-decoration: underline;}
			.box1 ul li {
			    height: 23px;
			    line-height: 23px;
			    padding-left: 20px;}
			.box1 ul {padding-top: 7px;} 
</style>

<body>
		<div class="box">
		<img src="../img1/1.jpg" alt=""/>
		<p class="review">快递牛，整体感觉可以说秒连，红米给力</p>
		<div class="appraise">来自于177384232的评价</div>
		<div class="info">
			<h4><a href="#">Redmi AirDots真无线蓝牙耳机...</h4>
			<em>|</em>
            <span>99.9元</span>		 
		</div>
		</div>
		<div class="box1">  
		    <h3>品优购快报</h3>  
		    <ul>
				<li><a href="#">【特惠】爆款耳机5折秒！</a> </li>
				<li><a href="#">【特惠】母亲节，健康好礼低至5折！</a> </li>
				<li><a href="#">【特惠】爆款耳机5折秒</a> </li>
				<li><a href="#">【特惠】 9.9元洗100张照片!</a> </li>
				<li><a href="#">【特惠】长虹智能空调立省</a> </li>
			</ul>
		</div>
 
	</body>