整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          神奇的html錨點,讓你的網頁在內部自由的跳轉

          起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方法。

          • 第一按照sort排序,置頂記錄sort=0,其他記錄sort>0。
          • 第二新發表的通知在前,即按照發表時間降序排列。
          • 第三按分頁獲取數據,每頁10條記錄,取第1頁。


          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語句

          • 顯示4個內容:主分類、題目、發布人全名、發布/回復時間
          • 排序按照置頂、回復/發布時間倒序排列
          • 因為顯示內容涉及多個表,為提高效率,將所需要的內容用一條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';

          }

          }

          四、效果圖

          此方法是本人想到的,不知道大伙還有沒有其他好的方法,請留言!!


          主站蜘蛛池模板: 一区二区三区无码高清| 国产一区二区三区美女| 成人在线观看一区| 久久国产香蕉一区精品| 亚洲第一区二区快射影院| 冲田杏梨高清无一区二区| 中文字幕乱码亚洲精品一区| 美女福利视频一区| 国产精品无码AV一区二区三区| 国产MD视频一区二区三区| 日韩aⅴ人妻无码一区二区| 在线播放一区二区| 国产精品视频一区二区三区无码 | 亚洲一区爱区精品无码| 国产福利在线观看一区二区| 精品国产区一区二区三区在线观看| 久久er99热精品一区二区| 久久久久99人妻一区二区三区| 国产婷婷色一区二区三区| 红桃AV一区二区三区在线无码AV| 福利片福利一区二区三区| 风流老熟女一区二区三区| 一区五十路在线中出| 一区二区三区电影在线观看| 国产色精品vr一区区三区| 亚洲色精品vr一区二区三区 | 国产精品视频一区二区三区| 久久久久人妻精品一区| AV鲁丝一区鲁丝二区鲁丝三区| 国产在线乱子伦一区二区| 成人精品一区二区激情| 国产SUV精品一区二区88L| 国产亚洲一区二区三区在线不卡| 国产激情精品一区二区三区| 国产色综合一区二区三区| 国产福利一区二区三区在线视频| 少妇一晚三次一区二区三区| 国产成人av一区二区三区在线观看 | 中文字幕亚洲一区二区三区| 久久亚洲一区二区| 亚洲乱码一区二区三区国产精品|