体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

带链接的icon怎么去掉下划线

来源：5-1 主菜单添加自定义属性

hunmix

2017-12-18 04:51:39

<a href="#"><i class="iconfont icon-weibo" id="weibo"></i></a>

http://img.mukewang.com/climg/5a36d8cb0001f1e500490050.jpg

用了text-decoration：none没有效果

写回答

6回答

好帮手慕糖

2017-12-20

已采纳

你好，1、如下，a缺少闭合标签，建议：认真检查下，补充完整哦。

http://img.mukewang.com/climg/5a39bad40001a83a10580177.jpg

2、如下图，text-decoration: none;属性是设置给了.iconfont元素，结合html结构，发现.iconfont是i，这里是要把text-decoration: none;属性设置给a，检查下代码，对于修改下哦。

http://img.mukewang.com/climg/5a39be550001dfad03370191.jpg

祝学习愉快~

0
hunmix
h 非常感谢~确实是这个问题~但是还发现个问题自己弄不懂，我放在回复请老师看一下
h017-12-20
共1条回复

好帮手慕糖

2017-12-21

你好，设置绝对定位，会导致脱离文档流，无法撑开父级的宽度。所以父级的宽度是有这个p的兄弟元素（即a）撑开的，这个a撑开的宽度呢，无法存放整个的p（字体过长），这里可以自己测试下。建议：这里可以尝试个父级设置个固定的宽试一下。

祝学习愉快~

1
hunmix
h 明白了~非常感谢
h017-12-21
共1条回复

好帮手慕糖

2017-12-20

你好，这里把绝对定位去掉就可以了。

祝学习愉快~

1
hunmix
h 去掉绝对定位hover时会使icon元素上移QAQ，以及为什么绝对定位会使文字换行呢~
h017-12-21
共1条回复

hunmix

提问者

2017-12-20

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<!-- 本地导入icon -->
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<!-- 在线导入icon -->
<!-- <link rel="stylesheet" href="http://at.alicdn.com/t/font_511554_wqeoo0fxkw0o1or.css"> -->
<link rel="stylesheet" href="css/toDoList.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<div class="toDoBox">
<div class="top_box"><span>To Do:</span><i class="iconfont icon-menu"></i></div>
<div class="list_box">
<ul id="ul">
<li><i class="iconfont icon-gou"></i>
<span>吃个早饭</span>
<i class="iconfont icon-cross"></i>
</li>
<li>
<i class="iconfont icon-gou"></i>
<span>吃个中饭</span>
<i class="iconfont icon-cross"></i>
</li>
<li>
<i class="iconfont icon-gou"></i>
<span>吃个晚饭</span>
<i class="iconfont icon-cross"></i>
</li>
</ul>
</div>
</div>
<button class="btn change" id="add">添加待办事项</button>
<button class="btn delete" id="delete">删除待办事项</button>
<div class="link" id="link">
<div class="icon_link">
<a href="http://wpa.qq.com/msgrd?v=3&uin=1012280384&site=qq&menu=yes">
<i class="iconfont icon-qq" id="qq"></i>
</a>
<p>点击进行聊天</p>
</div>
<div class="icon_link">
<a href="https://weibo.com/u/5262706347">
<i class="iconfont icon-weibo" id="weibo"></i>
</a>
<p>点击跳转</p>
</div>
<div class="icon_link">
<a href="#">
<i class="iconfont icon-weixin" id="weixin"></i>
</a>
<p>点击没卵用</p>
</div>
<div class="icon_link">
<a href="https://github.com/hunmix">
<i class="iconfont icon-github" id="github"></i>
</a>
<p>点击跳转</p>
</div>
</div>
<script language="JavaScript" src="js/toDoList.js"></script>
</body>
</html>
*{
	padding:0;
	margin:0;
	list-style-type: none;
}
body{
	background-color: #e7ad99;
}
.toDoBox{
	color: #5d6b6c;
	width:250px;
	margin:50px auto 0 auto;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 3px #000;
	padding:0 4px 4px 4px;
}
.top_box{
	height: 70px;
	width: 250px;
	line-height: 70px;
	padding:0 0 0 12px;
}
.top_box span{
	display: inline-block;
	width: 203px;
}
.top_box .icon-menu{
	cursor: pointer;
}
.list_box{
	border: 1px #4c4c4c solid;
}
.list_box ul{
	border: 1px #c0c0c0 solid;
	padding:0 10px;
}
.list_box ul li{
	height: 58px;
	line-height: 58px;
	border-bottom: 1px #ccc solid;
	padding:0 20px;
	position: relative;
	cursor: pointer;
}
.list_box ul li span{
	position: absolute;
	left: 80px;
}
.list_box ul li .icon-gou{
	display: none;
}
.list_box ul li .icon-cross{
	display: none;
	position: absolute;
	right: 10px;
	color: #f00;
	font-weight: bold;
	cursor: pointer;
}
.list_box ul li .icon-cross:hover{
	font-size: 20px;
}
.through{
	text-decoration: line-through;
	color: #111;
}
.btn{
	border:none;
	line-height: 30px;
	border-radius: 3px;
	margin:20px auto 0 auto;
	display: block;
	width: 258px;
	font-size: 15px;
	color: #333;
	color:#fff;
}
.delete:hover{
	background-color: #c9302c;
}
.change:hover{
	background-color: #31b0d5;
}
.change{
	background: #5bc0de;
	border:1px #46b8da solid;
}
.delete{
	background:#d9534f;
	border:1px #d43f3a solid;
}
.link{
	width: 250px;
	margin:10px auto 0 auto;
	text-align: center;
}
.link .icon_link{
	position: relative;
	display: inline-block;
}
.link .icon_link a{
	text-decoration: none;
}
.link .icon_link p{
	display: none;
	position: absolute;
	top: 40px;
	font-size: 12px;
	color: #eee;
}
.link .icon_link .iconfont{
	font-size: 35px;
	color: #444;
	margin-left: 10px;
	cursor: pointer;
}
.link .icon_link:hover p{
	color: #fff;
	display: block;
}

