示：點擊上方"藍色字體"↑ 可以訂閱噢！

摘要 51RGB官方微信

網頁制作中規范使用DIV+CSS命名規則，可以改善優化功效特別是團隊合作時候可以提供合作制作效率，具體DIV CSS命名規則CSS命名大全內容篇。

常用DIV+CSS命名大全集合，即CSS命名規則

我們開發CSS+DIV網頁（Xhtml）時候,比較困惑和糾結的事就是CSS命名，特別是新手不知道什么地方該如何命名，怎樣命名才是好的方法。

一、命名規則說明

1、所有的命名最好都小寫

2、屬性的值一定要用雙引號("")括起來，且一定要有值如 class="helloweb" , id="helloweb"

3、每個標簽都要有開始和結束，且要有正確的層次，排版有規律工整

4、空元素要有結束的tag或于開始的tag后加上"/"

5、表現與結構完全分離，代碼中不涉及任何的表現元素，如：style、font、bgColor、border 等

6、<h1>到<h6>的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢。

7、給每一個表格和表單加上一個唯一的、結構標記 id

8、給圖片加上alt 標簽，優點是在于在圖片發生錯誤時，alt 可以體現給用戶

9、盡量使用英文命名原則

10、盡量不縮寫，除非一看就明白的單詞

下面給大家介紹常見CSS命名和DIV CSS命名方法。

二、相對網頁外層重要部分CSS樣式命名

外套 wrap ------------------用于最外層

頭部 header ---------------用于頭部

主要內容 main ------------用于主體內容（中部）

左側 main-left -------------左側布局

右側 main-right -----------右側布局

導航條 nav -----------------網頁菜單導航條

內容 content --------------用于網頁中部主體

底部 footer -----------------用于底部

三、DIV+CSS命名參考表

以下為CSS樣式命名與CSS文件命名參考表，DIV CSS命名集合：

CSS命名其它說明：

DIV+CSS命名小結：無論是使用“.”（小寫句號）選擇符號開頭命名，還是使用“#”(井號)選擇符號開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名，同時考慮命名的CSS選擇器在HTML中重復使用調用。

通常我們最常用主要命名有：wrap（外套、最外層）、header（頁眉、頭部）、nav(導航條)、menu(菜單)、title(欄目標題、一般配合h1\h2\h3\h4標簽使用)、content (內容區)、footer(頁腳、底部)、logo（標志、可以配合h1標簽使用）、banner（廣告條，一般在頂部）、copyRight（版權）。其它可根據自己需要選擇性使用。

建議：主要的、重要的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名。

2.CSS樣式文件命名如下：

主要的 master.css

布局，版面 layout.css

專欄 columns.css

文字 font.css

打印樣式 print.css

主題 themes.css

四、英文命名技巧

如果遇到不常用的，可以借助翻譯工具進行翻譯取其英文命名。

以上為DIV+CSS的命名規則總結，相信通過規范的CSS 命名會給你以后做網站網頁的維護帶來方便。

想認識志同道合的朋友一起學習web

加入我們的學習QQ群 190166743

豐富的學習資源，周一到周四免費直播公開課

長按圖片，識別二維碼即可入群

你可能感興趣的精彩內容

微信：UI設計自學平臺加關注

長按關注：《UI設計自學平臺》

↓↓↓

文詳細介紹了如何在Axure中創建一個上傳圖片列表的原型模板，包括具體的操作步驟和交互設計，對于需要在產品原型中實現圖片上傳功能的產品經理和設計師來說，這是一個非常實用的教程。閱讀本文，你將學會如何制作一個交互式的圖片上傳列表，希望對你有所幫助。

上傳圖片列表常用于許多不同類型的應用和系統中，包括社交媒體平臺、電子商務網站、博客和內容管理系統、在線相冊和圖像存儲服務、項目管理工具等，發揮著重要作用，幫助用戶管理、組織和展示他們上傳的圖片，從而豐富內容、提高用戶體驗，并支持各種業務需求。

所以今天作者就教大家怎么在Axure制作一個上傳圖片列表的原型模板，具體效果如下所示：

一、原型效果

1、點擊上傳方框，打開顯示本地資源的窗口，里面可以選擇本地的資源。

2、如果選擇的不是圖片格式，彈出彈窗提示。

3、如果選擇的是圖片格式，將圖片回顯，然后顯示下一個上傳方框。

二、原型預覽

https://axhub.im/ax9/ca3dd539f46dc856/#g=1&p=上傳圖片（列表效果2）

三、原型下載

1. 加入原型分享群后，可免費分享該原型
2. https://weidian.com/item.html?itemID=3856417707

四、制作教程

1. 材料準備

這里需要的材料很簡單主要包括一個上傳框的圖片，一個文本框和一個文本標簽。

圖片我們命名為vigopic1，文本框命名為vigotext1，文本標簽命名為click1。

圖片默認選擇上傳框的圖片。

文本標簽，用于觸發后續交互。

