W3 CSS 實現固定瀏覽條以及怕苦關
以前學了幾小時boottrap，準備擁抱了，不想沒幾個小時以後，發現W3 CSS代碼更小巧，教程也足夠多。
基於W3 CSS編寫了這個HUGO 模板後，感覺W3 CSS功能確實足夠強了，至少整個中小型網站，CSS方麵應該是完全足夠了。
就用W3 CSS把之前用boottrap弄的固定瀏覽條再弄一個。順便加一點效果，後麵可以再跟後台數據庫相連。
W3 CSS實現Nav Bar
實現這個Nav bar用W3 css非常簡單了。我就把點擊搜索框出來的熱門搜索再結合進去重寫一下，回頭再用PHP語言將數據庫結果顯示於此，今天就暫時全是前端，後端語言還需數據庫稍微調整一下，數日後再寫吧：
Nav bar with W3 CSS
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { padding-bottom: 60px; }
.dropdown {
position: fixed;
overflow: auto;
display: none;
z-index: 99;
bottom: 60px;
right: 60px;
width:250px;
pointer-events: auto;
}
.dropdown a {
text-decoration: none;
}
</style>
<body>
<div class="w3-bar w3-bottom w3-black w3-border w3-padding w3-hide-small w3-hide-medium">
<span class="w3-bar-item w3-green"><i class="fa fa fa-audio-description"></i></span>
<a href="#" class="w3-bar-item w3-button">Home</a>
<button class="w3-bar-item w3-button w3-green w3-right">Go</button>
<div class="holder">
<input id="displaydrop" type="text" class="w3-bar-item w3-input w3-white w3-right" placeholder="Search.." onfocus="displayhotsearch(this)">
</div>
</div><div id="myDropdown" class="dropdown w3-card-4 w3-blue w3-round-xlarge">
<p>
Hot Searches:
</p>
<ul class="w3-ul">
<li><a href="/q/wordpress" >Wordpress</a></li>
<li><a href="/q/hugo">Hugo</a></li>
<li><a href="/q/天道">天道</a></li>
<li><a href="/q/通關文">通關文</a></li>
<li><a href="/q/賭術">賭術</a></li>
</ul>
</div>
<script>
function displayhotsearch() {
document.getElementById("myDropdown").style.display = "block";
}
document.getElementById("displaydrop").addEventListener("keypress", function(event) {
document.getElementById("myDropdown").style.display = "none";
});
// Detect all clicks on the document
document.addEventListener("click", function(event) {
// If user clicks inside the element, do nothing
if (event.target.closest(".holder")) return;
// If user clicks outside the element, hide it!
document.getElementById("myDropdown").style.display = "none";
});
</script>
</body>
</html>
效果見此頁麵。
通關文之怕苦關
中庸曰：人一能之，己百之；人十能之，己千之，果能此道矣。雖愚必明，雖柔必強。
太古曰：睡了一時，死了一時；睡了一日，死了一日；日日有功無睡，千日便了事也。
諺雲：不下苦中苦，難為人上人。
此皆言大好之事，必須勤苦而後成也。
夫天下最大之事，須最苦之功，日久而方成。
特以苦之大，成之大也。
而況性命大事，豈有不苦而成者哉？
苦之一字，為修道者治病之良藥，惟能苦的，方能磨煉的身心，方能調治的大病。
故必外而積功行，內而煉意念，勞其筋骨，餓其體膚，空乏其身，處處行功，事事努力。
修橋補路，損己益人，忍辱受垢，隨地方便。
人好的我不好，人愛的我不愛，人難受的我能受，人難過的我能過。
把有生以來，習染事物，一概決去，此外苦也。
內而整頓精神，堅固誌氣， 除去情欲，掃卻妄念，諸般煩惱，一切無明，狠力剪滅。
不能去而必欲去，不能除而必欲除，隻是一個求道的真心在內，須臾不離，其餘皆不受納，是內苦也。
如此苦去，內外如一，方是真苦，方能治的大病。
昔釋迦雪山修煉，六祖四會用功，邱祖磻溪磨性，如諸聖賢，皆天縱之姿，還要在大苦中度出，而況後世學人皆中下之流，豈有不苦而成者哉？
世間糊塗學人，不知苦中生甜之樂，要自在得寶，安閑成道。
聞說下苦，即便生愁；聞說力勞，即便作難。
日間惜力養膘，飽食閑浪，夜裏綿被厚褥，長眠大睡。
一些利人之事不做，一點用力之處不行，無數毛病不改。
或看幾部丹書，或諗幾卷經典，虛裝有道；或雲遊乞化，飽食暖衣，即為本事；或坐寺居觀，住持焚修，不受饑寒，以為消交。
如此等類，絕不思拋離父母、丟棄妻子所為何事。
若以出家為衣食，與俗人何異？
何必累十方債賬，豈不多此一事？
吾勸真心學道者，速將怕苦關口打通，立一個苦死不回頭的念頭，腳踏實地，勇猛前進。
把性命二字，貼在額頭上，時時刻刻留心。
大凡有益之事盡力做去，大凡無益之事盡力棄去。
自己苦行以外，聽師指教，一一如命，莫生怠心，日夜勤勞，久而不廢，終得實惠。
否則，懼怕辛苦，逡畏不果，苟延歲月，妄想聞道，難矣。
此關講明要內外如一，處處行功，事事努力。
當今世上，體力勞動較之前朝少了許多。筋骨鍛煉的機會少了，可借助器具增加鍛煉機會。
本人每日午酉二時，若不下雨狂風，就會背上盔甲（淘寶所購負重背心）散步兩公裏陸地遊泳。感覺對放鬆身體有較大幫助，供同修參考。
注意
負重鍛煉需要循序漸進，先以輕量級練之，待習慣後逐步加重可也！
相关文章:
- 2018/11/19 幸好這是夢以及陰惡關
- 2018/11/13 Pagination CSS設置自適應以及懦弱關
- 2018/11/11 設置Manticoresearch搞定Hugo站點的搜索引擎以及口舌關
- 2018/11/08 用git的webhook實現快速更新Hugo網站以及恩愛關
- 2018/11/08 從Wordpress遷移至Hugo以及不信關
Jesse Lau
網名遁去的一，簡稱遁一。2012年定居新西蘭至今，自由職業者。
本文采用知識共享署名 4.0 國際許可協議進行許可。簡而言之，可隨意轉發轉載，轉載請注明出處。