整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
起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標簽添加偽元素樣式，可完美解決這個問題，效果圖如下
使用偽元素后的效果圖
總結
今天的內容你會了么？如果還沒有掌握的話，可以按照文章中的代碼，進行實踐，代碼總是要多敲才更容易理解。
如果喜歡的話，記得關注小編噢，小編后續會堅持出更多技術性的文章，如果有任何問題，也歡迎提問，小編都會盡力解答的。
日常項目中，界面布局上經常使用到側邊欄的方式，在側邊欄放置控件進行復合使用，可以實現子功能界面的隱藏和滑出，效果展示如下：
界面控件很簡單，主界面QWidget，側邊欄也用一個QWidget和一個按鈕QPushbutton來進行組合。通過點擊按鈕來顯示和隱藏側邊欄。主要用到的是控件的move()函數，配合QPropertyAnimation實現動畫效果滑動顯示隱藏。動畫滑出動畫效果使用到的是QPropertyAnimation類的setEasingCurve()函數，通過設置函數參數來實現不同的動畫效果，具體效果可以通過Qt Create的幫助文件查詢到。
Qt開發必備技術棧學習路線和資料
迎來到《真香，30天做一套wordpress主題》系列文章，我們的目標是（沒有蛀牙！）建立一套全新的wordpress主題，花上30天的時間閉關修煉，如果你看到的第一篇文章不是《基礎框架搭建》，建議你關注我們（數字江湖異志錄），從該系列的第一篇開始閱讀。
我們將盡量保持文章的循序漸進和通俗易懂，請確保自己已經掌握了那一篇文章的全部內容時才選擇跳過，不然可能會錯過關鍵的信息噢~
這里我們假定你已經知曉了以下基礎知識，這些基礎知識對理解文章內容是至關重要的：
1. HTML/CSS/JS基礎
2. PHP基礎
3. 如何使用Wordpress
4. 如何搭建web環境
如果你已經知曉了以上基礎知識，恭喜你，本系列的任何文章內容對你而言都沒有什么難度。
今天我們開始制作主題的側邊欄（sidebar），wordpress可以把小工具（widgets）放到側邊欄里，我們先為主題開啟側邊欄功能，在functions.php里添加如下代碼：
function?my_sidebar_registration()?{
????register_sidebar(array(
????????'name'?=>?__(?'Sidebar'),
????????'id'?=>?'sidebar-1',
????));
}
add_action(?'widgets_init',?'my_sidebar_registration'?);我們就可以后臺看到官方默認的一些widgets了，當然，我們還會需要自定義widgets，但是現在，我們先對這些默認widgets提供支持：
看上去有點多，不過沒關系，只要把小工具的通用容器設計好了，很多內容都是重復的。我們首先配上一個Categories小工具，然后在首頁側邊欄的位置顯示出來。
????????????<aside?class="sidebar">
????????????????<?php?dynamic_sidebar('my-sidebar');??>
????????????</aside>這里對于官方的小工具，我們不去動它的DOM結構，只通過CSS進行樣式描述就可以了：
還記得我們的my_sidebar_registration嗎？我們在里面把一些官方的小工具在我們的主題里去掉，比如image audio video這些，會破壞AMP的規則，其它的暫時沒用到的我們也屏蔽了：
????unregister_widget('WP_Widget_Media_Audio');???//?remove?audio
????unregister_widget('WP_Widget_Media_Video');???//?remove?video
????unregister_widget('WP_Widget_Media_Image');???//?remove?image
????unregister_widget('WP_Widget_Media_Gallery');???//?remove?galley
????unregister_widget('WP_Widget_Calendar');???//?remove?calendar
????unregister_widget('WP_Nav_Menu_Widget');???//?remove?nav?menu
????unregister_widget('WP_Widget_Pages');???//?remove?pages?menu
????unregister_widget('WP_Widget_RSS');???//?remove?rss
????unregister_widget('WP_Widget_Text');???//?remove?text
????unregister_widget('WP_Widget_Tag_Cloud');???//?remove?tag?cloud
鑒于我們需要amp-form保證頁面的amp屬性，只能把搜索小工具也給移除了，然后我們來手寫一個自定義搜索小工具，這里我們為了偷懶直接從wordpress源文件里復制一個WP_Widget_Search修改使用。
第一步，引入amp-form文件(header.php)：
<script?async?custom-element="amp-form"?src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
第二步，建立自定義搜索小工具類(functions.php)：
class?my_search?extends?WP_Widget?{
????public?function?__construct()?{
????????$widget_ops?=?array(
????????????'classname'???????????????????=>?'widget_search',
????????????'description'?????????????????=>?__(?'A?search?form?for?your?site.'?),
????????????'customize_selective_refresh'?=>?true,
????????);
????????parent::__construct(?'search',?_x(?'Search',?'Search?widget'?),?$widget_ops?);
????}
????public?function?widget(?$args,?$instance?)?{
????????$title?=?!?empty(?$instance['title']?)???$instance['title']?:?'';
????????$title?=?apply_filters(?'widget_title',?$title,?$instance,?$this->id_base?);
????????echo?$args['before_widget'];
????????if?(?$title?)?{
????????????echo?$args['before_title']?.?$title?.?$args['after_title'];
????????}
????????echo?
????????'<form?target="_top"?role="search"?method="get"?class="search-form"?action="/">
????????????<input?type="text"?class="search-field"?placeholder="'?.?esc_attr_x(?'Search?…',?'placeholder'?)?.?'"?value="'?.?get_search_query()?.?'"?name="s"?/>
????????????<button?type="submit"?class="search-submit"></button>
????????</form>';
????????echo?$args['after_widget'];
????}
????public?function?form(?$instance?)?{
????????$instance?=?wp_parse_args(?(array)?$instance,?array(?'title'?=>?''?)?);
????????$title????=?$instance['title'];
?????????>
????????<p><label?for="<?php?echo?$this->get_field_id(?'title'?);??>"><?php?_e(?'Title:'?);??>?<input?class="widefat"?id="<?php?echo?$this->get_field_id(?'title'?);??>"?name="<?php?echo?$this->get_field_name(?'title'?);??>"?type="text"?value="<?php?echo?esc_attr(?$title?);??>"?/></label></p>
????????<?php
????}
????public?function?update(?$new_instance,?$old_instance?)?{
????????$instance??????????=?$old_instance;
????????$new_instance??????=?wp_parse_args(?(array)?$new_instance,?array(?'title'?=>?''?)?);
????????$instance['title']?=?sanitize_text_field(?$new_instance['title']?);
????????return?$instance;
????}
}這里我們需要知道，__construct構造函數對這個小工具的基本信息進行了描述，form方法定義了后臺添加小工具時看到的選項，update方法定義了更新小工具設置時數據的更新，widget方法定義了小工具在前臺的展現結構。
第三步，注冊這個小工具：
register_widget('my_search');
最后我們就可以在后臺使用我們自定義的搜索小工具了，添加后到頁面上看看：
這里有一個要特別注意的地方，amp-form對action里的url是有要求的，雖然可以是完整的url也可以是絕對路徑，但是最終使用的action url必須是https協議的，否則無法通過amp checker的檢測。
今天我們完成了側邊欄的開發，并且創建了屬于我們的自定義小工具，通過定義通用css樣式，大多數的小工具都直接美化好了，對于不能用的官方小工具，我們先直接屏蔽了
明天我們將稍加休整一下，完成頁面的通用底部，實現頂部菜單的二級展開，做一些細節上的優化。
如果你喜歡這個系列的文章，趕快關注我們（數字江湖異志錄）吧，不要錯過后續的更多干貨噢。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
