整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
加style
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0; width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
</style>
.......
.....
</div>
<footer class="footer">
<div style="text-align:center;">
Copyright 2019 by Ben
</div>
</footer>
</body>
image.png
效果圖，不管窗口放大還是調(diào)小，footer 都會 顯示在最底也，也不會覆蓋content 里面的內(nèi)容。
示：點(diǎn)擊上方"藍(lán)色字體"↑ 可以訂閱噢！
摘要 51RGB官方微信
網(wǎng)頁制作中規(guī)范使用DIV+CSS命名規(guī)則，可以改善優(yōu)化功效特別是團(tuán)隊合作時候可以提供合作制作效率，具體DIV CSS命名規(guī)則CSS命名大全內(nèi)容篇。
常用DIV+CSS命名大全集合，即CSS命名規(guī)則
我們開發(fā)CSS+DIV網(wǎng)頁（Xhtml）時候,比較困惑和糾結(jié)的事就是CSS命名，特別是新手不知道什么地方該如何命名，怎樣命名才是好的方法。
1、所有的命名最好都小寫
2、屬性的值一定要用雙引號("")括起來，且一定要有值如 class="helloweb" , id="helloweb"
3、每個標(biāo)簽都要有開始和結(jié)束，且要有正確的層次，排版有規(guī)律工整
4、空元素要有結(jié)束的tag或于開始的tag后加上"/"
5、表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如：style、font、bgColor、border 等
6、<h1>到<h6>的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢。
7、給每一個表格和表單加上一個唯一的、結(jié)構(gòu)標(biāo)記 id
8、給圖片加上alt 標(biāo)簽，優(yōu)點(diǎn)是在于在圖片發(fā)生錯誤時，alt 可以體現(xiàn)給用戶
9、盡量使用英文命名原則
10、盡量不縮寫，除非一看就明白的單詞
下面給大家介紹常見CSS命名和DIV CSS命名方法。
外套 wrap ------------------用于最外層
頭部 header ---------------用于頭部
主要內(nèi)容 main ------------用于主體內(nèi)容（中部）
左側(cè) main-left -------------左側(cè)布局
右側(cè) main-right -----------右側(cè)布局
導(dǎo)航條 nav -----------------網(wǎng)頁菜單導(dǎo)航條
內(nèi)容 content --------------用于網(wǎng)頁中部主體
底部 footer -----------------用于底部
以下為CSS樣式命名與CSS文件命名參考表，DIV CSS命名集合：
| CSS樣式命名 | 說明 |
|---|---|
| 網(wǎng)頁公共命名 | |
| #wrapper | 頁面外圍控制整體布局寬度 |
| #container或#content | 容器,用于最外層 |
| #layout | 布局 |
| #head, #header | 頁頭部分 |
| #foot, #footer | 頁腳部分 |
| #nav | 主導(dǎo)航 |
| #subnav | 二級導(dǎo)航 |
| #menu | 菜單 |
| #submenu | 子菜單 |
| #sideBar | 側(cè)欄 |
| #sidebar_a, #sidebar_b | 左邊欄或右邊欄 |
| #main | 頁面主體 |
| #tag | 標(biāo)簽 |
| #msg #message | 提示信息 |
| #tips | 小技巧 |
| #vote | 投票 |
| #friendlink | 友情連接 |
| #title | 標(biāo)題 |
| #summary | 摘要 |
| #loginbar | 登錄條 |
| #searchInput | 搜索輸入框 |
| #hot | 熱門熱點(diǎn) |
| #search | 搜索 |
| #search_output | 搜索輸出和搜索結(jié)果相似 |
| #searchBar | 搜索條 |
| #search_results | 搜索結(jié)果 |
| #copyright | 版權(quán)信息 |
| #branding | 商標(biāo) |
| #logo | 網(wǎng)站LOGO標(biāo)志 |
| #siteinfo | 網(wǎng)站信息 |
| #siteinfoLegal | 法律聲明 |
| #siteinfoCredits | 信譽(yù) |
| #joinus | 加入我們 |
| #partner | 合作伙伴 |
| #service | 服務(wù) |
| #regsiter | 注冊 |
| arr/arrow | 箭頭 |
| #guild | 指南 |
| #sitemap | 網(wǎng)站地圖 |
| #list | 列表 |
| #homepage | 首頁 |
| #subpage | 二級頁面子頁面 |
| #tool, #toolbar | 工具條 |
| #drop | 下拉 |
| #dorpmenu | 下拉菜單 |
| #status | 狀態(tài) |
| #scroll | 滾動 |
| .tab | 標(biāo)簽頁 |
| .left .right .center | 居左、中、右 |
| .news | 新聞 |
| .download | 下載 |
| .banner | 廣告條 |
| 電子貿(mào)易相關(guān) | |
| .products | 產(chǎn)品 |
| .products_prices | 產(chǎn)品價格 |
| .products_description | 產(chǎn)品描述 |
| .products_review | 產(chǎn)品評論 |
| .editor_review | 編輯評論 |
| .news_release | 最新產(chǎn)品 |
| .publisher | 生產(chǎn)商 |
| .screenshot | 縮略圖 |
| .faqs | 常見問題 |
| .keyword | 關(guān)鍵詞 |
| .blog | 博客 |
| .forum | 論壇 |
| CSS文件命名 | 說明 |
|---|---|
| master.css,style.css | 主要的 |
| module.css | 模塊 |
| base.css | 基本共用 |
| layout.css | 布局，版面 |
| themes.css | 主題 |
| columns.css | 專欄 |
| font.css | 文字、字體 |
| forms.css | 表單 |
| mend.css | 補(bǔ)丁 |
| print.css | 打印 |
CSS命名其它說明：
DIV+CSS命名小結(jié)：無論是使用“.”（小寫句號）選擇符號開頭命名，還是使用“#”(井號)選擇符號開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名，同時考慮命名的CSS選擇器在HTML中重復(fù)使用調(diào)用。
通常我們最常用主要命名有：wrap（外套、最外層）、header（頁眉、頭部）、nav(導(dǎo)航條)、menu(菜單)、title(欄目標(biāo)題、一般配合h1\h2\h3\h4標(biāo)簽使用)、content (內(nèi)容區(qū))、footer(頁腳、底部)、logo（標(biāo)志、可以配合h1標(biāo)簽使用）、banner（廣告條，一般在頂部）、copyRight（版權(quán)）。其它可根據(jù)自己需要選擇性使用。
建議：主要的、重要的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名。
2.CSS樣式文件命名如下：
主要的 master.css
布局，版面 layout.css
專欄 columns.css
文字 font.css
打印樣式 print.css
主題 themes.css
如果遇到不常用的，可以借助翻譯工具進(jìn)行翻譯取其英文命名。
以上為DIV+CSS的命名規(guī)則總結(jié)，相信通過規(guī)范的CSS 命名會給你以后做網(wǎng)站網(wǎng)頁的維護(hù)帶來方便。
想認(rèn)識志同道合的朋友一起學(xué)習(xí)web
加入我們的學(xué)習(xí)QQ群 190166743
豐富的學(xué)習(xí)資源，周一到周四免費(fèi)直播公開課
長按圖片，識別二維碼即可入群
你可能感興趣的精彩內(nèi)容
微信：UI設(shè)計自學(xué)平臺加關(guān)注
長按關(guān)注：《UI設(shè)計自學(xué)平臺》
↓↓↓
天給大家分享前端初學(xué)者必須要學(xué)習(xí)的標(biāo)簽，這些標(biāo)簽?zāi)愣紩藛幔?br>
分享之前我還是要推薦下我自己的前端學(xué)習(xí)群：524262608，不管你是小白還是大牛，小編我都挺歡迎，不定期分享干貨，包括我自己整理的一份2017最新的前端資料，送給大家，歡迎初學(xué)和進(jìn)階中的小伙伴
頁頭:header
登錄條:loginBar
標(biāo)志:logo
側(cè)欄:sideBar
廣告:banner
導(dǎo)航:nav
子導(dǎo)航:subNav
菜單:menu
子菜單:subMenu
搜索:search
滾動:scroll
頁面主體:main
內(nèi)容:content
標(biāo)簽頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標(biāo)題:title
友情鏈接:friendLink
頁腳:footer
加入:joinus
指南:guild
服務(wù):service
熱點(diǎn):hot
新聞:news
下載:download
注冊:regsiter
狀態(tài):status
按鈕:btn
投票:vote
合作伙伴:partner
版權(quán):copyRight
外套:wrap
主導(dǎo)航:mainNav
子導(dǎo)航:subnav
頁腳:footer
整個頁面:content
頁眉:header
頁腳:footer
商標(biāo):label
標(biāo)題:title
主導(dǎo)航:mainNav(globalNav)
頂導(dǎo)航:topnav
邊導(dǎo)航:sidebar
左導(dǎo)航:leftsideBar
右導(dǎo)航:rightsideBar
旗志:logo
標(biāo)語:banner
菜單內(nèi)容1:menu1Content
菜單容量:menuContainer
子菜單:submenu
邊導(dǎo)航圖標(biāo):sidebarIcon
注釋:note
面包屑:breadCrumb(即頁面所處位置導(dǎo)航提示)
容器:container
內(nèi)容:content
搜索:search
登陸:login
功能區(qū):shop(如購物車，收銀臺)
當(dāng)前的current
主要的:master.css
布局版面:layout.css
專欄:columns.css
文字:font.css
打印樣式:print.css
主題:themes.css
標(biāo)簽到這里就結(jié)束了，web前端學(xué)習(xí)的可以來我的群，群里每天都有對應(yīng)資料學(xué)習(xí)：524262608，歡迎初學(xué)和進(jìn)階中的小伙伴。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
