HTML,CSS的class與id命名規則

個人博客點這里

最重要的部分先說(命名書寫格式)

常見的格式有:連接符(search-btn)、下劃線、全小(searchbox)、小駝峰(searchBox)。

現在用得多廣泛的還是第一種使用連接符,易讀、書寫方便。

在這里小編推薦大家id使用下劃線_來進行連接,class用中劃線-來進行連接

網頁公共命名:

  • #wrapper - - 頁面外圍控制整體布局寬度
  • #container或#content - - 容器,用于最外層
  • #layout - - 布局
  • #head,#header - - 頁頭部分
  • #foot,#footer - - 頁腳部分
  • #nav - - 主導航
  • #subnav - - 二級導航
  • #menu - - 菜單
  • #submenu - - 子菜單
  • #sidebar - - 側欄
  • #sidebar_a,#sidebar_b - - 左邊欄或右邊欄
  • #main - - 頁面主體
  • #tag - - 標簽
  • #msg,#message - - 提示信息
  • #tips - - 小技巧
  • #vote - - 投票
  • #friendlink - - 友情鏈接
  • #title - - 標題
  • #summary - - 摘要
  • #loginbar - - 登錄條
  • #searchInput - - 搜索輸入框
  • #hot - - 熱門熱點
  • #search - - 搜索
  • #search_output - - 搜索輸出和搜索結果相似
  • #searchBar - - 搜索條
  • #search_results - - 搜索結果
  • #copyright - - 版權信息
  • #branding - - 商標
  • #logo - - 網站LOGO標志
  • #siteinfo - - 網站信息
  • #siteinfoLegal - - 法律聲名
  • #siteinfoCredits - - 信譽
  • #joinus - - 加入我們
  • #partner - - 合作伙伴
  • #service - - 服務
  • #regsiter - - 注冊
  • arr/arrow - - 箭頭
  • #guild - - 指南
  • #sitemap - - 網站地圖
  • #list - - 列表
  • #homeepage - - 首頁
  • #subpage - - 二級頁面子頁面
  • #tool,#toolbar - - 工具條
  • #drop - - 下拉
  • #dorpmenu - - 下拉菜單
  • #status - - 狀態
  • #scroll - - 滾動
  • .tab - - 標簽頁
  • .left,.right,.center - - 居中、左、右
  • .news - - 新聞
  • .download - - 下載
  • .banner - - 廣告條(頂部廣告條)

電子貿易相關:

  • .products - - 產品
  • .products_prices - - 產品價格
  • .products_description - - 產品描述
  • .products_review - - 產品評論
  • .editor_review - - 編輯評論
  • .news_release - - 最新產品
  • .publisher - - 生產商
  • .screenshot - - 縮略圖
  • .faqs - - 常見問題
  • .keyword - - 關鍵詞
  • .blog - - 博客
  • .forum - - 論壇

基礎的命名:

  • 外套 wrap - - 用于最外層
  • 頭部 header - - 用于頭部
  • 主要內容 main - - 用于主體內容(中部)
  • 左側 main-left - - 左側布局
  • 右側 main-right - - 右側布局
  • 導航條 nav - - 網頁菜單導航條
  • 內容 content - - 用于網頁中部主體
  • 底部 footer - - 用于底部

CSS文件命名:

  • master.css,style.css - - 主要的
  • module.css - - 模塊
  • base.css - - 基本共用
  • layout.css - - 布局,版面
  • themes.css - - 主題
  • columns.css - - 專欄
  • font.css - - 文字、字體
  • forms.css - - 表單
  • mend.css - - 補丁
  • print.css - - 打印

原文鏈接

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/455187.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/455187.shtml
英文地址,請注明出處:http://en.pswp.cn/news/455187.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

主打“云安全” 迅雷系帝恩思登陸新三板

ZD至頂網安全頻道 06月14日 綜合消息: 6月14日上午,帝恩思(837018)敲響了登陸新三板的鐘聲。作為帝恩思的重要股東,迅雷(NASDAQ:XNET)CEO鄒勝龍與帝恩斯董事長王宇杰、總經理許淵培等人一同參加了這一儀式。 帝恩斯是一…

UESTC 1636 夢后樓臺高鎖,酒醒簾幕低垂

題意&#xff1a;求一條路徑&#xff0c;使得這條邊連接1到n&#xff0c;求邊權值的最大值與最小值的差 題解&#xff1a;最小生成樹&#xff0c;對邊權排序&#xff0c;可以枚舉邊的最大和最小的值&#xff0c;判斷能否使得1和n連通 #include <bits/stdc.h> #define ll …

wav文件格式分析詳解

wav文件格式分析詳解 作者&#xff1a;曹京日期&#xff1a;2006年7月17日 一、綜述 WAVE文件作為多媒體中使用的聲波文件格式之一&#xff0c;它是以RIFF格式為標準的。RIFF是英文Resource Interchange File Format的縮寫&#xff0c;每個WAVE文件的頭四個字節便是“RIFF…

pg數據庫開啟遠程連接_Postgresql開啟遠程訪問的步驟全紀錄

前言安裝PostgreSQL數據庫之后&#xff0c;默認是只接受本地訪問連接。如果想在其他主機上訪問PostgreSQL數據庫服務器&#xff0c;就需要進行相應的配置。下面話不多說了&#xff0c;來一起看看詳細的介紹吧。步驟如下&#xff1a;要在Postgresql中允許遠程訪問,需要設置如下2…

Vue.js前后端分離2

個人博客點這里 內容回顧 - 過濾器 - 局部的過濾器 // 只能在當前組件內部使用 filters:function(val,a,b){// 執行過濾處理邏輯,(添油加醋的內容)return xxx; }- 全局的過濾器 // 聲明創建 在任何組件中都能使用 Vue.filter("myTime",function() {// 添油加醋的…

