题目

需求说明

(1) . 使用无序列表制作美容品列表

(2) . 列表图标使用背景图像实现

实现效果

image.png

实现思路

(1) . 页面背景颜色直接使用标签选择器body设置。

(2) . 使用margin和padding设置段落标签、无序列表标签的外边距、内边距为0px。

(3) . 使用list-style-type设置列表的项目符号为无。

(4) . 使用border-bottom设置列表下边框的虚线边框。

(5) . 使用a和a :hover分别设置超链接样式和鼠标悬停在超链接上时文本样式。

html代码

<title>聚美优品美容热点</title>
<link href="美容热点.css" rel="stylesheet" type="text/css">
</head>

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

css代码

body,div,h3,ul{
    padding: 0px;
    margin: 0px;
}
h3{
    background-color: #E9185A;
    color: #FFFCFD;
}
div{
    width: 400px;
    border: 5px #EEE7E1 solid;
}
li{
    list-style-type: none;
    padding-left: 9px;
    border-bottom: 1px #A9A9A9 dashed;
    height: 30px;
    background-image: url("images/dot_01.gif");
    background-repeat: no-repeat;
}
a{
    text-decoration: none;
    color: #636363;
}
a:hover{
    color: #F6145E;
    text-decoration: none;
    background-image: url("images/dot_02.gif");
    background-repeat: no-repeat;
    background-position: -8px 0px;
}
.col{
    color: #F9F8F8;
}