1. 程式人生 > >前端學習筆記之常用的命名(詳細)

前端學習筆記之常用的命名(詳細)

1. 常用命名

頁頭:header
登入條:loginBar
標誌:logo
側欄:sideBar
廣告:banner
導航:nav
子導航:subNav
選單:menu
子選單:subMenu
搜尋:search
滾動:scroll
頁面主體:main
內容:content
標籤頁:tab
文章列表:list
提示資訊:msg
小技巧:tips
欄目標題:title
加入:joinus
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
註冊:register
狀態:status
按鈕:btn
投票:vote
合作伙伴:partner
友情連結:friendLink
頁尾:footer
版權:copyRight
鏈 接:link
容 器:container
圖 標:icon
資訊: info

2. CSS ID 的命名

外 套:  wrap
主導航:  mainNav
子導航:  subNav
頁 腳:  footer
整個頁面: content
頁 眉:  header
頁 腳:  footer
商 標:  label
標 題:  title
主導航:  mainNav(globalNav)
頂導航:  topNav
邊導航:  sidebar
左導航:  leftsideBar
右導航:  rightsideBar
標 志:  logo
標 語:  banner
選單內容1: menu1Content
選單容量: menuContainer
子選單:  subMenu
邊導航圖示:sidebarIcon
註釋:   note
麵包屑:  breadCrumb(即頁面所處位置導航提示)
容器:   container
內容:   content
搜尋:   search
登陸:   login
功能區:  shop(如購物車,收銀臺)
當前的   current

3. 另外在編輯樣式表時可用的註釋可這樣寫:

<– Footer –>
內容區
<– End Footer –>

4. 樣式檔案命名

主要的 master.css
佈局,版面 layout.css
專欄 columns.css
文字 font.css
列印樣式 print.css
主題 themes.css

5. 檔案命名

全域性樣式:global.css;
框架佈局:layout.css;
字型樣式:font.css;
連結樣式:link.css;
列印樣式:print.css;

常用類的命名應儘量以常見英文單詞為準,做到通俗易懂,並在適當的地方加以註釋。對於二級類/ID命名,則採用組合書寫的模式,後一個單詞的首字母應大寫:諸如“搜尋框”則應命名為“searchInput”、“搜尋圖示”命名這 “searchIcon” 、“搜尋按鈕”命名為 “searchBtn”

相關推薦

matlab學習筆記常用命令

plot 我們 all 查看 學習 ear tla clear 但是 一.清除命令。   1.clear all;%清除所有變量,通常在matlab的工作區;另外斷點也會被清除掉   2.close all;%關閉所有窗口(除了編輯器窗口、命令窗口、幫助窗口)   3.cl

TensorFlow學習筆記——常用函式概覽