http://img.mukewang.com/climg/5a3a112500013d6d03370112.jpg

http://img.mukewang.com/climg/5a3a11250001421303610404.jpg

我希望的效果下面出现的文字是一行的，但是他却换行了，不知道是上面inline-block的原因么？可以下面写了display：block了呀，而且absolute定位不是应该脱离文档流的吗？希望老师能给我解惑，麻烦了~

0

hunmix

提问者

2017-12-19

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<!-- 本地导入icon -->
<!-- <link rel="stylesheet" type="text/css" href="font/iconfont.css"> -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_511554_8n623rduamrt3xr.css">
<link rel="stylesheet" href="css/toDoList.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<div class="toDoBox">
<div class="top_box"><span>To Do:</span><i class="iconfont icon-menu"></i></div>
<div class="list_box">
<ul id="ul">
<li><i class="iconfont icon-gou"></i><span>吃个早饭</span></li>
<li><i class="iconfont icon-gou"></i><span>吃个中饭</span></li>
<li><i class="iconfont icon-gou"></i><span>吃个晚饭</span></li>
<li><i class="iconfont icon-gou"></i><span>该睡觉了</span></li>
</ul>
</div>
</div>
<button class="btn" id="btn">换个地方玩</button>
<div class="link" id="link">
<a href="#"><i class="iconfont icon-qq" id="qq"></i><p class="hide">点击进行聊天</p></i>
<i class="iconfont icon-weibo" id="weibo"><p class="hide">点击跳转</p></i>
<i class="iconfont icon-weixin" id="weixin"><p class="hide">点击没卵用</p></i>
<i class="iconfont icon-github" id="github"><p class="hide">点击跳转</p></i>
</div>
<script language="JavaScript" src="js/toDoList.js"></script>
</body>
</html>
*{
	padding:0;
	margin:0;
	list-style-type: none;
}
body{
	background-color: #e7ad99;
}
.toDoBox{
	color: #5d6b6c;
	width:250px;
	margin:50px auto 0 auto;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 3px #000;
	padding:0 4px 4px 4px;
}
.top_box{
	height: 70px;
	width: 250px;
	line-height: 70px;
	padding:0 0 0 12px;
}
.top_box span{
	display: inline-block;
	width: 203px;
}
.top_box .icon-menu{
	cursor: pointer;
}
.list_box{
	border: 1px #4c4c4c solid;
}
.list_box ul{
	border: 1px #c0c0c0 solid;
	padding:0 10px;
}
.list_box ul li{
	height: 58px;
	line-height: 58px;
	border-bottom: 1px #ccc solid;
	padding:0 20px;
	position: relative;
	cursor: pointer;
}
.list_box ul li span{
	position: absolute;
	left: 80px;
}
.list_box ul li .icon-gou{
	display: none;
}
.through{
	text-decoration: line-through;
	color: #111;
}
.btn{
	border:none;
	background:#fff;
	font-weight: bold;
	line-height: 30px;
	border-radius: 3px;
	box-shadow: 0px 0px 4px #000;
	margin:20px auto 0 auto;
	display: block;
	width: 258px;
	font-size: 15px;
	color: #333;
}
.btn:hover{
	background-color: #eee;
}
.link{
	width: 250px;
	margin:10px auto 0 auto;
	text-align: center;
	position: relative;
}
.link .iconfont{
	font-size: 35px;
	color: #444;
	margin-left: 10px;
	cursor: pointer;
	text-decoration: none;
}
#qq p{
	left:20px;
}
#weibo p{
	left: 80px;
}
#weixin p{
	left: 125px;
}
#github p{
	left: 180px;
}
.link .iconfont:hover{
	color: #fff;
}
p{
	position: absolute;
	top: 38px;
	font-size: 12px;
	color: #eee;
}
.hide{
	display: none;
}
.show{
	display: block;
}
var items=document.getElementsByClassName("icon-gou"),
	li=document.getElementsByTagName("li"),
	span=document.getElementById("ul").getElementsByTagName("span"),
	btn=document.getElementById("btn"),
	qq=document.getElementById("qq"),
	weixin=document.getElementById("weixin"),
	weibo=document.getElementById("weibo"),
	github=document.getElementById("github"),
	icon=document.getElementById("link").getElementsByClassName("iconfont"),
	p=document.getElementsByTagName("p");
	index=0;
