html <a>去掉下划线

本文探讨了CSS中如何通过设置text-decoration属性来影响网页元素的显示效果,特别是访问后下划线的变化,深入解析了正常显示与访问状态的区别。

//所有情况都没有下划线

a { text-decoration: none;}

//在正常显示下没有,但访问后会出现

a:link{ text-decoration: none;}

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>家用电器分类</title> <link href="css/type.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="type"> <h2 id="title">家用电器</h2> <ul> <li> <h3 class="secondTitle"> <a href="#">大家电</a> </h3> <p><a href="#">平板电视</a>  <a href="#">洗衣机</a>  <a href="#">冰箱</a><br/> <span>  </span><a href="#">空调</a>  <a href="#">烟机/灶具</a>  <a href="#">热水器</a><br/> <span>  </span><a href="#">冷柜/酒柜</a>  <a href="#">消毒柜</a>  <a href="#">家庭影院</a> </p> </li> <li> <h3 class="secondTitle"><a href="#">生活电器</a></h3> <p><a href="#">电风扇</a>  <a href="#">净化器</a>  <a href="#">吸尘器</a><br/> <span>  </span><a href="#">净水设备</a>  <a href="#">挂烫机</a>  <a href="#">电话机</a> </p> </li> <li> <h3 class="secondTitle"><a href="#">厨房电器</a></h3> <p><a href="#">榨汁机</a>  <a href="#">电压力锅</a>  <a href="#">电饭煲</a><br/> <span>  </span><a href="#">豆浆机</a>  <a href="#">微波炉</a>  <a href="#">电磁炉</a> </p> </li> <li><h3 class="secondTitle"><a href="#">五金家装</a></h3> <p><a href="#">淋浴/水槽</a>  <a href="#">电动工具</a>  <a href="#">手动工具</a><br/> <span>  </span><a href="#">仪器仪表</a>  <a href="#">浴霸/排气</a>  <a href="#">灯具</a> </p></li> </ul> </div> </body> </html> #title{ color: white; /*background-image: radial-gradient(at top,#d2e9f8,#cee7f9);*/ background-image: radial-gradient(at top,#106eb1,#72b0dc); width: 50%; } .secondTitle a{ text-decoration: none; }为什么下划线没有去掉
最新发布
10-23
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值