HTML第六章上机练习3

最新推荐文章于 2019-07-22 09:54:20 发布

_苏小白

最新推荐文章于 2019-07-22 09:54:20 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/qq_36074043/article/details/52849383

版权

<!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">
.text span{
	
	background-image: url(dot_01.gif);
	background-repeat: no-repeat;
	padding:10px;
	background-position: 0px 8px;
	color: #FFF;
	border-bottom-style:dashed;
	list-style-type:none;
}
.ty {
	width:500px;
	height:50px;
	background-color:#F36;
	background-position: left center;
	line-height: normal;
	color: #FFF;
	font-weight: bold;
	font-size: 36px;
	background-repeat: no-repeat;

}

a:hover{color:#C30;}
.text {
	list-style-position: outside;
	list-style-type: none;
	border-bottom-width: thin;
	border-bottom-style: dashed;
}

span{
	background-image: url(dot_01.gif);
	background-repeat: no-repeat;
	background-position: center center;	
	padding:8px;
	
	}
	a:hover span{
	background-image: url(dot_02.gif);
	background-repeat: no-repeat;
	background-position: center center;		
	padding:8px;
	
		}
		.kk{
	margin: 0px;
	padding: 0px;}
</style>
</head>


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

_苏小白

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML第六章上机练习3

美容热点产品.text span{ background-image: url(dot_01.gif); background-repeat: no-repeat; padding:10px; background-position: 0px 8px; color: #FFF; border-bottom-style:dashed; list-style-type:none;
复制链接

扫一扫