本文章內容比較繁雜,主要是一些比較常用的函式的用法,結合了網上的資料和原始碼,還有我自己寫的示例程式碼。建議照著目錄來看。1.矩陣操作1.1矩陣生成這部分主要將如何生成矩陣,包括全0矩陣,全1矩陣,隨機數矩陣,常數矩陣等tf.ones | tf.zeros tf.ones(

前端學習筆記常用命名詳細

1. 常用命名 頁頭:header 登入條:loginBar 標誌:logo 側欄:sideBar 廣告:banner 導航:nav 子導航:subNav

JavaSE 學習筆記接 口

之前 rac 關鍵字 extends 修飾符 對象 clas con 而且 接 口: 1:是用關鍵字interface定義的。 2:接口中包含的成員,最常見的有全局常量、抽象方法。 註意:接口中的成員都有固定的修飾符。 成員變量:public static fina

JavaSE 學習筆記多態

會有 轉換 容易 per 不同 如何 person 特點 一句話 多 態:函數本身就具備多態性,某一種事物有不同的具體的體現。 體現:父類引用或者接口的引用指向了自己的子類對象。//Animal a = new Cat(); 多態的好處:提高了程序的擴展性。 多態的弊端

JavaSE 學習筆記Java概述

environ 電子 6.0 run javase 有一點 架構 spa form 一、Java的三種技術架構: JAVAEE:Java Platform Enterprise Edition,開發企業環境下的應用程序,主要針對web程序開發; JAVASE:Java P

java學習筆記基礎語法

讓其 實例 高效率 使用 個數 存儲 記錄 棧內存 數組 1.數組: 概念:同一種類型數據的集合,其實,數組就是一個容器 優點:可以方便的對其進行操作,編號從0開始,方便操作這些元素。 2,數組的格式 元素類型[]數組名=new 元素類型[數組元素個

前端學習筆記 day03 盒子模型

1. 搜尋趣圖框的製作 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> &

linux學習筆記shell程式設計

shell程式設計 基礎正則表示式 正則和萬用字元的區別:正則是包含匹配,匹配檔案內容,grep,awk等支援正則表示式。萬用字元是完全匹配,匹配檔名,例如find,ls不認識正則表示式 ####正則

linux學習筆記流程控制if分支語句

流程控制 if語句 單分支if語句 程式 fi``` ```if [ 判斷 ] then 程式 fi``` 例項程式碼指令碼: #!/bin/bash

linux學習筆記shell程式設計流程控制3---for迴圈

for迴圈 語法格式1:指定迴圈範圍 for 變數 in value1 value2... do something done 指令碼例項1 #!/bin/bash for i in 1 2

linux學習筆記shell程式設計流程控制4while迴圈和until迴圈

while迴圈和until迴圈 ###、 while迴圈 不定迴圈,程式碼格式: while [判斷] do something done 指令碼例項1: #!/bin/bash #從1加到

python學習筆記基礎操作字串格式化1%格式化

格式化基本格式 s = "i am %s ,i am %d years old ,and i like %s"%("haiyang",20,"zhu") print(s) #區分資料型別,無法自動在字串

python學習筆記基礎操作字串格式化2format

format格式化 1,基本格式 #對於每一個大括號,在後面的引數中找到對應的引數插進來 #format操作類似於於將傳入的引數製成多個數據的資料結構元組或者字典,然後依照索引插入引數 s = "i a

python學習筆記基礎操作生成器和迭代器

生成器總結 語法上和函式類似:生成器函式幾乎和常規函式一樣,不同的又兩點, 第一點是返回使用yield關鍵字,第二點是在連續邏輯內可以多次返回 這是yield的特點決定的,yield會記住函式執行的位

linux學習筆記shell程式設計條件判斷

條件判斷 檔案存在與否 -d 是否存在為目錄 -e 是否是檔案 -f 是否存在為檔案 [-d /root && echo "yes" || echo "no"] -檔案讀寫執行許可權#### -r 讀許可權 -w 寫

linux學習筆記shell程式設計正則表示式與字元處理

shell程式設計 基礎正則表示式 正則和萬用字元的區別:正則是包含匹配,匹配檔案內容,grep,awk等支援正則表示式。萬用字元是完全匹配,匹配檔名,例如find,ls不認識正則表示式 ####正則表示式常用的字元(注意區別於萬用字元裡面的符號)#### -*

Django學習筆記環境搭建

           Django是一個高階的Python Web開發框架,它鼓勵快速開發,和實用的設計。它採用了MTV的設計模式,並且它由經驗豐富的開發人員來構建, 可以解決Web開發的諸多問題,因此也被稱為全棧Web開發框架。它是開源的,直接

unity3D學習筆記六 Material材質的幾種RenderingMode渲染模式

起因: 換裝時為了平滑地從一種材質切換到另一種材質,可以考慮使用一種發光特效的動畫覆蓋,也可以淡入淡出(設定Alpha)。當我考慮使用淡入淡出的方案時,發現設定Alpha並無效果,後來看了Material的手冊時發現了RendereringMode屬性。

TensorFlow學習筆記原始碼分析3---- retrain.py

"""簡單呼叫Inception V3架構模型的學習在tensorboard顯示了摘要。 這個例子展示瞭如何採取一個Inception V3架構模型訓練ImageNet影象和訓練新的頂層,可以識別其他類的影象。 每個影象裡,頂層接收作為輸入的一個2048維向量。這