示：点击上方"蓝色字体"↑ 可以订阅噢！

摘要 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