1. 程式人生 > >HTML練習---製作聚美優品彩妝熱賣產品列表頁面

HTML練習---製作聚美優品彩妝熱賣產品列表頁面

<!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>