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年定居新西兰至今,自由职业者。
本文采用知识共享署名 4.0 国际许可协议进行许可。简而言之,可随意转发转载,转载请注明出处。


留点评论吧:

本网站使用cookie技术以提高用户体验度。 了解我们的隐私政策 我已了解
Home