带链接的icon怎么去掉下划线
<a href="#"><i class="iconfont icon-weibo" id="weibo"></i></a>
用了text-decoration：none没有效果
124
收起
正在回答
6回答
你好，1、如下，a缺少闭合标签，建议：认真检查下，补充完整哦。
2、如下图，text-decoration: none;属性是设置给了.iconfont元素，结合html结构，发现.iconfont是i，这里是要把text-decoration: none;属性设置给a，检查下代码，对于修改下哦。
祝学习愉快~
hunmix
2017-12-20 15:30:16
<!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;
}
我希望的效果下面出现的文字是一行的，但是他却换行了，不知道是上面inline-block的原因么？可以下面写了display：block了呀，而且absolute定位不是应该脱离文档流的吗？希望老师能给我解惑，麻烦了~
hunmix
2017-12-19 21:05:03
<!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();
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星