for(var i=0;i<li.length;i++){
	//给li添加类
	li[i].setAttribute("num",i);
	//给li设置标记为true
	li[i].setAttribute("mark","true");
	li[i].onclick=function(){
		if(this.getAttribute("mark")=="true"){
			//设置当前li的span类
			span[this.getAttribute("num")].className="through";
			//设置当前li的icon是否显示
			items[this.getAttribute("num")].style.display="inline-block";
			//li的标记设置为false
			this.setAttribute("mark","false");
		}else{
			span[this.getAttribute("num")].className="";
			items[this.getAttribute("num")].style.display="none";
			this.setAttribute("mark","true");
		}
	}
}
//btn
btn.onclick=function(){
	window.location.href="../慕课轮播图（div结构菜单）/index.html";
}

//icon link
qq.onclick=function(){
	window.open("http://wpa.qq.com/msgrd?v=3&uin=1012280384&site=qq&menu=yes");
}
weibo.onclick=function(){
	window.location.href="https://weibo.com/u/5262706347";
}
github.onclick=function(){
	window.location.href="https://github.com/hunmix";
}
//图标提示
function tip(){
	for(var j=0;j<icon.length;j++){
		icon[j].setAttribute("num2",j);
		//绑定鼠标移入事件
		icon[j].onmouseover=function(){
			p[this.getAttribute("num2")].className="show";
		}
		//绑定鼠标移出事件
		icon[j].onmouseout=function(){
			for(var a=0;a<icon.length;a++){
				p[a].className="hide";
			}
		}
	}
}
tip();

http://img.mukewang.com/climg/5a390e7c0001a70a04010464.jpg

0

好帮手慕糖

2017-12-18

你好，text-decoration后面的冒号是在中文状态下输入的，这里应该是英文状态下哦，若不是这个问题，建议：把整体的代码粘贴过来。

祝学习愉快~

0
hunmix
h 代码我发到回复了~麻烦看一下~
h017-12-19
共1条回复

0 学习 · 36712 问题

查看课程

相似问题

6-2作业的疑问

回答 2

当点击切换页的选项上时，为什么不出现该选项的对应图片，除非连击三下？

回答 1

定位到span标签是class是active的，不能直接.active定位到这个标签吗

回答 5

老师，按钮下一张，上一张无法切换图？还有子菜单背景不显示？怎么回事啊？

回答 2

图片太小看不清呀，标题栏上面是虚线么？为什么看静态图片的时候是实现，GIF 图却是虚线呢？

回答 1

打开慕课网App查看更多内容