整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
示：點(diǎn)擊上方"藍(lán)色字體"↑ 可以訂閱噢！
摘要 51RGB官方微信
網(wǎng)頁(yè)制作中規(guī)范使用DIV+CSS命名規(guī)則，可以改善優(yōu)化功效特別是團(tuán)隊(duì)合作時(shí)候可以提供合作制作效率，具體DIV CSS命名規(guī)則CSS命名大全內(nèi)容篇。
常用DIV+CSS命名大全集合，即CSS命名規(guī)則
我們開(kāi)發(fā)CSS+DIV網(wǎng)頁(yè)（Xhtml）時(shí)候,比較困惑和糾結(jié)的事就是CSS命名，特別是新手不知道什么地方該如何命名，怎樣命名才是好的方法。
1、所有的命名最好都小寫
2、屬性的值一定要用雙引號(hào)("")括起來(lái)，且一定要有值如 class="helloweb" , id="helloweb"
3、每個(gè)標(biāo)簽都要有開(kāi)始和結(jié)束，且要有正確的層次，排版有規(guī)律工整
4、空元素要有結(jié)束的tag或于開(kāi)始的tag后加上"/"
5、表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如：style、font、bgColor、border 等
6、<h1>到<h6>的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢。
7、給每一個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記 id
8、給圖片加上alt 標(biāo)簽，優(yōu)點(diǎn)是在于在圖片發(fā)生錯(cuò)誤時(shí)，alt 可以體現(xiàn)給用戶
9、盡量使用英文命名原則
10、盡量不縮寫，除非一看就明白的單詞
下面給大家介紹常見(jiàn)CSS命名和DIV CSS命名方法。
外套 wrap ------------------用于最外層
頭部 header ---------------用于頭部
主要內(nèi)容 main ------------用于主體內(nèi)容（中部）
左側(cè) main-left -------------左側(cè)布局
右側(cè) main-right -----------右側(cè)布局
導(dǎo)航條 nav -----------------網(wǎng)頁(yè)菜單導(dǎo)航條
內(nèi)容 content --------------用于網(wǎng)頁(yè)中部主體
底部 footer -----------------用于底部
以下為CSS樣式命名與CSS文件命名參考表，DIV CSS命名集合：
| CSS樣式命名 | 說(shuō)明 |
|---|---|
| 網(wǎng)頁(yè)公共命名 | |
| #wrapper | 頁(yè)面外圍控制整體布局寬度 |
| #container或#content | 容器,用于最外層 |
| #layout | 布局 |
| #head, #header | 頁(yè)頭部分 |
| #foot, #footer | 頁(yè)腳部分 |
| #nav | 主導(dǎo)航 |
| #subnav | 二級(jí)導(dǎo)航 |
| #menu | 菜單 |
| #submenu | 子菜單 |
| #sideBar | 側(cè)欄 |
| #sidebar_a, #sidebar_b | 左邊欄或右邊欄 |
| #main | 頁(yè)面主體 |
| #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 | 注冊(cè) |
| arr/arrow | 箭頭 |
| #guild | 指南 |
| #sitemap | 網(wǎng)站地圖 |
| #list | 列表 |
| #homepage | 首頁(yè) |
| #subpage | 二級(jí)頁(yè)面子頁(yè)面 |
| #tool, #toolbar | 工具條 |
| #drop | 下拉 |
| #dorpmenu | 下拉菜單 |
| #status | 狀態(tài) |
| #scroll | 滾動(dòng) |
| .tab | 標(biāo)簽頁(yè) |
| .left .right .center | 居左、中、右 |
| .news | 新聞 |
| .download | 下載 |
| .banner | 廣告條 |
| 電子貿(mào)易相關(guān) | |
| .products | 產(chǎn)品 |
| .products_prices | 產(chǎn)品價(jià)格 |
| .products_description | 產(chǎn)品描述 |
| .products_review | 產(chǎn)品評(píng)論 |
| .editor_review | 編輯評(píng)論 |
| .news_release | 最新產(chǎn)品 |
| .publisher | 生產(chǎn)商 |
| .screenshot | 縮略圖 |
| .faqs | 常見(jiàn)問(wèn)題 |
| .keyword | 關(guān)鍵詞 |
| .blog | 博客 |
| .forum | 論壇 |
| CSS文件命名 | 說(shuō)明 |
|---|---|
| master.css,style.css | 主要的 |
| module.css | 模塊 |
| base.css | 基本共用 |
| layout.css | 布局，版面 |
| themes.css | 主題 |
| columns.css | 專欄 |
| font.css | 文字、字體 |
| forms.css | 表單 |
| mend.css | 補(bǔ)丁 |
| print.css | 打印 |
CSS命名其它說(shuō)明：
DIV+CSS命名小結(jié)：無(wú)論是使用“.”（小寫句號(hào)）選擇符號(hào)開(kāi)頭命名，還是使用“#”(井號(hào))選擇符號(hào)開(kāi)頭命名都無(wú)所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用“#”(井號(hào))選擇符號(hào)開(kāi)頭命名，其它都用“.”（小寫句號(hào)）選擇符號(hào)開(kāi)頭命名，同時(shí)考慮命名的CSS選擇器在HTML中重復(fù)使用調(diào)用。
通常我們最常用主要命名有：wrap（外套、最外層）、header（頁(yè)眉、頭部）、nav(導(dǎo)航條)、menu(菜單)、title(欄目標(biāo)題、一般配合h1\h2\h3\h4標(biāo)簽使用)、content (內(nèi)容區(qū))、footer(頁(yè)腳、底部)、logo（標(biāo)志、可以配合h1標(biāo)簽使用）、banner（廣告條，一般在頂部）、copyRight（版權(quán)）。其它可根據(jù)自己需要選擇性使用。
建議：主要的、重要的、最外層的盒子用“#”(井號(hào))選擇符號(hào)開(kāi)頭命名，其它都用“.”（小寫句號(hào)）選擇符號(hào)開(kāi)頭命名。
2.CSS樣式文件命名如下：
主要的 master.css
布局，版面 layout.css
專欄 columns.css
文字 font.css
打印樣式 print.css
主題 themes.css
如果遇到不常用的，可以借助翻譯工具進(jìn)行翻譯取其英文命名。
以上為DIV+CSS的命名規(guī)則總結(jié)，相信通過(guò)規(guī)范的CSS 命名會(huì)給你以后做網(wǎng)站網(wǎng)頁(yè)的維護(hù)帶來(lái)方便。
想認(rèn)識(shí)志同道合的朋友一起學(xué)習(xí)web
加入我們的學(xué)習(xí)QQ群 190166743
豐富的學(xué)習(xí)資源，周一到周四免費(fèi)直播公開(kāi)課
長(zhǎng)按圖片，識(shí)別二維碼即可入群
你可能感興趣的精彩內(nèi)容
微信：UI設(shè)計(jì)自學(xué)平臺(tái)加關(guān)注
長(zhǎng)按關(guān)注：《UI設(shè)計(jì)自學(xué)平臺(tái)》
↓↓↓
互聯(lián)網(wǎng)誕生至今，賣家擠破頭都想入駐天貓、京東等主流電商平臺(tái)。隨著賣家人數(shù)的劇烈增長(zhǎng)，關(guān)于商標(biāo)侵權(quán)的糾紛屢屢出現(xiàn)，為了規(guī)范市場(chǎng)環(huán)境，各大電商針對(duì)商標(biāo)注冊(cè)出臺(tái)了各項(xiàng)要求。今天，我們麥肯錫知識(shí)產(chǎn)權(quán)就為大家歸納下主流電商對(duì)于商標(biāo)的要求。
第
1
則
-THE FIRST-
“ 天貓平臺(tái)
（內(nèi)銷）
”
1、不接受個(gè)體戶也不接受非中國(guó)企業(yè)入駐
2、不接受未取得商標(biāo)受理通知書(TM)或者商標(biāo)證書（R）的
3、不接受純圖形商標(biāo)
第
2
則
-THE SECOND-
“ 天貓平臺(tái)
（國(guó)際）
”
1、擁有海外公司實(shí)體，不可以是國(guó)內(nèi)公司
2、注冊(cè)滿一年以上的35類的海外商標(biāo)證書原件（R）（必須是海外商標(biāo)可以是港澳臺(tái)），也就是說(shuō)35類必須注冊(cè)
3、自貿(mào)區(qū)不能入駐天貓國(guó)際
第
3
則
-THE THIRD-
“ 京東商城
（內(nèi)銷）
”
1、不接受個(gè)體戶以及非中國(guó)大陸企業(yè)入駐
2、不接受未取得國(guó)家商標(biāo)總局頒發(fā)的商標(biāo)注冊(cè)證書（R）或商標(biāo)受理通知書（TM）的品牌入駐
3、不接受純圖形類商標(biāo)的入駐
4、賣家提供商標(biāo)受理通知書（TM狀態(tài)商標(biāo)）的，注冊(cè)申請(qǐng)時(shí)間必須滿六個(gè)月
5、若商標(biāo)辦理過(guò)變更、轉(zhuǎn)讓、續(xù)展，請(qǐng)一并提供商標(biāo)總局頒發(fā)的變更、轉(zhuǎn)讓、續(xù)展證明或受理通知書
第
4
則
-THE FOURTH-
“ 京東國(guó)際
（跨境）
”
境外公司，需提供：
1、商業(yè)登記證
2、注冊(cè)證書
3、法團(tuán)成立表格
4、銀行信息證明
5、董事身份證明
6、董事身份證正反面復(fù)印件
7、品牌授權(quán)書或品牌代理授權(quán)書
8、商標(biāo)注冊(cè)證（必須有商標(biāo)注冊(cè)證書）
9、質(zhì)檢報(bào)告
境內(nèi)公司，需提供：
1、營(yíng)業(yè)執(zhí)照
2、稅務(wù)登記證
3、組織機(jī)構(gòu)代碼證
4、法定代表人身份證正反面復(fù)印件
5、品牌授權(quán)書或品牌代理授權(quán)書
6、商標(biāo)注冊(cè)證（必須有商標(biāo)注冊(cè)證書R）
7、質(zhì)檢報(bào)告
第
5
則
-THE FIFTH-
“ 亞馬遜
平臺(tái)
”
1、正在申請(qǐng)中的商標(biāo)受理通知書(TM)或者商標(biāo)注冊(cè)證書（R）；
2、商標(biāo)有做變更的，轉(zhuǎn)讓和續(xù)展的，需要提供變更，轉(zhuǎn)讓，續(xù)展等商標(biāo)證明；
3、品牌在國(guó)外的注冊(cè)，做美國(guó)站注冊(cè)美國(guó)商標(biāo)，英國(guó)站注冊(cè)歐盟商標(biāo)。（來(lái)源： 文/一休知識(shí)產(chǎn)權(quán)；編選：電子商務(wù)研究中心）
以上是是筆者整理的一些關(guān)于入駐各大電商平臺(tái)商標(biāo)要求匯總的相關(guān)問(wèn)題。
這個(gè)網(wǎng)站可以幫你了解更多關(guān)于關(guān)于商標(biāo)以及專利等相關(guān)信息：
http://www.maikenxicn.com/html/page/mckinsey4.html
如果有商標(biāo)注冊(cè)、專利申請(qǐng)需要，請(qǐng)咨詢企業(yè)熱線400-999-6223或者電話call我13380132555。歡迎來(lái)撩。
標(biāo)題可能是最容易學(xué)習(xí)的代碼之一，并考慮到 它們對(duì)您的SEO至關(guān)重要，這是一件好事。共有六種不同類型，如下所示。要?jiǎng)?chuàng)建標(biāo)題，只需將文本包裝在所選的標(biāo)題標(biāo)簽中：
沒(méi)有一段要詳細(xì)說(shuō)明該消息的標(biāo)題會(huì)是什么？要獲得類似于您現(xiàn)在正在閱讀的段落，只需將文本包裝在<p>標(biāo)記中，如下例所示，并且別忘了用</ p>標(biāo)記將其關(guān)閉！
<p>嘿，我是一個(gè)段落！</ p>
嘿，我是一段！
如果不將您本已豐富的內(nèi)容鏈接到其他相關(guān)文章和網(wǎng)站文章，則入站營(yíng)銷就算什么。嘗試使用以下<a>代碼在段落中鏈接單詞或短語(yǔ)：
<a href="http://www.impactbnd.com">讓我們?cè)L問(wèn)IMPACT的真棒網(wǎng)站！</a>
奇跡般地變成：讓我們?cè)L問(wèn)IMPACT的真棒網(wǎng)站！
代碼語(yǔ)句的href部分指定了您要鏈接訪問(wèn)的目標(biāo)網(wǎng)站地址。
這很有趣。圖像使一切變得更好，它們使您的內(nèi)容對(duì)讀者更具吸引力。插入這樣的圖像：
<img class =“ lazy” data-src =“ http://cdn2.hubspot.net/hubfs/145335/Cute-Puppy.jpg” alt =“ Cute-Puppy” style =“ width：500px; height：333px; “>
image標(biāo)簽為空，因?yàn)樗鼉H包含屬性，因此不需要關(guān)閉。上面列出的屬性包括“ class =“ lazy” data-src“或圖像URL。我還包括了圖像替代文本（對(duì)于SEO而言很重要），以及一些樣式屬性（寬度和高度）。
您可以根據(jù)需要自定義圖像。哦，對(duì)于你們那里所有的小狗愛(ài)好者-像我一樣-這是我上面編碼的實(shí)際圖像：
換行符也是一個(gè)空元素，因此不需要將其關(guān)閉。換行符基本上是用<br>創(chuàng)建的兩行文本之間的有意空格。
<p>在此句子下放置換行符。
<br>
在此句子上方放置換行符。</ p>在此句子下放置換行符
在此句子上方放置換行符。
轉(zhuǎn)換完上述HTML后，與使用<p>標(biāo)記分隔兩個(gè)段落相比，您可以說(shuō)第一行和第二行之間的空間較小。添加換行符有助于使句子位于同一段落的不同行中。
為了使內(nèi)容醒目，有兩個(gè)有效的代碼元素。但是，我的開(kāi)發(fā)人員告訴我<strong>的使用量遠(yuǎn)超過(guò)<b>。不要忘記關(guān)閉<strong>標(biāo)簽！</ strong>
<strong>將整個(gè)句子加粗！</ strong>
或僅<strong>加粗</ strong>一個(gè)字！大膽的整句話！
或只加粗一個(gè)字！
斜體和強(qiáng)調(diào)文本與粗體和強(qiáng)文本相似。有兩個(gè)代碼元素，但一個(gè)元素比另一個(gè)元素使用更多。在這種情況下，<i>將起作用，但是<em>更常用。
<em>這句話很漂亮</ em>
這句話很漂亮。
粗體，斜體，并加下劃線。這一個(gè)和其他兩個(gè)一樣容易。只需將要加下劃線的文本包裝在<u>標(biāo)記中，例如。
<u>看，我們可以加下劃線！</ u>
看，我們可以強(qiáng)調(diào)！
有序列表和無(wú)序列表之間有區(qū)別。有序列表包含數(shù)字，而無(wú)序列表包含項(xiàng)目符號(hào)。它們都遵循相同的結(jié)構(gòu)，但是一個(gè)字母會(huì)發(fā)生變化。
這是有序列表的代碼語(yǔ)句。<ol>是整個(gè)“有序列表”，而<li>是一個(gè)“列表項(xiàng)”。您可以根據(jù)需要包括任意數(shù)量的列表項(xiàng)。
從一個(gè)有序列表切換到一個(gè)無(wú)序列表，只需要更改一個(gè)字母即可。
要在文本中插入上標(biāo)格式，請(qǐng)將要顯示為上標(biāo)的文本包裝在<sup>標(biāo)記中。</ sup>您將得到類似這樣的結(jié)果。
商標(biāo)應(yīng)使用上標(biāo)<sup> TM </ sup>書寫。
商標(biāo)應(yīng)使用上標(biāo)TM書寫。
如果您知道如何上標(biāo)，那么您應(yīng)該知道如何下標(biāo)。只需使用<sub>標(biāo)記</ sub>即可獲得這樣的文本。
有時(shí)，引文用下標(biāo)寫成。
有時(shí)，引文用下標(biāo)寫成。
是否要拆分頁(yè)面或文章的各個(gè)部分？嘗試一條水平線！只需使用空元素（無(wú)需關(guān)閉它）<hr>。
在我和句子2之間插入一條水平線。
<hr>
嗨，我是句子2。
在我和句子2之間插入一條水平線。
嗨，我的句子是2。
我敢打賭，您不知道可以通過(guò)HTML代碼突出顯示文本，是嗎？太酷了，太容易了。將要在<mark>標(biāo)記</ mark>中突出顯示的文本換行，以便獲得酷炫的突出功能。
僅突出顯示<mark>最重要的注釋</ mark>。
僅突出顯示 最重要的注意事項(xiàng)。
如果您想在文本上顯示穿越效果（也許您創(chuàng)建了一個(gè)任務(wù)列表，并希望在執(zhí)行過(guò)程中對(duì)每個(gè)任務(wù)進(jìn)行劃線），則有相應(yīng)的代碼。嘗試使用<del>標(biāo)記刪除完整的句子甚至一個(gè)單詞。</ del>
<del>喂狗。</ del>
<del>寫我的博客文章。</ del>
做飯。喂狗。
寫我的博客文章。
做晚飯。
到目前為止，您可能想知道我如何將所有示例都放在文本框中。好吧，驚喜！也有一個(gè)代碼。它實(shí)際上稱為塊引用或長(zhǎng)引號(hào)。您可以在下面看到長(zhǎng)引號(hào)和短引號(hào)（普通引號(hào)）之間的區(qū)別。
<blockquote>與其余示例一樣，所有這些文本都將以blockquote出現(xiàn)。</ blockquote>
<q>之所以引用這是因?yàn)槲沂谴舐曊f(shuō)出來(lái)。</ q>與其余示例一樣，所有這些文本都將以大括號(hào)顯示。
我引用此內(nèi)容是因?yàn)槲乙舐曊f(shuō)出來(lái)。
接下來(lái)的幾個(gè)會(huì)變得有些棘手，所以請(qǐng)嘗試和我在一起。現(xiàn)在，您知道如何創(chuàng)建標(biāo)題，段落和樣式化的文本，這對(duì)您知道可以使用元素“字體家族”輕松更改字體很有用。
不要忘記所有小的細(xì)節(jié)，例如等號(hào)，引號(hào)和分號(hào)。查看以下示例。
<h4 style =“ font-family：Georgia;”>我想將此標(biāo)題更改為Georgia字體。</ h4>
<p style =“ font-family：Verdana;”>我想將此段落更改為Verdana字體。</ p>
我想將此標(biāo)題更改為Georgia字體。
我想將此段落更改為Verdana字體。
該代碼使用與上一個(gè)示例相同的代碼類型，但是使用“顏色”代替使用字體家族。您可以嘗試使用實(shí)際的顏色（藍(lán)色，紅色，橙色等），也可以插入十六進(jìn)制顏色以自定義品牌的文字。
<p style =“ color：blue;”>今天的天空真的是藍(lán)色。</ p>
<p style =“ color：＃ff471a;”>火是橘紅色的</ p>今天的天空真的很藍(lán)。
火是橘紅色的。
同樣，此代碼使用相同的基本代碼邏輯，但使用元素“ font-size”。將字體大小設(shè)置為像素或px。
<p style =“ font-size：36px;”>將此段落設(shè)置為36字體。</ p>
<p style =“ font-size：12px;”>將此段落設(shè)置為12字體。</ p>使此段落大小為36字體。
使此段落大小為12字體。
左，居中，右或?qū)R。您如何看待您的文字？使用“文本對(duì)齊”以任何方式進(jìn)行設(shè)置。
<p style =“ text = align：center;”>此段落應(yīng)居中。</ p>
<p style =“ text-align：right;”>此段落應(yīng)右對(duì)齊。</ p>本段應(yīng)居中。
本段應(yīng)右對(duì)齊。
我把最好的留在了最后！好吧，我不知道這是否是最好的，但我認(rèn)為這很酷。用于創(chuàng)建表的HTML代碼可能會(huì)變得非常復(fù)雜，但是如果您掌握了基本知識(shí)，那么您應(yīng)該不會(huì)有太大的問(wèn)題。
我將在下面顯示如何創(chuàng)建一個(gè)簡(jiǎn)單表。
為了易于理解，<tr>代表表行，而<td>代表表數(shù)據(jù)。請(qǐng)記住，您可以更改字體，文本大小，文本顏色，文本對(duì)齊方式等。
您剛剛閱讀的21個(gè)代碼非常不錯(cuò)，可以開(kāi)始練習(xí)來(lái)增強(qiáng)HTML技能。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
