整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
端網(wǎng)頁的開發(fā)中總是不可避免會使用到超鏈接，但是使用超鏈接時下面都會有一條下劃線，這在網(wǎng)頁中有時會顯得很突兀，不合適也不美觀，所以我們就需要將超鏈接下的這條下劃線給去掉.接下來給大家介紹Html下超鏈接去掉下劃線的方法
您可以使用CSS的text-decoration屬性來去掉超鏈接下劃線。只需將其設(shè)置為none即可，示例代碼如下:
a{
text-decoration: none;
}
這會將頁面中所有超錐接下劃線都去，如果您只想去掉某些超鏈接的下劃線，可以為這些鏈接添加一個特定的class，并針對該CIass設(shè)置上述CSS屬性。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css超鏈接去掉下劃線示例</title>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="">大家再看我還有沒有下劃線了！</a>
</body>
</html>
可以發(fā)現(xiàn)，此時文本超鏈接下劃線是不是已經(jīng)去掉了？這個效果實現(xiàn)是不是非常簡單呢？大家主要掌握一個樣式屬性就是text-decoration: none;這個屬性。給對應(yīng)的a標簽文本添加這個屬性就可以去除文本超鏈接下劃線了。
擴展資料：
HTML 超鏈接(鏈接)的屬性：
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/span>
我們通過使用 標簽在 HTML 中創(chuàng)建鏈接。
有兩種使用 標簽的方式：
1、通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接；
2、通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽。
續(xù)創(chuàng)作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰(zhàn)」的第20天，點擊查看活動詳情
點贊 + 關(guān)注 + 收藏=學會了
在 HTML 也好，Word 也好，基本都有下劃線和刪除線（中劃線）。
Fabric.js 作為一個老牌 canvas 庫，當然也提供中劃線和下劃線的配置啦，除此之外還提供了上劃線的配置。
本文要講解的就是這3種裝飾線在 fabric.js 中的使用方法。除了初始化配置外，還支持項目運行時，讓用戶動態(tài)配置。
本文案例使用了 IText ，該組件支持編輯功能。
這是上劃線、中劃線和下劃線的文檔：
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>
<script src="../../script/fabric.5.2.1.js"></script>
<script>
const canvas=new fabric.Canvas('c')
const iText=new fabric.IText('aaa',{
styles: {
0: {
0: { overline: true }, // 上劃線
1: { linethrough: true }, // 中劃線
2: { underline: true } // 下劃線
}
}
})
canvas.add(iText)
</script>
本例只有3個字母 a ，而且都在同一行。
styles 第一個元素的 key 為 0 的意思是第一行，行號下標從0開始。
大概這個意思
styles: {
0: { // 第1行
0:, // 第1行 第1個字
1:, // 第1行 第2個字
2: // 第1行 第3個字
}
}
如果需要換行，那就要根據(jù)行號來定義了。換行的方法是文本內(nèi)容里使用 \n 做換行。
除了在初始化時可以設(shè)置裝飾線外，F(xiàn)abric.js 也提供了在運行時用戶手動設(shè)置。不過代碼會稍微復(fù)雜一點。
其實動態(tài)設(shè)置上劃線、中劃線和下劃線的操作都是一樣的，唯一要變的就是屬性名。
我以中劃線為例，之后上劃線和下劃線只需改個屬性名。
<button onclick="linethrough()">中劃線</button>
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>
<!-- 引入fabric -->
<script src="../../script/fabric.5.2.1.js"></script>
<script>
const canvas=new fabric.Canvas('c') // 初始化畫布
const iText=new fabric.IText('hello wor\nld') // 創(chuàng)建文字
canvas.add(iText)
function linethrough() {
let activeTxt=canvas.getActiveObject() // 獲取當前選中的文字
// 如果當前沒選中文字，那什么都不操作
if (!activeTxt) return
// 判斷當前是否進入編輯狀態(tài)
if (activeTxt.isEditing) {
// 編輯狀態(tài)
const state=activeTxt.getSelectionStyles().find(item=> item.linethrough !==true)
// 如果當前
if (!state || (JSON.stringify(state)==='{}' && activeTxt['linethrough']===true)) {
// 如果當前已經(jīng)設(shè)置了中劃線，那就把全局中劃線取消
activeTxt.setSelectionStyles({ 'linethrough': false })
} else {
// 如果當前沒設(shè)置中劃線，那就添加上中劃線
activeTxt.setSelectionStyles({ 'linethrough': true })
}
} else {
// 選擇狀態(tài)
if (activeTxt['linethrough']===true) {
activeTxt.linethrough=false
activeTxt.dirty=true;
let s=activeTxt.styles
for(let i in s) {
for (let j in s[i]) {
s[i][j].linethrough=false
}
}
} else {
activeTxt.linethrough=true
activeTxt.dirty=true;
let s=activeTxt.styles
for(let i in s) {
for (let j in s[i]) {
s[i][j].linethrough=true
}
}
}
}
canvas.renderAll()
}
</script>
上面的代碼主要做這幾步操作：
最主要的操作邏輯寫在 linethrough 方法里了。
linethrough 的邏輯如下
?IText 動態(tài)設(shè)置裝飾線
https://gitee.com/k21vin/fabricjs-demo/blob/master/tutorial/IText/styles04decoration.html
導(dǎo)航欄下劃線動畫在網(wǎng)頁設(shè)計中是非常常見的交互，下面將介紹幾種非常常見，非常nice的動畫特效，廢話不多說直接上演示和代碼。
css下劃線
<body>
<p>樣式1</p>
<ul id="demo1">
<li>首頁</li>
<li>產(chǎn)品</li>
<li>服務(wù)</li>
<li>關(guān)于</li>
</ul>
<p>樣式2</p>
<ul id="demo2">
<li>首頁</li>
<li>產(chǎn)品</li>
<li>服務(wù)</li>
<li>關(guān)于</li>
</ul>
<p>樣式3</p>
<ul id="demo3">
<li>首頁</li>
<li>產(chǎn)品</li>
<li>服務(wù)</li>
<li>關(guān)于</li>
</ul>
<p>樣式4</p>
<ul id="demo4">
<li>首頁</li>
<li>產(chǎn)品</li>
<li>服務(wù)</li>
<li>關(guān)于</li>
</ul>
</body>
<style type="text/css">
p{
text-align: center;
margin: 40px 0 10px 0;
}
ul{
padding: 0;
width: 400px;
height: 45px;
margin: auto;
list-style: none;
background-color: rgb(0,0,0,0.3);
display: flex;
}
li{
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/***************樣式1 *********/
#demo1 li:before{
content: '';
position: absolute;
width: 80%;
left: 10%;
bottom: 10px;
height: 5px;
background-color: coral;
opacity: 0;
}
#demo1 li:hover:before{
bottom: 0;
opacity: 1;
transition: bottom 0.3s,opacity 0.3s 0.1s;
}
/***************樣式2 *********/
#demo2 li:before{
content: '';
position: absolute;
width: 0;
left: 50%;
bottom: 0;
height: 5px;
background-color: coral;
}
#demo2 li:hover:before{
width: 80%;
left: 10%;
transition: all 0.5s;
}
/***************樣式3 *********/
#demo3 li:before{
content: '';
position: absolute;
width: 0;
left: 100%;
bottom: 0;
height: 5px;
background-color: coral;
}
#demo3 li:hover:before{
width: 80%;
left: 10%;
transition: all 0.5s;
}
#demo3 li:hover ~ li:before{
left: 0;
}
/***************樣式4 *********/
#demo4 li:before{
content: '';
position: absolute;
width: 0;
left: 0;
bottom: 0;
height: 5px;
background-color: coral;
}
#demo4 li:after{
content: '';
position: absolute;
width: 0;
right: 0;
bottom: 0;
height: 5px;
background-color: coral;
}
#demo4 li:hover:before{
width: 50%;
transition: all 0.3s ease-in-out;
}
#demo4 li:hover:after{
width: 50%;
transition: all 0.3s ease-in-out;
}
</style>如果對你有所幫助，點贊+收藏 再走
向上的路并不擁擠，而大多數(shù)人選擇了安逸
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
