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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...