您的位置：首页 > Web前端 > HTML

HTML 第六章----------- 制作聚美优品热点产品列表

2016-10-18 17:01 579 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>美容热点产品</title>
<style type="text/css">
c, ul,li {
margin:0px;
padding:0px;
}
ul, li {
list-style-type:none;
}
body {
background-color:#eee7e1;

}
#b {
width:260px;
background-color:#FFF;
}
#b c {
font-size:14px;
font-weight:bold;
color:#FFF;
background-color:#e9185a;
height:35px;
line-height:35px;
padding-left:10px;
}
#b li {
border-bottom:1px #a8a5a5 dashed;
height:30px;
line-height:30px;
padding-left:2px;
}
#b a {
color:#666666;
text-decoration:none;
}
#b a:hover {
color:#e9185a;
}
#b a span {
color:#FFF;
background-image:url(image/dot_01.gif) 0px 5px no-repeat;
text-align:center;
padding:10px;
font-weight:bold;
}
#b a:hover span {
color:#FFF;
background:url(image/dot_02.gif) 0px 5px no-repeat;
}
span{
background-image: url(dot_01.gif);
background-repeat: no-repeat;
background-position: center center;
padding:10px;
}
</style>

</head>
<body>
<div id="b">
<p>大家都喜欢买的美容品</p>
<ul>
<li><a href="#"><span>1</span>雅诗兰黛即时修护眼部精华霜15ml</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航