文章目录

W3 CSS 實現固定瀏覽條以及怕苦關

2018-11-19 约 1536 字 预计阅读 4 分钟

以前學了幾小時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>

效果見此頁麵。


通關文之怕苦關

中庸曰:人一能之,己百之;人十能之,己千之,果能此道矣。雖愚必明,雖柔必強。
太古曰:睡了一時,死了一時;睡了一日,死了一日;日日有功無睡,千日便了事也。
諺雲:不下苦中苦,難為人上人。
此皆言大好之事,必須勤苦而後成也。
夫天下最大之事,須最苦之功,日久而方成。
特以苦之大,成之大也。
而況性命大事,豈有不苦而成者哉?
苦之一字,為修道者治病之良藥,惟能苦的,方能磨煉的身心,方能調治的大病。
故必外而積功行,內而煉意念,勞其筋骨,餓其體膚,空乏其身,處處行功,事事努力。
修橋補路,損己益人,忍辱受垢,隨地方便。
人好的我不好,人愛的我不愛,人難受的我能受,人難過的我能過。
把有生以來,習染事物,一概決去,此外苦也。
內而整頓精神,堅固誌氣, 除去情欲,掃卻妄念,諸般煩惱,一切無明,狠力剪滅。
不能去而必欲去,不能除而必欲除,隻是一個求道的真心在內,須臾不離,其餘皆不受納,是內苦也。
如此苦去,內外如一,方是真苦,方能治的大病。
昔釋迦雪山修煉,六祖四會用功,邱祖磻溪磨性,如諸聖賢,皆天縱之姿,還要在大苦中度出,而況後世學人皆中下之流,豈有不苦而成者哉?
世間糊塗學人,不知苦中生甜之樂,要自在得寶,安閑成道。
聞說下苦,即便生愁;聞說力勞,即便作難。
日間惜力養膘,飽食閑浪,夜裏綿被厚褥,長眠大睡。
一些利人之事不做,一點用力之處不行,無數毛病不改。
或看幾部丹書,或諗幾卷經典,虛裝有道;或雲遊乞化,飽食暖衣,即為本事;或坐寺居觀,住持焚修,不受饑寒,以為消交。
如此等類,絕不思拋離父母、丟棄妻子所為何事。
若以出家為衣食,與俗人何異?
何必累十方債賬,豈不多此一事?
吾勸真心學道者,速將怕苦關口打通,立一個苦死不回頭的念頭,腳踏實地,勇猛前進。
把性命二字,貼在額頭上,時時刻刻留心。
大凡有益之事盡力做去,大凡無益之事盡力棄去。
自己苦行以外,聽師指教,一一如命,莫生怠心,日夜勤勞,久而不廢,終得實惠。
否則,懼怕辛苦,逡畏不果,苟延歲月,妄想聞道,難矣。

此關講明要內外如一,處處行功,事事努力。

當今世上,體力勞動較之前朝少了許多。筋骨鍛煉的機會少了,可借助器具增加鍛煉機會。

本人每日午酉二時,若不下雨狂風,就會背上盔甲(淘寶所購負重背心)散步兩公裏陸地遊泳。感覺對放鬆身體有較大幫助,供同修參考。

注意

負重鍛煉需要循序漸進,先以輕量級練之,待習慣後逐步加重可也!


Tags: hugo 通關文

author

Jesse Lau

網名遁去的一,簡稱遁一。2012年定居新西蘭至今,自由職業者。手搓的GPTs
本文采用知識共享署名 4.0 國際許可協議進行許可。簡而言之,可隨意轉發轉載,轉載請注明出處。


留点评论吧:

Home