CSS样式3-24编程练习
来源:3-24 编程练习
soso_crazy
2018-06-10 19:11:44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
p{height:30px;}
:link{color:orange;}
:visited{color:green;}
.suit :visited{color:green;}
.wc :visited{color:blue;}
.skin :visited{color:purple;}
:hover{color:green;font-size:20px;border:1px solid red;}
</style>
</head>
<body>
<h2>商品列表</h2>
<p class="suit">
<a href="#">衣服鞋帽</a>
</p>
<p class="wc">
<a href="#">厕所清洁</a>
</p>
<p class="skin">
<a href="#">化妆用品</a>
</p>
</body>
</html>
如何把链接的下划线去掉?代码有无地方出错?
5回答
V丶x
2018-07-25
我觉得 这样写是最好的 尽管有点麻烦 --->:
<style type="text/css">
p{height:30px;}
/*补充代码*/
*{
text-decoration:none;
}
p.suit a:link{color:orange;}
p.suit a:visited{color:green;}
p.suit a:hover{color:green;font-size:20px;border:1px solid red}
p.suit a:active{color:blue;}
p.wc a:link{color:orange;}
p.wc a:visited{color:blue;}
p.wc a:hover{color:green;font-size:20px;border:1px solid red}
p.wc a:active{color:blue;}
p.skin a:link{color:orange;}
p.skin a:visited{color:purple;}
p.skin a:hover{color:green;font-size:20px;border:1px solid red}
p.skin a:active{color:blue;}
</style>
樱桃小胖子
2018-08-05
希望可以帮到你~
栾树
2018-08-04
加一个 a{txte-decoration:none;}
RockyB
2018-08-02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
p{height:30px;}
a{color:orange;text-decoration:none;}
p a:hover{font-size:20px;color:green;font-weight:bold;}
p a:visited{color:green;}
p b:visited{color:blue;}
p c:visited{color:purple;}
div{border:1px solid red}
</style>
</head>
<body>
<div>
<h2>商品列表</h2>
<p class="suit">
<a href="a">衣服鞋帽</a>
</p>
<p class="wc">
<a href="b">厕所清洁</a>
</p>
<p class="skin">
<a href="c">化妆用品</a>
</p>
</div>
</body>
</html>
墨色染流年
2018-06-10
p{height:30px;}
/*补充代码*/
a{text-decoration:none;}
a:link{color:orange;}
p.suit a:visited{color:green;}
p.wc a:visited{color:blue;}
p.skin a:visited{color:purple;}
a:hover{color:green;font-size:20px;border:1px solid red;}
相似问题