WORD列表縮進的文本起始點

Figure 1 Figure 2 Figure 3 編號位置以刻度尺為起點0.74厘米&#xff08;2個字符間距&#xff09;&#xff0c;文本縮進以刻度尺為起點2.96厘米&#xff08;8個字符間距&#xff09; 以上兩者相減得到的值正好特殊格式懸掛縮進的值2.22厘米 Figure 4 上圖看到&#xff0c;文本…

無人車火了 百度是如何做到的?

ZD至頂網服務器頻道 03月02日 新聞消息&#xff08;文/于澤&#xff09;&#xff1a;百度無人車可謂狠狠的吸足了大眾的眼球。一個問題逐漸出現在我們心中&#xff0c;為什么百度這樣的互聯網企業會推出無人車&#xff0c;似乎搜索引擎和無人車之間的關聯度并不是很高。 謎題的…

測繪技術設計規定最新版_測繪技術設計規定

《》是中國測繪出版社出版圖書&#xff0c;下面小編給大家介紹關于的相關資料&#xff0c;希望對您有所幫助。《》內容國家測繪地理信息局法規與行業管理司編著的《(2014)》是一本關于測繪資質管理規定和測繪資質分級標準的書。具體內容包括&#xff1a;大地測量專業標準、測繪…

各類音頻格式解析

CD格式&#xff1a;天籟之音 當今世界上音質最好的音頻格式是什么&#xff1f;當然是CD了。因此要講音頻格式&#xff0c;CD自然是打頭陣的先鋒。在大多數播放軟件的“打開文件類型”中&#xff0c;都可以看到&#xff0a;.cda格式&#xff0c;這就是CD音軌了。標準CD格式也就是…

Error: Java heap space

在chd中 的hive中執行 (select count (*)) 或者mr程序都報Error: Java heap space 4、io.sort.mb 的作用 排序所使用的內存數量。 默認值&#xff1a;100M&#xff0c;需要與mapred.child.java.opts相配 默認&#xff1a;-Xmx200m。 不能超過mapred.child.java.opt設置&…

Golang語言基礎課件

go學習pdf課件,大家可以收藏頁面以免文件丟失 原文鏈接:http://victorfengming.gitee.io/course/go/

NIO客戶端主要創建過程

NIO客戶端主要創建過程:步驟一&#xff1a;打開SocketChannel&#xff0c;綁定客戶端本地地址&#xff08;可選&#xff0c;默認系統會隨機分配一個可用的本地地址&#xff09;&#xff0c;示例代碼如下&#xff1a; SocketChannel clientChannel SocketChannel.open(); 步驟…

rank 開窗函數_over 開窗函數的的理解

over的功能&#xff1a;一、with Ta as(select 1 as Fa, a as Fbunion allselect 2 as Fa, b as Fbunion allselect 3 as Fa, c as Fbunion allselect 4 as Fa, d as Fbunion allselect 5 as Fa, e as Fb)select FB ,1.*Fa/(select sum(Fa) from Ta)from Tawith Ta as(select 1…

MP3技術白皮書-音頻格式全解析

MP3的技術雖然現在已經完全公開&#xff0c;但是&#xff0c;其具體的技術細節還是有一定的深度&#xff0c;因此此次小編對某些技術進行深度解釋&#xff0c;希望網友們笑納。 采樣率&#xff1a; 數碼音頻系統是通過將聲波波形轉換成一連串的二進制數據來再現原始聲音的&…

Docker Compose 項目

二、Docker Compose 項目compose項目簡介compose項目來源于之前的Fig項目&#xff0c;使用python代碼編寫。compose項目主要用于編排部署基于docker的應用。本身與docker&#xff0f;swarm配合度很高。Docker Compose 是 Docker 編排服務的一部分&#xff0c;可以讓用戶在其它平…

Goland安裝-工欲善其事必先利其器

?、安裝Goland開發?具 &#xff08;?&#xff09;、介紹 Goland是由JetBrains公司旨在為go開發者提供的?個符合?體?程學的新 的商業IDE。這個IDE整合了IntelliJ平臺的有關go語?的編碼輔助功能和?具集成 特點。它具有以下特點&#xff1a; 編碼輔助功能符合?體?程學…

android 獲取sd卡目錄失敗_樹莓派對SD卡的大小,速度有哪些要求?

SD卡容量的大小通過NOOBS安裝帶有桌面和推薦軟件&#xff08;完整&#xff09;的 Raspberry Pi OS&#xff0c;SD卡最小為16GB。 對于帶有桌面和推薦軟件的 Raspberry Pi OS 鏡像安裝&#xff0c;SD卡最小為8GB。對于安裝 Raspberry Pi OS Lite&#xff0c;建議 SD 卡最小為4GB…

OGG音頻格式解析

OGG 什么是Ogg Ogg全稱是OGG Vobis(ogg Vorbis) &#xff0c;是一種新的音頻壓縮格式&#xff0c;類似于MP3等現有的音樂格式。但有一點不同的是&#xff0c;它是完全免費、開放和沒有專利限制的。OGG Vobis有一個很出眾的特點&#xff0c;就是支持多聲道&#xff0c;隨…

區分同源與非同源

2019獨角獸企業重金招聘Python工程師標準>>> JSONP和AJAX相同&#xff0c;都是客戶端向服務器端發送請求&#xff1a;1、給服務器端傳遞內容2、從服務器端獲取數據 的方式 AJAX屬于同源策略 JSONP屬于非同源策略(跨域請求) -> 實現跨域請求的方式有很多種&#x…