[問題] 關於這個網站的 sidebar

看板Web_Design作者 (南洋大兜蟲)時間14年前 (2012/01/14 01:38), 編輯推噓6(609)
留言15則, 7人參與, 最新討論串1/1
我在逛 xdite 部落格時(http://blog.xdite.net) 對他的 sidebar 很感興趣,所以也想試著自己做一個一樣的功能 不過我很在意那兩個「>>」符號(http://tinyurl.com/8ysd9w9) 我利用瀏覽器去檢查頁面元素,只看到: <span class="toggle-sidebar"></span> 結果什麼也沒有,我在資源裡面也沒有看到下載到類似圖案 所以我想也不是圖片 那就是文字了? 可是這到底是怎麼做的……有哪位前輩可以幫我解惑嗎? 此外,我覺得我找不到這東西怎麼做的原因在於我 trace code 的能力不足 也希望前輩能分享一些好用的工具,或是如何訓練去理解一個網頁的設計方式 --- 我同時也在這裡分享我的方式: 其實我大多情況下都是用 chrome 內建的 console 除了可以看到 http 的 header 之外,還能看到每個 html element 的 css 內容 甚至可以直接下 javascript 而有些情況例如我在寫網頁時,用到一些動態表單,我會改用 firefox 配合 hackbar 和 firebug 來幫助我 debug --- (但即使如此……我還是不知道那個「>>」是怎麼來的……Orz) -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.113.246.1

01/14 02:03, , 1F
css content
01/14 02:03, 1F

01/14 07:31, , 2F
.toggle-sidebar::after
01/14 07:31, 2F

01/14 12:26, , 3F
.toggle-sidebar:after {content: "\00BB";}
01/14 12:26, 3F

01/14 12:27, , 4F
這CSS的用法真的很少見
01/14 12:27, 4F

01/14 12:28, , 5F
而且這作者很機車的把CSS檔壓縮過了 超難找 -_-
01/14 12:28, 5F

01/14 12:31, , 6F
哇靠 這個css應該是靠程式生產的 不是人寫的...
01/14 12:31, 6F

01/14 13:36, , 7F
要研究他人網站請善用開發工具看,速度比開檔案快上千倍
01/14 13:36, 7F

01/14 14:34, , 8F
那個是 Octopress 內建的 theme ...
01/14 14:34, 8F

01/14 14:35, , 9F
01/14 14:35, 9F

01/14 14:35, , 10F
而且壓縮 css 是很常見的網站加速方式吧 -_-
01/14 14:35, 10F

01/14 20:53, , 11F
原來是 Octopress !想不到又再次看到他了!
01/14 20:53, 11F

01/14 20:53, , 12F
感謝眾仙的指引!我知道他的特效是怎麼做的了^^
01/14 20:53, 12F

01/14 22:30, , 13F
壓縮又沒差,瀏覽器搭個開發工具就看光光了
01/14 22:30, 13F

01/14 22:34, , 14F
壓縮是為了加速傳輸...
01/14 22:34, 14F

01/15 23:09, , 15F
壓縮過後沒關係,丟進eclipse 然後ctrl+shift+f 就整理好了
01/15 23:09, 15F
文章代碼(AID): #1F46mRtj (Web_Design)