起html的錨點這個概念,你可能會感到會陌生,感覺自己沒有聽過。但是如果說起它的作用,你可能就恍然大悟了,就像你說起一個演員,可能不知道是誰,但是說起它演的一個角色可能立馬就知道那個人是誰了。
那么,什么是錨點呢?
錨點存在于html中,在默認情況下,可以快速的定位到指定元素,并將元素置于頁面最頂端。當然我們可以按照自己的需求來確定錨點的位置,不一定要讓其定位在頂部。現如今有無數多的頁面已經用上了錨點,比如Vue.js的官網,在我們點擊標題“Vue.js是什么”和標題“起步”的時候,標題都會自動移到頁面頂端。
錨點的使用
那接下來,我們就來看看幾種錨點的使用方法。
id定位
最基本的使用方法如下,當點擊<a>標簽時,頁面會相應的將該div內容置頂
錨點的id定位方法
name定位
除了id,還可以通過name進行定位,不過需要主要的是,如果采用name屬性進行定位的話,只適用于a標簽,類似于p標簽等都不支持。
錨點的name定位方法
javascript代碼進行定位
在原生的javascript中,有一個scrollIntoView()方法,可以實現頁面的錨點
javascript方法實現錨點
一個綜合的例子
講了三種實現方法后,接下來看一個實際運用的例子。首先是實際效果圖,在點擊左側欄時,頁面右邊會相應的顯示指定段落的內容
錨點的實際使用
首先看下html頁面的內容,左側的ul代碼
左側的ul代碼
右側的內容部分代碼
右側內容部分代碼
css部分的代碼
css部分的代碼
將上述的代碼寫在一個html文件中,便可實現左側欄點擊,右側欄顯示相應內容的效果。
特殊情況
在實際項目中,我們總會遇到這樣一種情況,在頁面頂部有固定頭內容的時候,如果直接使用上述方法,會得不到想要的效果
直接使用錨點的效果圖
通過該圖可以看出,第三段內容的標題被遮住了,實際應該往下再顯示一點
那么,我們該怎么解決這個問題呢?在這里我想到了兩種方法,第一種是在每個內容div上加一個隱藏的p元素,給p元素一個定高,再向上偏移,這種方法會導致頁面出現很多個多余的p元素,不推薦使用。
第二種是利用偽元素,偽元素可以占用實際的高度,這是推薦使用的方法
偽元素的樣式
通過給h3標簽添加偽元素樣式,可完美解決這個問題,效果圖如下
使用偽元素后的效果圖
總結
今天的內容你會了么?如果還沒有掌握的話,可以按照文章中的代碼,進行實踐,代碼總是要多敲才更容易理解。
如果喜歡的話,記得關注小編噢,小編后續會堅持出更多技術性的文章,如果有任何問題,也歡迎提問,小編都會盡力解答的。
部分主要涉及兩個內容:置頂和列表分類。
1. 置頂
一般的論壇都會有帖子置頂功能。現在我們在通知類列表中增加置頂功能。
要求置頂在最上,其他按照發布時間降序排列。因此修改表,增加一個sort字段,表示排序,0表示置頂
2. 排序
修改controller類中的getNotices方法。
3. 前端展示
修改NoticeList.vue
4. 字典
上面的例子中,首頁顯示了10條最新通知。這個10是寫在代碼中的,顯然這是不合適的,無法動態修改。解決這個問題的方法是,將這個數據記錄在數據庫中,并可以在程序的后臺管理中(后續開發)動態設置。為此建立一個字典表,記錄這個值。
哪些內容可以放到字典中:
性別。因為性別不會變動,但是用戶信息會用到。
首頁通知條數。每次打開首頁都會用到。允許變動,但很少會變動。
新建dict實體類和jpa接口
新建Constant類,用于記錄數據字典數據的標記,以便在程序各個模塊中保持調用一致。
修改Controller類中的getNotices()方法
修改數據字典中相應值為5,同時前端界面做了調整
5. 問題列表
展示同學們針對課程的問題和回復。因為課程涉及很多內容,比如Java、Mysql、Tomcat、HTML、JavaScript,還有Spring Boot、VUE、Element UI等,所以對問題,需要進行分類,以便后續的查詢和統計。
Question表
分類表
分類樹
對照表,首頁用不到
回復表
6. Sql語句
這里涉及到了兩個技術問題
Jpa中如何使用原生sql
為返回字段單獨建立一個返回值接口 QuestionIndex。
7. 返回的json數據
8. 前端顯示
、HTML
<div id="ad"></div>
<div id="search">
<div class="search_box">
<input type="text" class="search_txt" />
<input type="button" value="搜索" class="search_btn" />
</div>
</div>
<div id="box"></div>
二、CSS
*{
padding: 0px;
margin: 0px;
list-style: none;
}
#ad{
width: 100%;
height: 80px;
background: #142DA8;
}
#search{
width: 1300px;
height: 40px;
margin:0 auto;
border:1px solid black;
background: #25B3D9;
position: absolute;
top:80px;
left: 24px;
z-index: 2;
}
#search .search_box{
width: 800px;
margin: 0 auto;
}
#search .search_txt{
display: block;
width: 600px;
height: 36px;
border:2px solid red;
margin:0 auto;
float: left;
}
#search .search_btn{
margin-left: 5px;
font-size: 24px;
line-height: 38px;
float: left;
border:1px solid blue;
}
#box{
width:1300px;
height: 2000px;
background: #858282;
position: absolute;
left: 24px;
top:120px;
}
三、script
window.onscroll=function(){
var oSearch=document.getElementById('search');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if (parseInt(scrollTop)>200) {
oSearch.style.position='fixed';
oSearch.style.top='0px';
}
else{
oSearch.style.position='absolute';
oSearch.style.top='80px';
}
}
四、效果圖
此方法是本人想到的,不知道大伙還有沒有其他好的方法,請留言!!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。