盒子模型之美容热点产品

最新推荐文章于 2021-12-19 11:32:20 发布

qq_33151859

最新推荐文章于 2021-12-19 11:32:20 发布

阅读量1.5k

点赞数

分类专栏： HTML基础编程题

本文链接：https://blog.csdn.net/qq_33151859/article/details/78213972

版权

HTML基础编程题专栏收录该内容

32 篇文章 13 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>美容热点产品页面</title>
<link href="css/Page_208_4.css" rel="stylesheet" type="text/css"  />
</head>
<body>
<div id="list">
<p>大家都喜欢买的美容品</p>
<ul>
<li><a href="#"><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a></li>
<!--<li><span>2</sapn><a href="#">伊丽莎白雅顿显效复合活肤霜 75ml</a></li>-->
<li><a href="#"><span>2</span> 伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
<li><a href="#"><span>3</span> OLAY玉兰油多效修护霜 50g</a> </li>
<li><a href="#"><span>4</span>  巨型一号丝瓜水320ML</a></li>
<li><a href="#"><span>5</span> 倩碧保湿洁肤水2号 200ml</a> </li>
<li><a href="#"><span>6</span> 比度克细肤淡印霜 30g</a> </li>
<li><a href="#"><span>7</span> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a> </li>
<li><a href="#"><span>8</span> SK-II护肤精华露 215ml</a> </li>
<li><a href="#"><span>9</span> <欧莱雅青春密码活颜精华肌底液</a> </li>
</ul>
</div>

</body>
</html>

//css样式
body{
background-color: #eee7e1;
}
#list{
background: white;
width: 280px;
margin:0 auto;
}
p{
background: #e9185a;
height: 30px;
line-height: 30px;
font-size: 14px;
color: white;
padding-left: 10px;
margin-bottom: 0px;
}
ul{
list-style: none;
padding-left: 0px;
margin-top:0px;
margin-bottom: 20px;
width: 100%;
}
li{
border-bottom: 1px dashed #a8a5a5;
height: 30px;
line-height: 30px;
}
a{
font-size: 10px;
color: gray;
text-decoration: none;
}
span{
color: white;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
border-radius:50% ;
line-height: 20px;
background: gray;
}
a:hover{
color:#e9185a  ;
}
a:hover span{
background:#e9185a ;

}
效果图:

qq_33151859

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
盒子模型之美容热点产品

美容热点产品页面大家都喜欢买的美容品1 雅诗兰黛即时修护眼部精华霜15ml2伊丽莎白雅顿显效复合活肤霜 75ml-->2 伊丽莎白雅顿显效复合活肤霜 75ml3 OLAY玉兰油多效修护霜 50g 4  巨型一号丝瓜水320ML5 倩碧保湿洁肤水2号 200ml 6 比度克细肤淡印霜 30
复制链接

扫一扫