聚美优品美容热点产品

body部分:

 

<div>
			<h3>大家都喜欢买的美容品</h3>
			
			<ul>
				<li><span>1</span><a href=""> 雅诗兰黛即时修护眼部精华霜15ml</a><img src="../chapter07/img/icon-1.jpg" ></li>
				<li><span>2</span><a href=""> 伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
				<li><span>3</span><a href=""> OLAY玉兰油多效修护霜 50g</a></li>
				<li><span>4</span><a href="">巨型一号丝瓜水320ML</a></li>
				<li><span>5</span><a href="">倩碧保湿洁肤水2号 200ml</a></li>
				<li><span>6</span><a href="">比度克细肤淡印霜 30g</a></li>
				<li><span>7</span><a href=""> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li>
				<li><span>8</span><a href=""> SK-II护肤精华露 215ml</a></li>
				<li><span>9</span><a href=""> 欧莱雅青春密码活颜精华肌底液</a></li>
				
			</ul>
		</div>

CSS部分：

body{background-color: #EEE7E1;}
			*{padding: 0px;margin: 0px;}
			div{
				padding-left: 7px;
				padding-top: 7px;
				width: 300px;
				height: 313px;
				
			}
			li{
				background-color: white;
				list-style: none;
				font-size: 13px;
				line-height: 35px;
				border-bottom: grey 1px dashed;
				padding-left: 5px;
				}
			h3{
				background-color:red ;
				font-size: 16px;
				color: white;
				padding-top: 5px;
				padding-bottom: 5px;
				padding-left: 10px;
				}
			a{text-decoration: none;}
			span{
				width: 28px;
				height: 28px;
				display:inline-block;
				border: 1px solid red;
				border-radius: 50%;
				text-align: center;
				background: black;
				color: white;
				
			}
			ul li img{display:none;}
			li:hover>span{background: red;}
			li:hover>a{color: red;}
			li:hover img{display: block;}