無敵博皮 之 乾坤大變色——中篇:樣式說明

假期無聊,去一朋友家串門,發現在他們家24寸的顯示器我的博客沒辦法看,一行字太長了,看完一行轉回頭來往往找不到該看哪行,以至於實在無法使用全屏而不得不人爲的把窗口縮小來看。我一直知道這是個問題,但我以爲問題不是非常大,沒有親身體驗,還真是無法感受,看來餘世維是對的:凡是“我以爲”的,一定是錯的。

還有一件一直“我以爲”的事情,我以爲大家已經習慣了12px那小巧精緻的字體,雖然我知道應該照顧一下“某些人”,但還是想着,或者他們可以自己克服下,於是一直是12px下來的,當然,我又錯了,因爲我發現自己變成了“某些人”中的一員——12px的字體看着很費勁,分辨率越高,我越是需要14px甚至更大的字。

於是有了現在這個佈局:960px的頁寬 &amp 686px 的內容寬 + 14px字體。

寫給別人看的東西,應該讓別人專注於內容,而不是很費勁的去看盯着屏幕尋找。當一行文字很長的時候,看完一行回頭得去尋找該看哪行了,很多時候當看到第二行的時候還得去回想上一行是什麼,尋找新行花費了太多時間並打斷了我們的思路,以至於我們無法利用大腦暫留區域或眼睛的聚焦範圍來清楚的知道當前的狀態。

“文形”是一件很重要的事情,文形是指大塊兒文字所形成的一種形狀,在我們看一段文字時,我們其實並不把焦點放到某個字或者詞上,而是放在這一“片”上。當我們需要接收越來越多的信息,這一點就越發顯得重要。很長的行,明顯不是一種好的“文形”,尤其是當字還比較小的時候。

技術真的是要命,我的一些習慣還保留自800*600的時代,而現在大家的顯示器都已經如此BT~~~~在上面的寬度中,我已經放棄了800的寬度限制,做過太長時間的700+,是時候換成900+了。分辨率也越來越高,不只是因爲屏幕大了,同樣也因爲屏幕能夠更細膩的去表達了,而這帶來的結果就是12px的字,可以清楚的顯示和分辨,但實在不適合大段閱讀。

於是,終於下定決心把主體內容加大到了14px,因爲我希望別人能夠比較舒服地看完我的文章,而一些鏈接、擴展文字之類,依然保持12px,這些東西其實很不重要,想看的人自然會看到,不想看的人也無所謂,而且因爲這類字大都很短,幾個字而已,倒不成什麼問題。

樣式相對來說比較簡單,沒有使用到圖片,全部以各種顏色搭配來實現。我雖不是色盲,但是對顏色其實超級不敏感,所以做得難看再所難免,只是做個樣子,各位達人可自行修改 :),樣式文件可以在上一篇中給出的鏈接中下載,也可以直接引用我給出的文件,我是不會刪除、移動或重命名這些文件的(系統本身移動的我不負責(H))。本文發佈的時候一共是7個樣式文件,也就是支持七種不同的風格,後面或許會繼續添加。

樣式很簡單,沒有用到很多技巧,也沒有使用hack什麼的,甚至連個important都沒有用到,我就不廢話了,大家可以自己去看看,不明白的地方請在下面留言,我會盡力解答。

值得注意的是,在每個文件裏,都有很多顏色是重複利用的,這只是適應了我做的這一種版式,如果你想做出自己的版式,可能不得不把其中某些聲明拆散,任務量相對比較大。而不同的風格基本上就是修改了顏色,沒有對樣式進行過多的改動,因爲考慮到當風格切換時,最好還是保持頁面各元素不動,換版式和元素移動顯然不是一種好的體驗,比如一個文章看到一半兒,一換版式可能就找不到看到哪兒了,或者換完之後又得重新尋找剛剛點過的那些鏈接等等。

另外需要提起的就是CSS文件中的最後兩段,前一段是作用於文章的,可以在這裏添加你常用的樣式定義,還算比較方便。最後一段,非常抱歉的使用了我的名字,以防止和博客園本身哪裏的設定起衝突,這一部分是用來定義那個切換區域的樣式的,如果你沒有保留切換功能,那麼就不需要這一部分了,可以直接刪除掉。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章