css中a标签不显示下划线怎么设置(通过text-decoration:none样式)

灰太狼 2022-12-16 06:17 381阅读 0赞

## 前言 ##

有时候我们需要设置一些隐藏的入口，例如后台管理页面，内部人员可以轻松的从某处文字点击进入，而外部其他人没有研究网页或者不熟悉的话是不知道的。大系统来讲是不合理的，小系统来讲还挺不错的。

而a标签自带的下划线会暴露这是一个链接，设置a标签没有下划线的样式则是本文的重点。

## 解决方案 ##

设置 `style="text-decoration:none;"` ,text-decoration是文字装饰的样式，相当于不要任何的文本样式。

![在这里插入图片描述][2020101919304760.png_pic_center]

<p>
    	<a href="${request.contextPath}/admin/login">广东省电子政务协会</a>
    </p>

![在这里插入图片描述][20201019193005882.png_pic_center]

<p>
    	<a style="text-decoration:none;" href="${request.contextPath}/admin/login">广东省电子政务协会</a>
    </p>

## text-decoration可能的值 ##

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>`默认`。定义标准的文本。</td> 
  </tr> 
  <tr> 
   <td>underline</td> 
   <td>定义文本下的一条线。也就是`a标签的下划线`。</td> 
  </tr> 
  <tr> 
   <td>overline</td> 
   <td>定义文本上的一条线。</td> 
  </tr> 
  <tr> 
   <td>line-through</td> 
   <td>定义穿过文本下的一条线。</td> 
  </tr> 
  <tr> 
   <td>blink</td> 
   <td>定义闪烁的文本。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 text-decoration 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

## 其他效果 ##

*  overline，上划线  
    ![在这里插入图片描述][20201019194046172.png_pic_center]
 *  line-through，删除线  
    ![在这里插入图片描述][20201019194114147.png_pic_center]
 *  blink，闪烁，传说中只在火狐闪，但是最新版本测试发现全部都不闪了，估计也是一种不建议的效果。  
    ![在这里插入图片描述][20201019194410242.png_pic_center]

[2020101919304760.png_pic_center]: /images/20221123/08a42f8b1b884c398c9da8594e15325a.png
[20201019193005882.png_pic_center]: /images/20221123/9cb38ef769f044aabe604e1adc2b54d7.png
[20201019194046172.png_pic_center]: /images/20221123/b0bdc11f4b384dca811bc1dfc722078c.png
[20201019194114147.png_pic_center]: /images/20221123/592dfd685c6e45d8ba2fa7c5587a44bb.png
[20201019194410242.png_pic_center]: /images/20221123/43dff18d4c014bdfa44b81d537f433a9.png