Login
Sign Up For Free
English
中文 (繁體)
中文 (香港)
中文 (简体)
日本語
Filipino
Bahasa Indonesia
Bahasa Melayu
Pусский
Português (Brasil)
Magyar
Français
Español
Deutsch
Čeština
العربية
Català
Dansk
Ελληνικά
فارسی
Suomi
Gaeilge
Hindi
עברית
Hrvatski
Italiano
Norsk bokmål
Nederlands
한국어
Polski
Română
Slovenský
Svenska
Türkçe
українська
беларуская
ไทย
Standard view
小爛【趕啊趕文去!】
說
5 years ago
@Edit 5 years ago
一不小心太過沈迷搞噗浪版面,幸好熱度終於過去,累了!
來分享噗浪版面的簡單CSS語法筆記
為自己的成品截圖留念:
https://i.imgur.com/cVmGeB2.jpg
#噗浪
#CSS
latest #10
小爛【趕啊趕文去!】
說
5 years ago
-----介紹一下自己用過的CSS-----
主控台半透明化、鼠標移過的效果:
Plurk Paste
小爛【趕啊趕文去!】
說
5 years ago
各種圓角(忘了是哪些):
當然也可以玩成半彎的,如下:
Plurk Paste
小爛【趕啊趕文去!】
說
5 years ago
噗浪的回應部份,暱稱在上方,留言在下方。
Plurk Paste
立即下載
小爛【趕啊趕文去!】
說
5 years ago
鼠標移到噗上,時間顯示在上方:
Plurk Paste
其實我的理想是把時間顯示在噗的附近,而不是完全固定在上方/下方,但看來靠改CSS是辦不到……
小爛【趕啊趕文去!】
說
5 years ago
當鼠標移到噗上/噗打開了,右上角的噗計數器字體放大
Plurk Paste
小爛【趕啊趕文去!】
說
5 years ago
噗的文字行高和段落距離調整:
Plurk Paste
要做到段落的間距,方法就比較邪門。
由於噗浪換行用br,所以要在br動手腳,亦有些browser compatibility issue要考量
小爛【趕啊趕文去!】
說
5 years ago
純屬筆記,打開的噗頂樓會顯示邊框和背景紫色,其他噗不變:
#timeline_cnt
.plurk_box .plurk_cnt{
border: 2px solid
#F00;
background-color:
#eef;
}
小爛【趕啊趕文去!】
說
5 years ago
費了最多功夫在排噗框子:
平常是預設的水平顯示,滑過去就變成名字凸起的文件夾款式,border弄了很久,不過效果還是不穩定就是了……
小爛【趕啊趕文去!】
說
5 years ago
上面純屬自己玩的小感想,沒有參考別人的寫法,所以一些rule啊單位啊可能略有出入。有些太簡單就省略不多寫,像是不顯示朋友/粉絲/時間軸/噗浪獸,基本上用display: none就能處理掉。
關於噗浪css,下面的噗應該整理得很詳細清晰:
@chiaki1000 - 【噗浪版面調整】 所有文章總整理: 新版發問區請至此: 如果我漏掉你的回應請...
小爛【趕啊趕文去!】
說
5 years ago
小補充:
1. 不同的CSS寫法也可以達到相同效果
2. 不建議弄得太過花巧甚至把排版全改掉,一來是官方改版的話容易歪,二來是影響rendering performance
除非你自己玩得很爽
back to top
delete
reply
edit
cancel
cancel