示例 2 : 去除超链的下划线 示例 3 : 练习-下拉菜单风格 示例 4 : 答案-下拉菜单风格
伪类,所谓的伪类即被选中的元素处于某种状态的时候
超链状态有4种 link - 初始状态,从未被访问过 visited - 已访问过 hover - 鼠标悬停于超链的上方 active - 鼠标左键点击下去,但是尚未弹起的时候 <style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
<a href="http://www.12306.com">超链的不同状态</a>
<style> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> <a href="http://www.12306.com">超链的不同状态</a>
<style>
a.no_underline {text-decoration: none}
</style>
<a href="http://www.12306.com">默认的超链</a>
<br>
<a class="no_underline" href="http://www.12306.com">去除了下划线的超链</a>
<style> a.no_underline {text-decoration: none} </style> <a href="http://www.12306.com">默认的超链</a> <br> <a class="no_underline" href="http://www.12306.com">去除了下划线的超链</a>
<style>
a{
font-size:14px;
color: CornflowerBlue;
text-decoration: none;
}
div.menu {
width:80px;
border: 1px solid lightgray;
margin-top:15px;
position: absolute;
left: 80px;
top: 20px;
}
div.menu a{
display:block;
font-size:14px;
font-family:宋体;
color: #888;
text-decoration: none;
padding:10 0 10 15;
}
div.menu a:hover
{
background-color: #f1f1f1;
}
</style>
<a href="#nowhere"> 武器 </a>
<a href="#nowhere"> 护甲 </a>
<a href="#nowhere"> 英雄 </a>
<div class="menu">
<a href="#nowhere"> 盖伦 </a>
<a href="#nowhere"> 提莫 </a>
<a href="#nowhere"> 安妮 </a>
<a href="#nowhere"> 死哥 </a>
</div>
<div style="height:200px"></div>
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
<style>
a{
font-size:14px;
color: CornflowerBlue;
text-decoration: none;
}
div.menu {
width:80px;
border: 1px solid lightgray;
margin-top:15px;
position: absolute;
left: 80px;
top: 20px;
}
div.menu a{
display:block;
font-size:14px;
font-family:宋体;
color: #888;
text-decoration: none;
padding:10 0 10 15;
}
div.menu a:hover
{
background-color: #f1f1f1;
}
</style>
<a href="#nowhere"> 武器 </a>
<a href="#nowhere"> 护甲 </a>
<a href="#nowhere"> 英雄 </a>
<div class="menu">
<a href="#nowhere"> 盖伦 </a>
<a href="#nowhere"> 提莫 </a>
<a href="#nowhere"> 安妮 </a>
<a href="#nowhere"> 死哥 </a>
</div>
<div style="height:200px"></div>
HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。
![]()
问答区域
2019-11-06
去除超链接的下划线怎么弄成一个类,随时调用呢?
2019-09-23
站长的最后一行代码删了也正常显示,莫非也是浏览器太强大的原因?
2019-09-05
一个小问题
2019-08-20
练习3:下拉风格菜单答案
2019-07-17
ZZ交作业 CSS超链接
2019-07-11
下拉菜单风格
2019-06-07
写作业
2019-03-22
交作业
2019-02-26
div.menu a:hover { background-color: #f1f1f1; } 站长的这个就是产生浮动效果的嘛 这个效果之前的知识好像没有教过是在后面嘛
2019-01-24
关于那句display:block
2019-01-23
交作业,给大家提供一个思路
2019-01-21
交作业(╥╯^╰╥)
2019-01-08
www.12306.com是广告吗!!!!
2018-11-22
交练习作业
2018-11-14
交作业
2018-11-01
做出来的框很奇怪
2018-07-28
看到下拉菜单感觉有点奇怪
2018-07-07
visited感觉没用呢?
2018-05-16
用的table写的,感觉这个方法不简便。没有站长写的简便
2018-02-02
用table形式为什么不会充满
2017-11-03
lol里的死亡兄弟
2017-09-21
这是个锤子的下拉风格。。。
2017-09-06
优先级
2017-08-28
</div> <div style="height:200px"></div>
2017-07-24
我没有采用答案里面的定位,而是采用外边距的方式,老板帮看看可以吗?
2017-07-20
为什么我的padding要有px才不会报错?
2017-04-19
top和left有什么作用。
2017-04-07
下拉菜单div.menu a中的display:block的作用是什么,它的属性是显示,可是这里它的作用是什么?
2016-11-11
我要是添加不同的数据信息,会产生不一样的结果
提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
|