小爛【趕啊趕文去!】
5 years ago @Edit 5 years ago
一不小心太過沈迷搞噗浪版面,幸好熱度終於過去,累了!
來分享噗浪版面的簡單CSS語法筆記

為自己的成品截圖留念:
https://i.imgur.com/cVmGeB2.jpg
#噗浪 #CSS
latest #10
-----介紹一下自己用過的CSS-----
主控台半透明化、鼠標移過的效果:
https://images.plurk.com/13PbBYNe4T6rqgf87U4ljq.png
Plurk Paste
各種圓角(忘了是哪些):
https://images.plurk.com/50QjH5Cdwh2sBaSJsc35Zb.png https://images.plurk.com/3WPhBOigDq30SIXRnSPDuU.png
當然也可以玩成半彎的,如下:
https://images.plurk.com/1rprHNP21mYvilKUA2Csft.png
Plurk Paste
噗浪的回應部份,暱稱在上方,留言在下方。
https://images.plurk.com/3LqGP9ZVX1cDD8HO1PWz1K.png
Plurk Paste
立即下載
鼠標移到噗上,時間顯示在上方:
https://images.plurk.com/1A8AZQvuVJ5kUpeNd1wJGt.png
Plurk Paste
其實我的理想是把時間顯示在噗的附近,而不是完全固定在上方/下方,但看來靠改CSS是辦不到……
當鼠標移到噗上/噗打開了,右上角的噗計數器字體放大
https://images.plurk.com/7DzHg7WJRfliRtbwi5r1x8.png https://images.plurk.com/1FOeDsgWU7z2uCi3ubKJZl.png
Plurk Paste
噗的文字行高和段落距離調整:
https://images.plurk.com/21aJoi3N0WbZBxVZUhKjM1.png
Plurk Paste
要做到段落的間距,方法就比較邪門。
由於噗浪換行用br,所以要在br動手腳,亦有些browser compatibility issue要考量
純屬筆記,打開的噗頂樓會顯示邊框和背景紫色,其他噗不變:
#timeline_cnt .plurk_box .plurk_cnt{
border: 2px solid #F00;
background-color: #eef;
}
https://images.plurk.com/7e5C6njlKsPaVLhVJqCMVJ.png
費了最多功夫在排噗框子:
https://images.plurk.com/2NYBuusheSBwvjrn1NoAXv.png
平常是預設的水平顯示,滑過去就變成名字凸起的文件夾款式,border弄了很久,不過效果還是不穩定就是了……
上面純屬自己玩的小感想,沒有參考別人的寫法,所以一些rule啊單位啊可能略有出入。有些太簡單就省略不多寫,像是不顯示朋友/粉絲/時間軸/噗浪獸,基本上用display: none就能處理掉。
關於噗浪css,下面的噗應該整理得很詳細清晰:
@chiaki1000 - 【噗浪版面調整】 所有文章總整理: 新版發問區請至此: 如果我漏掉你的回應請...
小補充:
1. 不同的CSS寫法也可以達到相同效果
2. 不建議弄得太過花巧甚至把排版全改掉,一來是官方改版的話容易歪,二來是影響rendering performance 除非你自己玩得很爽
back to top