|
|
|
|
示例 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>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
Or
姿势不对,事倍功半!
