https://jesselau.com/tags/css/ Recent content in css on Hugo -- gohugo.io zh-Hant Sat, 01 Dec 2018 00:26:15 +1300 https://jesselau.com/anti-adblock/ Sat, 01 Dec 2018 00:26:15 +1300 https://jesselau.com/anti-adblock/ 反反廣告插件? 是的，標題沒有打錯。 IT man的寫法應該加個括號，反（反廣告插件）。 昨天提到了廣告，多年以前對廣告很感興趣，看過好些部經典的寫廣告書籍，如《影響力》、《百萬美元信》等，前幾個月到美帝一遊，看到路邊的招牌，也感覺是個廣告之國。 廣告對市場經濟高速發展起到了一定的作用。不過 https://jesselau.com/eu-cookie-consent/ Fri, 30 Nov 2018 00:26:15 +1300 https://jesselau.com/eu-cookie-consent/ 昨天在Hugo w3 simple模板裏用簡單的代碼實現了基於歐盟cookie法律的瀏覽條提示。 這個cookie law已經存在好幾年了，具體解釋google第一條結果就有一個網站cookielaw.org 其網站是英文的，簡單翻譯來說： Cookie Law Cookie法是一項隱私立法，要求網站獲得訪問者 https://jesselau.com/%E5%85%B1%E4%BA%AB%E6%A2%9D%E8%87%AA%E9%81%A9%E6%87%89%E8%A8%AD%E8%A8%88/ Sat, 24 Nov 2018 00:26:15 +1300 https://jesselau.com/%E5%85%B1%E4%BA%AB%E6%A2%9D%E8%87%AA%E9%81%A9%E6%87%89%E8%A8%AD%E8%A8%88/ 之前寫個一個小帖子來介紹怎麼做左側共享條，我設計這個Hugo模板也采用了同樣的設計。 前兩天有一位國際友人在github上open了一個issue，說是需要修改一下這個共享條的自適應。因為我當時很簡單的處理了一下，當屏幕寬度小於1024px時，自動取消固定在左側的屬性，就放在屏幕下 https://jesselau.com/%E6%BB%91%E5%B1%8F%E9%80%B2%E5%BA%A6%E6%A2%9D%E5%AF%A6%E7%8F%BE/ Fri, 23 Nov 2018 00:26:15 +1300 https://jesselau.com/%E6%BB%91%E5%B1%8F%E9%80%B2%E5%BA%A6%E6%A2%9D%E5%AF%A6%E7%8F%BE/ 經過一個網站，看到滑屏的時候有個進度條提示，似乎挺有效果。記得w3school曾經講過這個。 稍加修改，做在我這個模板裏麵。 滑屏進度條實現 先設置css .progress-container { display:none; position: fixed; top: 0; z-index: 1; width: 100%; background-color: #f1f1f1; width: 100%; height: 4px; background: #ccc; } .progress-bar { height: 4px; background: #f44336; width: 0%; } 再在頁麵弄個div <div class="progress-container" id="scrollbar"> <div class="progress-bar" id="progress-bar"></div> </div> 然後加入javascript來處理滑屏事件 https://jesselau.com/%E4%BF%AE%E6%94%B9extra%E5%AD%90%E6%A8%A1%E6%9D%BF%E5%9C%A8%E4%B8%BB%E8%8F%9C%E5%96%AE%E6%AC%84%E4%B8%AD%E9%96%93%E5%A2%9E%E5%8A%A0%E9%A1%9Eamazon%E7%9A%84%E6%90%9C%E7%B4%A2%E6%A2%9D%E4%BB%A5/ Fri, 12 Oct 2018 21:53:30 +0000 https://jesselau.com/%E4%BF%AE%E6%94%B9extra%E5%AD%90%E6%A8%A1%E6%9D%BF%E5%9C%A8%E4%B8%BB%E8%8F%9C%E5%96%AE%E6%AC%84%E4%B8%AD%E9%96%93%E5%A2%9E%E5%8A%A0%E9%A1%9Eamazon%E7%9A%84%E6%90%9C%E7%B4%A2%E6%A2%9D%E4%BB%A5/ 現在的一個項目中，打算突出搜索功能，但Extra模板的搜索條很小，需要定製。 觀察了一下各大網站，覺得Amazon的搜索條不錯。 打算也整一個類似的。就一個logo右邊來一個搜索條，然後右邊再一個鏈接。 需要修改Extra模板源代碼，那就先建一個子模板目錄 sudo mkdir /var/www/yourwebsite.com/wp-content/themes/Extra-child 這個目錄放兩個文件。 一個 https://jesselau.com/%E7%8E%A9%E7%8E%A9extra%E6%A8%A1%E6%9D%BF%E7%9A%84css%E4%B8%A6%E5%B0%87%E9%A6%96%E9%A0%81%E7%9A%84adsense%E4%BB%A3%E7%A2%BC%E5%8F%96%E6%B6%88/ Sun, 23 Sep 2018 08:49:18 +0000 https://jesselau.com/%E7%8E%A9%E7%8E%A9extra%E6%A8%A1%E6%9D%BF%E7%9A%84css%E4%B8%A6%E5%B0%87%E9%A6%96%E9%A0%81%E7%9A%84adsense%E4%BB%A3%E7%A2%BC%E5%8F%96%E6%B6%88/ 裝修後過了一天，感覺首頁的那個slider似乎沒有太大必要，而且主題也不明確。 還是用一個靜態圖片好一些，用EXTRA的image 模塊加一張圖片很簡單，但沒有什麼動態效果，感覺不太美觀。好吧，用CSS打磨一個動態效果吧。 添加一個TEXT模塊，然後寫上下麵代碼 <div class="zoomimg-container"> <img class="zoomimg" style="width: 100%;" src="https://jesselau.com/wp-content/uploads/2018/09/jesselaublog-1.jpg" /> <div class="zoomimg-content"> <h1>Welcome to https://jesselau.com/%E7%8E%A9%E7%8E%A9css%E7%B5%A6%E7%B6%B2%E7%AB%99%E7%BE%8E%E7%BE%8E%E5%AE%B9%E4%BB%A5%E5%8F%8A%E5%9C%A8wordpress%E4%B8%AD%E5%B8%96%E9%AB%98%E4%BA%AE%E6%98%93%E8%AE%80%E7%9A%84%E4%BB%A3%E7%A2%BC/ Tue, 18 Sep 2018 00:30:21 +0000 https://jesselau.com/%E7%8E%A9%E7%8E%A9css%E7%B5%A6%E7%B6%B2%E7%AB%99%E7%BE%8E%E7%BE%8E%E5%AE%B9%E4%BB%A5%E5%8F%8A%E5%9C%A8wordpress%E4%B8%AD%E5%B8%96%E9%AB%98%E4%BA%AE%E6%98%93%E8%AE%80%E7%9A%84%E4%BB%A3%E7%A2%BC/ 昨天裝了視頻界麵後，覺得網站頁麵也幹巴巴的對鼠標也沒有什麼互動。決定給網站增加點特效。 CSS 層疊樣式表 (Cascading Style Sheets)真是一個偉大的發明。找到樣式id後，可以隨心所欲的控製，使得網站的設計有了無限的可能性。 好，玩了一陣子，就是現在網站這個樣子。打算將代碼帖出來存檔並且能供大家參考。