a標簽
語法結(jié)構(gòu)
<a href="鏈接" target="_blank">文字描述</a>
注意事項
- 鏈接分為本地鏈接和網(wǎng)頁鏈接，其中網(wǎng)頁鏈接要寫全盗温，例如
https://www.baidu.com熔酷，本地鏈接分為相對路徑和絕對路徑。 - target有四個屬性当娱，_blank吃既，_self,_parent,_top,其中常用的是_blank,_self 。默認打開方式是_self.意思是在本窗口打開趾访。_blank是在新窗口打開态秧。
<html>
<body>
<a target="_self">默認打開方式：本頁面打開</a>
<a target="_blank">打開方式：新窗口打開</a>
</body>
</html>
錨點
語法結(jié)構(gòu)
<a href="#d1">描述</a>
其中#d1為id名
實現(xiàn)回到頂部的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1{
height: 800px;
background-color: aquamarine;
}
#d2{
height: 800px;
background-color: red;
}
#d3{
height: 800px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<a href="#d1">d1</a>
</body>
</html>
偽類
CSS 偽類用于向某些選擇器添加特殊的效果。
語法結(jié)構(gòu)
選擇器:偽類 {
declaration1;
declaration2;
…
}
偽類總結(jié)
- link偽類扼鞋，用于向未被訪問的鏈接添加樣式
<html>
<head>
<meta charset="UTF-8">
<style>
a:link{
color:red;
}
</style>
</head>
<body>
<a href="www.baidu.com" target="_blank">點我</a>
</body>
</html>
- visited偽類申鱼，用于向訪問過的鏈接添加樣式
- hover偽類，用于向鼠標懸停時添加樣式
- active偽類云头，用于向點擊時的鏈接添加樣式
其中hover非常重要
hover偽類
hover
hover 原本是a標簽中的一個偽類捐友，由于其特殊的性質(zhì)，鼠標懸停觸發(fā)
溃槐，我們可以使用其進行一系列特效的設(shè)置匣砖，標簽使用 hover ，只能觸發(fā)自身以及后代的效果。
示例
題目：點擊盒子的時候改變盒子顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div{
width:200px;
height:200px;
background-color:red;
}
div:hover{
background-color:green;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
重要的屬性
| 屬性 | 說明 | 注意 |
|---|---|---|
| transition: 0.7s | 當(dāng)css屬性值發(fā)生改變時讓改變以規(guī)定的時間執(zhí)行單位 s | 必須給顯示該效果的盒子設(shè)置 |
| text-decoration: underline | 裝飾線 | 參考文字設(shè)置 |
| border-radius: 25px | 用于設(shè)置圓角 | 四個參數(shù)的時候就是左上猴鲫、右上对人、右下、左下的圓角像素值 |
小練習(xí)
-
制作一個鼠標觸動后變化的狀態(tài)條
[圖片上傳失敗...(image-dc4d55-1660224735416)]
進度條.gif
