<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.a {
background-color: #F3C;
padding: 7px;
color: #FFF;
}
.b {
width:300px;
height:500px;
background-color:#FFC;
}
.c{
padding: 7px;
color: #666;
}
.d {
width:
background-position: center center;
padding:0px;
margin:0px;
}
.aa {
list-style-position: outside;
list-style-type: none;
margin: 1px;
padding: 1px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-bottom-style: dashed;
text-indent: 1;
text-align: center;
}
a{
text-decoration:none
}
a:hover span{
background-image: url(dot_02.gif);
background-repeat: no-repeat;
padding: 10px;
background-position: left center;
}
a:hover div{
display: block;
}
span{
background-image: url(dot_01.gif);
background-repeat: no-repeat;
padding: 10px;
background-position:center center;
}
.z{display:none}
</style>
</head>
<body class="b">
<div class="a">大家都喜欢彩妆</div>
<div class="c">
<ul class="d">
<li class="aa"><a href="#"/><span>1.</span>Za姬芮新能真皙美白隔离霜 35g <div class="z"><img src="icon-1.jpg" /><br/>¥62.00 最近69122人购买</div></a></li>
<li class="aa"><a href="#"/><span>2.</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml <div class="z"><img src="icon-2.jpg" /><br/>¥89.00 最近13610人购买</div> </a></li>
<li class="aa"><a href="#"/><span>3.</span>菲奥娜水漾CC霜40gl <div class="z"><img src="icon-3.jpg" /><br/>¥59.90 最近13403人购买</div></a></li>
<li class="aa"><a href="#"/><span>4.</span>DHC 蝶翠诗橄榄卸妆油 200ml<div class="z"><img src="icon-4.jpg" /><br/>¥169.00 最近16757人购买</div></a></li>
</ul>
</div>
</body>
</html>
HTML练习---制作聚美优品彩妆热卖产品列表页面
最新推荐文章于 2024-05-12 21:57:36 发布