淘寶網是中國最大的電子商務網站,如今擁有了大量的商家和顧客,但是如果一個網站的界面老舊,用戶體驗就會變得差。CSS編寫是可以幫助改善網站外觀的一種工具。下面介紹一下淘寶網的CSS編寫。
#header { background-color: #FFB6C1; height: 120px; margin-top: 20px; padding-top: 15px; } #logo { float: left; margin-left: 30px; } #navbar { float: right; margin-right: 30px; margin-top: 70px; } ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; margin-left: 30px; } a { color: #000; font-size: 20px; text-decoration: none; } a:hover { color: #FF8C00; }
如上述代碼展示了淘寶網頁頭的CSS,其中header是整個頭部的區域,logo是淘寶的Logo,navbar是網站頭部的導航條,ul和li標簽用來控制導航條菜單的樣式,a標簽主要規定導航條中鏈接的樣式,在hover時會變色。
CSS樣式表的分類具有特定的規定和要求,淘寶網的CSS文件按照功能和局部分為多個文件,這樣較為方便管理和修改。CSS樣式的命名也需要注意,在命名上一定要具有說明性,清晰明了,避免命名太過復雜或過于簡單的問題。命名時可以參照BEM命名法或者其它類似規范,使其更加符合團隊開發規范,并且便于項目中代碼的維護與管理。