文本框輸入類型選擇輸入框，我們通過js代碼可以調用選擇本地圖片，選擇圖片后進行回顯，之前在上傳圖片那章教程里面，有詳細講解，大家可以先去學習那章教程，然后再回來學習上傳之后怎么觸發繼續上傳新的圖片。

整體擺放如下圖所示，只顯示圖片，文本標簽和文本框放置在圖片底部，用圖片遮擋著他倆。

如果想做成列表，我們需要總共上傳多少個，就復制幾個，例如朋友圈案例是最多上傳9個，那就復制多8個，總數九個，前面只有第一個默認顯示，后面的默認隱藏即可，然后擺放整齊就可以了，本演示案例是做了一個最多上傳12張圖片的案例，如果有需要更多的，也可以按照下面方法自行添加。

對了，因為js代碼是根據元件名來上傳和回顯的，所以文件名要唯一，前面第一個組合，我們把圖片命名為vigopic1，文本框命名為vigotext1，文本標簽命名為click1；那第二個組合就要改成圖片命名為vigopic2，文本框命名為vigotext2，文本標簽命名為click2；那第3個組合就要改成圖片命名為vigopic3，文本框命名為vigotext3，文本標簽命名為click3……如此類推。2. 交互制作

在原有的代碼基礎上，我們可以增加一個判斷，就是上傳的是否為圖片格式，常見的圖片格式包括png、jpg、jpeg，案例中用的是這三種格式，如果需要增加其他圖片格式，可以自行添加代碼如：

if(fileType==”image/png”||fileType==”image/jpeg”||fileType==”image/jpg”)

如果上傳不符合格式，我們用 alert代碼，調出系統彈窗提示即可，例如 alert( “請上傳圖片（格式JPG、JPEG、PNG）!”)；

如果上傳的格式符合，那就回顯圖片，這里和之前上傳圖片不同的是，回顯之后，我們要顯示下個一個上傳框，以第一個上傳框上傳回顯后為例，我們要從代碼回到axure的元件里面，這里我們需要借助文本標簽click1，我們在文本標簽鼠標單擊時，我們用顯示的交互，將第二個組合顯示出來就可以了。

現在剩下的問題就是，上傳回顯完之后，怎么觸發這個文本標簽鼠標單擊的事件呢？

我們可以在代碼里增加一行，用jQuery 事件 – click 方法，模擬點擊按鈕（或執行點擊按鈕時的操作），我們要選擇Axure里名為click1的元件，相當于選擇頁面中標有 data-label 屬性值為 ‘click1′ 的元素，所以整行代碼是(“[data-label=’click1’]”).click;選擇頁面中標有 data-label 屬性值為 ‘click1’ 的元素，并模擬用戶對這個元素的點擊，點擊之后就觸發上面單擊時的交互，顯示第一個組合。

組合2的話也是同一個原理，我們把圖片命名為vigopic1、文本框命名為vigotext1、文本標簽命名為click1的目的也是為了方便后續修改，在第二個組合里的，我只需要代碼和名字里的’1’改成’2’，然后交互事件顯示組合2改成顯示組合3就可以了，改起來也非常方便。

后續的345678……組合，也是同一個道理。

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。

本文由人人都是產品經理作者【AI產品人】，微信公眾號：【Axure高保真原型】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議。

簽屬性命名規范

下劃線連接符命名法“hello_world”

中杠 連接符命名法“hello-world”

駱駝式命名法“helloWorld”

　　內容：content/container 導航：nav 側欄：sidebar 　 　
　　欄目：column 標志：logo 頁面主體：main 　　
　　廣告：banner 熱點：hot 新聞：news
　　下載：download 子導航：subnav 菜單：menu
　　搜索：search 頁腳：footer 滾動：scroll
　　版權：copyright 友情鏈接：friendlink 子菜單：submenu
　　內容：content 標簽頁：tab 文章列表：list
　　注冊：regsiter 提示信息：msg 小技巧：tips
　　加入：joinus 欄目標題：title 指南：guild
　　服務：service 狀態：status 投票：vote
　　 尾：footer 合作伙伴：partner 登錄條：loginbar
　　頁面外圍控制整體布局寬度：wrapper 左右中：left right center 　　
　　
　　(二)注釋的寫法:
　　/* Footer */
　　內容區
　　/* End Footer */
　　
　　(三)id(具有唯一性)的命名:
　　
　　(1)頁面結構
　　容器: container 頁頭：header 內容：content/container
　　頁面主體：main 頁尾：footer 導航：nav
　　側欄：sidebar 欄目：column 左右中：left right center
　　頁面外圍控制整體布局寬度：wrapper
　　(2)導航
　　導航：nav
　　主導航：mainbav
　　子導航：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.盡量不縮寫，除非一看就明白的單詞. （偷懶經常縮寫）
　　主要的 master.css 模塊 module.css 基本共用 base.css
　　主題 themes.css 專欄 columns.css 打印 print.css
　　文字 font.css 表單 forms.css 補丁 mend.css
　　布局，版面 layout.css