web前端命名規範

来源:https://www.cnblogs.com/menggirl23/archive/2019/12/09/12012351.html
-Advertisement-
Play Games

下麵是常見的命名參考規範: ❤ 主體 頭部:header 內容:content/container 尾部:footer 導航:nav 側欄:sidebar 欄目:column 整體佈局:wrapper 左右中:left / right / center 登錄條:loginbar 標誌:logo 廣告 ...


下麵是常見的命名參考規範:

主體

  頭部:header

  內容:content/container

  尾部:footer

  導航:nav

  側欄:sidebar

  欄目:column

  整體佈局:wrapper

  左右中:left / right / center

  登錄條:loginbar

  標誌:logo

  廣告:banner

  頁面主體:main

  熱點:hot

  新聞:news

  下載:download

  子導航:subnav

  菜單:menu

  子菜單:submenu

  搜索:search

  友情鏈接:friendlink

  頁腳:footer

  版權:copyright

  滾動:scroll

  標簽頁:tab

  文章列表:list

  提示信息:msg

  小技巧:tips

  欄目標題:title

  加入:join

  指南:guild

  服務:service

  註冊:regsiter

  狀態:status

  投票:vote

  合作伙伴:partner

 

id的命名規範

  (1)頁面結構

    容器: container

    頁頭:header

    內容:content/container

    頁面主體:main

    頁尾:footer

    導航:nav

    側欄:sidebar

    欄目:column

    頁面外圍控制整體佈局寬度:wrapper

    左右中:left right center

  (2)導航

    導航:nav

    主導航:mainnav

    子導航:subnav

    頂導航:topnav

    邊導航:sidebar

    左導航:leftsidebar

    右導航:rightsidebar

    菜單:menu

    子菜單:submenu

    標題: title

    摘要: summary

  (3)功能

    標誌:logo

    廣告:banner

    登陸:login

    登錄條:loginbar

    註冊:regsiter

    搜索:search

    功能區:shop

    標題:title

    加入:joinus

    狀態:status

    按鈕:btn

    滾動:scroll

    標簽頁:tab

    文章列表:list

    提示信息:msg

    當前的: current

    小技巧:tips

    圖標: icon

    註釋:note

    指南:guild

    服務:service

    熱點:hot

    新聞:news

    下載:download

    投票:vote

    合作伙伴:partner

    友情鏈接:link

    版權:copyright

❤ class的命名:

  (1)顏色:使用顏色的名稱或者16進位代碼,如:

    .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }

  (2)字體大小,直接使用“font+字體大小”作為名稱,如:

    .font12px { font-size: 12px; } .font9pt {font-size: 9pt; }

  (3)對齊樣式,使用對齊目標的英文名稱,如:

    .left { float:left; } .bottom { float:bottom; }

  (4)標題欄樣式,使用“類別+功能”的方式命名,如:

    .barnews { } .barproduct { }

❤!註意事項:

  1.一律小寫;

  2.儘量用英文;

  3.儘量不加中杠和下劃線;

  4.儘量不縮寫,除非一看就明白的單詞,如:wrapper可以寫成wrap。

  5.css文件命名規範:

    主要的 master.css;

    模塊 module.css;

    基本共用 base.css;

    佈局,版面layout.css;

    主題 themes.css;

    專欄 columns.css;

    文字 font.css;

    表單 forms.css;

    補丁 mend.css;

    列印print.css

 

 

-THE END-


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • DECLARE @ESQL VARCHAR(1000);DECLARE FCursor CURSOR --定義游標FOR (SELECT 'ALTER TABLE '+O.name+' DROP CONSTRAINT '+F.name+';' AS CommandSQL from SYS.FOREI ...
  • 安裝VC++2013 若是以上方法不能解決,需要下載安裝VC++2013,這是微軟官網的鏈接 https://www.microsoft.com/zh cn/download/confirmation.aspx?id=40784 點擊 下載自己對應的版本,安裝,一般可以解決。 ...
  • 轉載請標明出處:https://www.cnblogs.com/tangZH/p/12013685.html 在項目過程中,出現了一個需求,軟鍵盤要頂起部分控制項,而另一部分控制項不動。 關於這種需求,我們需要明確佈局方式: 1、線性佈局是行不通的,即使被頂上去也是全部被頂上去,因為線性佈局中裡面的控制項 ...
  • 在每一個圖片的某一側都可以展示出一個三角形的邊框視圖,就是咱們的三角形標簽視圖。這個視圖在電商類APP當中比較常用,使用過ebay的同學應該都還記得有些商品的左上角或者右上角都會顯示一個三角形的邊框,用於給人一個直觀的商品正在促銷,或者剛剛上線的直觀感受。我們可以看看實現後的效果如下: 在真實的AP ...
  • 這是一門付費Android項目課程,我們只做付費課程;同時也感謝大家的支持。 這一節,對本課程做一個簡單介紹,以及放一些項目效果圖,如果想直接查看項目視頻演示,可以直接在騰訊課堂查看【 "高仿Android網易雲音樂企業級項目實戰" 】課程第三節,讓大家對該項目有一個整體的認識。 1 前言 我們課程 ...
  • 如何獲取頁面元素 根據ID獲取 使用getElementById()方法可以獲取帶ID的元素對象 因為文檔頁面從上往下載入,所以先得有標簽,script寫在標簽的下麵 get 獲取 element 元素 by 通過 駝峰命名法 參數 id 是大小寫敏感的字元串 返回一個元素對象 console.di ...
  • 關於github page 創建子功能變數名稱以及https 認證 ...
  • 今天聽課聽到了Math對象中的隨機數方法random(),然後就想用它設計一個簡單的隨機點名系統。我記得之前高中的時候語文老師用過一個,是類似於名字滾動的那種,現在太菜就先不考慮這個了,後續有機會再研究吧。 先展示一下最終的效果圖。 下麵是html代碼部分 1 <!DOCTYPE html> 2 < ...
一周排行
    -Advertisement-
    Play Games
  • 前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據,比如SQL伺服器的連接串或者是OAuth2的Secret等,這些敏感數據在代碼中是不太安全的,我們不應該在源代碼中存儲密碼和其他的敏感數據,一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型,用戶可以根據需要進行修改 ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 如果讓你來做一個有狀態流式應用的故障恢復,你會如何來做呢? 單機和多機會遇到什麼不同的問題? Flink Checkpoint 是做什麼用的?原理是什麼? ...
  • C++ 多級繼承 多級繼承是一種面向對象編程(OOP)特性,允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護,並促進代碼重用。 多級繼承的語法 在 C++ 中,使用 : 符號來指定繼承關係。多級繼承的語法如下: class DerivedClass : public BaseClass1 ...
  • 前言 什麼是SpringCloud? Spring Cloud 是一系列框架的有序集合,它利用 Spring Boot 的開發便利性簡化了分散式系統的開發,比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子,而是將市面上開發得比較好的模塊集成進去,進行封裝,從 ...
  • class_template 類模板和函數模板的定義和使用類似,我們已經進行了介紹。有時,有兩個或多個類,其功能是相同的,僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • 目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制),V是羅馬數字5,是UNI ...