來(lái)源于:
https://www.loobo.me/62.html
不知道從什么時(shí)候開(kāi)始,自己一直在糾結(jié)本站的CSS,顏色、間距、動(dòng)畫(huà)樣式...等等之類(lèi)的。其實(shí)一開(kāi)始自己對(duì)CSS也是菜鳥(niǎo)中的菜鳥(niǎo),但是我一直堅(jiān)信一句話(huà):多看多學(xué)。自己一開(kāi)始不會(huì)寫(xiě)沒(méi)有關(guān)系,但是千萬(wàn)不能不去學(xué)。
這里為大家推薦最簡(jiǎn)單的學(xué)習(xí)之地?bootstrap中文網(wǎng)
不會(huì)就借鑒,借鑒多了學(xué)會(huì)自己寫(xiě),共勉!
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
常用的CSS命名規(guī)則
頭:header
內(nèi)容:content/container
尾:footer
導(dǎo)航:nav
側(cè)欄:sidebar
欄目:column
頁(yè)面外圍控制整體佈局寬度:wrapper
左右中:left right center
登錄條:loginbar
標(biāo)志:logo
廣告:banner
頁(yè)面主體:main
熱點(diǎn):hot
新聞:news
下載:download
子導(dǎo)航:subnav
菜單:menu
子菜單:submenu
搜索:search
友情鏈接:friendlink
頁(yè)腳:footer
版權(quán):copyright
滾動(dòng):scroll
內(nèi)容:content
標(biāo)簽:tags
文章列表:list
提示信息:msg
小技巧:tips
欄目標(biāo)題:title
加入:joinus
指南:guide
服務(wù):service
注冊(cè):regsiter
狀態(tài):status
投票:vote
合作伙伴:partner
注釋的寫(xiě)法:
/* Header */
內(nèi)容區(qū)
/* End Header */
Id的命名:
1)頁(yè)面結(jié)構(gòu)
容器: container
頁(yè)頭:header
內(nèi)容:content/container
頁(yè)面主體:main
頁(yè)尾:footer
導(dǎo)航:nav
側(cè)欄:sidebar
欄目:column
頁(yè)面外圍控制整體佈局寬度:wrapper
左右中:left right center
(2)導(dǎo)航
導(dǎo)航:nav
主導(dǎo)航:mainnav
子導(dǎo)航:subnav
頂導(dǎo)航:topnav
邊導(dǎo)航:sidebar
左導(dǎo)航:leftsidebar
右導(dǎo)航:rightsidebar
菜單:menu
子菜單:submenu
標(biāo)題: title
摘要: summary
(3)功能
標(biāo)志:logo
廣告:banner
登陸:login
登錄條:loginbar
注冊(cè):register
搜索:search
功能區(qū):shop
標(biāo)題:title
加入:joinus
狀態(tài):status
按鈕:btn
滾動(dòng):scroll
標(biāo)籤頁(yè):tab
文章列表:list
提示信息:msg
當(dāng)前的: current
小技巧:tips
圖標(biāo): icon
注釋?zhuān)簄ote
指南:guild
服務(wù):service
熱點(diǎn):hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權(quán):copyright
注意事項(xiàng)::
1.一律小寫(xiě);
2.盡量用英文;
3.不加中槓和下劃線(xiàn);
4.盡量不縮寫(xiě),除非一看就明白的單詞。
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專(zhuān)欄 columns.css
文字 font.css
表單 forms.css
補(bǔ)丁 mend.css
打印 print.css