HTML练习---制作聚美优品彩妆热卖产品列表页面

最新推荐文章于 2023-04-13 11:28:47 发布

可爱的黄油手

最新推荐文章于 2023-04-13 11:28:47 发布

阅读量1.2w

点赞数 6

本文链接：https://blog.csdn.net/gengzhi1293443962/article/details/52849782

版权

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

可爱的黄油手

关注

6
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
HTML练习---制作聚美优品彩妆热卖产品列表页面

无标题文档.a { background-color: #F3C; padding: 7px; color: #FFF; }.b { width:300px; height:500px; background-color:#FFC;}.c{ padding: 7px; color: #666; }.d { width: background-positio
复制链接

扫一扫