详细讲解

最新推荐文章于 2022-01-02 21:26:42 发布

原创最新推荐文章于 2022-01-02 21:26:42 发布 · 254 阅读

CC 4.0 BY-SA版权

<!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">
ul {
	list-style-type:none;/*去除项目符号 前面点*/
	line-height:26px;/*整个ul的里面所有字的行高*/
}
li {
	border:#000 thin solid;/*li的边框:无用方便查看*/
}
span {
	color:#FFF;/*修改序号的颜色*/
	padding:10px;/*内容的内边距*/
	background:url(dot_01.gif) 0px 8px no-repeat;/*背景图片   位移  重复方式*/
}
a {
	color:#999;/*a标签颜色*/
	text-decoration:none;/*去除下划线*/
}
a:hover span {/*修改span背景图片   修改span 的颜色*/
	padding:10px;/*内容的内边距*/
	color:#000;/*修改序号的颜色*/
	background:url(dot_02.gif) 0px 8px no-repeat;/*背景图片   位移  重复方式*/
}
a:hover {/*修改a超链接的颜色*/
	color:#0F0;
}
.divsty {/*隐藏图片和说明*/
	display:none;
}
a:hover .divsty {
	color:#000;
	display:block;
}
</style>
</head>
<ul>
  <li><a href="#"><span>1</span>1111
    <div class="divsty"><img src="文件接收柜/03 提供给学员的上机练习素
     材/03 提供给学员的上机练习素材/练习5：彩妆热卖产品列表/图片素材/icon-1.jpg" /><br />
      彩妆热卖产品列表</div>
    </a></li>
</ul>
<body>
</body>
</html>