CSS链接、列表、伪类

CSS列表

   <ul>

<li><a href="default.asp">Home</a></li>

<li><a href="news.asp">News</a></li>

<li><a href="contact.asp">Contact</a></li>

<li><a href="about.asp">About</a></li>

</ul>

加个样式ul {list-style-type : square}或者li {list-style-type : square}

ul {list-style-type : square}

ul li {list-style-image : url(red.png)}

以上三个合并

为简单起见,可以将以上 个列表样式属性合并为一个方便的属性:list-style,就像这样:

li {list-style : url(example.gif) square inside}

2、CSS链接

<!DOCTYPE html>

<html>

<head>

<style>

a:link {background-color:#B2FF99;}    /* 未被访问的链接 */

a:visited {background-color:#FFFF85;} /* 已被访问的链接 */

a:hover {background-color:#FF704D;}   /* 鼠标指针移动到链接上 */

a:active {background-color:#FF704D;}  /* 正在被点击的链接 */

</style>

</head>

<body>

<p><b><a href="/index.html" target="_blank">W3School</a></b></p>

<p><b><a href="http://wwf.panda.org/" target="_blank">WWF</a></b></p>

<p><b>注释:</b>为了使定义生效,a:hover 必须位于 a:link 和 a:visited 之后!!</p>

<p><b>注释:</b>为了使定义生效,a:active 必须位于 a:hover 之后!!</p>

</body>

</html>

Linkvisited或者hover可以不写,但是如果写一定是上面的顺序

text-decoration 属性大多用于去掉链接中的下划线:

实例

a:link {text-decoration:none;}

a:visited {text-decoration:none;}   已经被访问过的

未访问的全部没有下划线(严格是鼠标未触摸的都没下划线)

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}

3伪类  ,目前不掌握

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值