how2j.cn


工具版本兼容问题
超链状态有4种
link - 初始状态,从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去,但是尚未弹起的时候

示例 1 : 超链状态   
示例 2 : 去除超链的下划线   
示例 3 : 练习-下拉菜单风格   
示例 4 : 答案-下拉菜单风格   

示例 1 :

超链状态

伪类,所谓的伪类即被选中的元素处于某种状态的时候
超链状态有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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

去除超链的下划线

默认状态下,超链是有下划线的,但是现在网站上的超链普遍采用无下划线风格。

使用 text-decoration: none 文本修饰的样式来解决
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

练习-下拉菜单风格

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

答案-下拉菜单风格

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-02-02 用table形式为什么不会充满
jamin



请问我用table表格形式, display:block不会充满整个tr td
table{
	width:80px;
	border:1px solid black;
	border-collapse: collapse;
}
a{
	display:block;
	font-size:14px;
	font-family:宋体;
	color: #888;
	text-decoration: none;
}

table.hero a:hover{
	background-color: red;
}
</style>

<table class="hero" >
	<tr>
	<td><a href="#nowhere">盖伦</a><td>
	</tr>
	<tr>
	<td><a href="#nowhere">提莫</a><td>
	</tr>
	<tr>
	<td><a href="#nowhere">安妮</a><td>
	</tr>
	<tr>
	<td><a href="#nowhere">死哥</a><td>
	</tr>
</table>

							


2 个答案

LagSeeing 答案时间:2018-03-16
用浏览器的审查元素帮你看了下 你后面td的结束标签写错了</td> 浏览器自动又补了个空<td></td> 所有右边有距离 但是改了以后还是有一点点距离 不知道为啥 我今天才学,lz如果懂了记得回复我

Lin88_yang 答案时间:2018-03-09
大兄弟感觉你对这道题有什么误解呀




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-11-03 lol里的死亡兄弟
阿五
原来上一个练习的Deadbrother是死歌啊,我一直在想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 我要是添加不同的数据信息,会产生不一样的结果




提问之前请登陆
关于 前端基础-CSS-超链状态 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图