整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
起html的錨點(diǎn)這個(gè)概念，你可能會(huì)感到會(huì)陌生，感覺自己沒有聽過(guò)。但是如果說(shuō)起它的作用，你可能就恍然大悟了，就像你說(shuō)起一個(gè)演員，可能不知道是誰(shuí)，但是說(shuō)起它演的一個(gè)角色可能立馬就知道那個(gè)人是誰(shuí)了。
那么，什么是錨點(diǎn)呢？
錨點(diǎn)存在于html中，在默認(rèn)情況下，可以快速的定位到指定元素，并將元素置于頁(yè)面最頂端。當(dāng)然我們可以按照自己的需求來(lái)確定錨點(diǎn)的位置，不一定要讓其定位在頂部。現(xiàn)如今有無(wú)數(shù)多的頁(yè)面已經(jīng)用上了錨點(diǎn)，比如Vue.js的官網(wǎng)，在我們點(diǎn)擊標(biāo)題“Vue.js是什么”和標(biāo)題“起步”的時(shí)候，標(biāo)題都會(huì)自動(dòng)移到頁(yè)面頂端。
錨點(diǎn)的使用
那接下來(lái)，我們就來(lái)看看幾種錨點(diǎn)的使用方法。
id定位
最基本的使用方法如下，當(dāng)點(diǎn)擊<a>標(biāo)簽時(shí)，頁(yè)面會(huì)相應(yīng)的將該div內(nèi)容置頂
錨點(diǎn)的id定位方法
name定位
除了id，還可以通過(guò)name進(jìn)行定位，不過(guò)需要主要的是，如果采用name屬性進(jìn)行定位的話，只適用于a標(biāo)簽，類似于p標(biāo)簽等都不支持。
錨點(diǎn)的name定位方法
javascript代碼進(jìn)行定位
在原生的javascript中，有一個(gè)scrollIntoView()方法，可以實(shí)現(xiàn)頁(yè)面的錨點(diǎn)
javascript方法實(shí)現(xiàn)錨點(diǎn)
一個(gè)綜合的例子
講了三種實(shí)現(xiàn)方法后，接下來(lái)看一個(gè)實(shí)際運(yùn)用的例子。首先是實(shí)際效果圖，在點(diǎn)擊左側(cè)欄時(shí)，頁(yè)面右邊會(huì)相應(yīng)的顯示指定段落的內(nèi)容
錨點(diǎn)的實(shí)際使用
首先看下html頁(yè)面的內(nèi)容，左側(cè)的ul代碼
左側(cè)的ul代碼
右側(cè)的內(nèi)容部分代碼
右側(cè)內(nèi)容部分代碼
css部分的代碼
css部分的代碼
將上述的代碼寫在一個(gè)html文件中，便可實(shí)現(xiàn)左側(cè)欄點(diǎn)擊，右側(cè)欄顯示相應(yīng)內(nèi)容的效果。
特殊情況
在實(shí)際項(xiàng)目中，我們總會(huì)遇到這樣一種情況，在頁(yè)面頂部有固定頭內(nèi)容的時(shí)候，如果直接使用上述方法，會(huì)得不到想要的效果
直接使用錨點(diǎn)的效果圖
通過(guò)該圖可以看出，第三段內(nèi)容的標(biāo)題被遮住了，實(shí)際應(yīng)該往下再顯示一點(diǎn)
那么，我們?cè)撛趺唇鉀Q這個(gè)問(wèn)題呢？在這里我想到了兩種方法，第一種是在每個(gè)內(nèi)容div上加一個(gè)隱藏的p元素，給p元素一個(gè)定高，再向上偏移，這種方法會(huì)導(dǎo)致頁(yè)面出現(xiàn)很多個(gè)多余的p元素，不推薦使用。
第二種是利用偽元素，偽元素可以占用實(shí)際的高度，這是推薦使用的方法
偽元素的樣式
通過(guò)給h3標(biāo)簽添加偽元素樣式，可完美解決這個(gè)問(wèn)題，效果圖如下
使用偽元素后的效果圖
總結(jié)
今天的內(nèi)容你會(huì)了么？如果還沒有掌握的話，可以按照文章中的代碼，進(jìn)行實(shí)踐，代碼總是要多敲才更容易理解。
如果喜歡的話，記得關(guān)注小編噢，小編后續(xù)會(huì)堅(jiān)持出更多技術(shù)性的文章，如果有任何問(wèn)題，也歡迎提問(wèn)，小編都會(huì)盡力解答的。
友問(wèn)：站長(zhǎng)在線的站內(nèi)文件夾跳轉(zhuǎn)的代碼是什么？
站長(zhǎng)在線答：站內(nèi)文件夾跳轉(zhuǎn)的代碼就是一個(gè)301跳轉(zhuǎn)代碼，此代碼放在自己自定義的文件夾內(nèi)，直接宣傳自定義的地址，更加有品牌感，即宣傳了自己的品牌，也宣傳了業(yè)務(wù)對(duì)象，如：
阿里云優(yōu)惠購(gòu)買業(yè)務(wù)：olzz.com/aliyun
騰訊云優(yōu)惠購(gòu)買業(yè)務(wù)：olzz.com/txy
站長(zhǎng)在線的頭條地址：olzz.com/toutiao
……
301跳轉(zhuǎn)代碼
以此類推，自己可以建立無(wú)數(shù)個(gè)二級(jí)目錄的推廣地址，自己的品牌域名和業(yè)務(wù)對(duì)象一起宣傳，這是站長(zhǎng)可以利用的特殊權(quán)益。站長(zhǎng)在線就告訴大家301跳轉(zhuǎn)代碼和操作方法：
1、新建一個(gè)txt文本文檔，把下面的代碼復(fù)制進(jìn)去保存，然后重命名為index.html
<script>
function GetRandomNum(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
var num = GetRandomNum(1,14808);
location.href = "鏈接地址";
</script> ")2、在網(wǎng)頁(yè)空間里面新建一個(gè)文件夾如aliyun，然后把剛才制作的index.html上傳到這個(gè)文件夾里面即可。
PS：鏈接地址一定是http或者h(yuǎn)ttps開頭的地址哦！
好了，站內(nèi)文件夾跳轉(zhuǎn)的代碼就已經(jīng)告訴你了，趕快去實(shí)踐吧！歡迎來(lái)到站長(zhǎng)在線官方頭條號(hào)【站長(zhǎng)快遞】，學(xué)習(xí)更多的建站知識(shí)。
接上代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,maximum-scale=1,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta http-equiv="refresh" content="0;url=static/ck600mgr/pages/index.html">
<title></title>
</head>
<body>
</body>
</html>301是永久重定向，常用的場(chǎng)景是使用域名跳轉(zhuǎn)。
比如，我們?cè)L問(wèn) http://www.zhihu.com 會(huì)跳轉(zhuǎn)到 https://www.zhihu.com，發(fā)送請(qǐng)求之后，就會(huì)返回301狀態(tài)碼，然后返回一個(gè)location，提示新的地址，瀏覽器就會(huì)拿著這個(gè)新的地址去訪問(wèn)。
301.png
302是臨時(shí)重定向，用來(lái)做臨時(shí)跳轉(zhuǎn)。接著上面的例子，重定向到 https://www.zhihu.com 的請(qǐng)求又會(huì)通過(guò)302重定向到 https://www.zhihu.com/signup?next=%2F
302.png
不過(guò)，看上去301和302都是代表重定向的意思。那具體有啥區(qū)別呢？
http 1.0規(guī)范中有2個(gè)重定向——301和302，在http 1.1規(guī)范中存在4個(gè)重定向——301、302、303和307。
其中301在http 1.0以及http 1.1中都表示永久重定向，就不討論了。
那302呢？
在http1.0中，302的規(guī)范是這樣的：
原請(qǐng)求是post，則不能自動(dòng)進(jìn)行重定向；原請(qǐng)求是get，可以自動(dòng)重定向。
但是瀏覽器和服務(wù)器的實(shí)現(xiàn)并沒有嚴(yán)格遵守HTTP中302的規(guī)范，服務(wù)器不加遵守的返回302，瀏覽器即便原請(qǐng)求是post也會(huì)自動(dòng)重定向，導(dǎo)致規(guī)范和實(shí)現(xiàn)出現(xiàn)了二義性。
所以HTTP 1.1中將302的規(guī)范細(xì)化成了303和307
繼承了HTTP 1.0中302的實(shí)現(xiàn)（即原請(qǐng)求是post，也允許自動(dòng)進(jìn)行重定向，結(jié)果是無(wú)論原請(qǐng)求是get還是post，都可以自動(dòng)進(jìn)行重定向）。
307則繼承了HTTP 1.0中302的規(guī)范（即如果原請(qǐng)求是post，則不允許進(jìn)行自動(dòng)重定向，結(jié)果是post不重定向，get可以自動(dòng)重定向）。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
