CSS的class、id、css文件名的常用命名规则
(一)常用的CSS命名规则
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav可以500%提高开发效率的前端UI框架!
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:可以500%提高开发效率的前端UI框架!
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status可以500%提高开发效率的前端UI框架!
按钮: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.尽量不缩写,除非一看就明白的单词.可以500%提高开发效率的前端UI框架!
主要的 master.css
模块 module.css
基本共用 base.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
CSS文件中class或id起名规则:
1) 开头字母一律小写
2) 尽量不要用缩写英文除非可以一目了然的
3) 如果遇到相差不大class或者id,主功能识别字母在前,位置识别字母在后,位置识别字母第一个可大写(如:navTop,menuLeft)
4) 必须使用英文开头可以500%提高开发效率的前端UI框架!
css文件内容注释写法:
Css文件内容注释统一采用:
/*
注释内容
*/
css文件存放位置:
所有css文件统一存放,例如在根目录下的style目录下 。
相关推荐
整理了一些CS中常用Class名,包括class、id 、css文件名的常用命名规则
希望能帮助到平时为一堆补丁文件class(自动包含class内部类),jsp,html,js,css,xml,jar等文件花费很长时间整理的朋友,有了我这个工具,似乎这一切都变得简单,你只需要选择路径,然后在输入你的补丁文件名,程序...
Cyotek Spriter 快速包装一个简单的工具,您... 如果未指定,则不会生成 CSS class - 基本 CSS 类名称。 如果/css未设置,则忽略如您所见,这是一件非常简单的事情! 笔记! 该工具将在没有提示的情况下覆盖输出文件
拖放区jQuery图像上传器插件参数: nameClass 上传文件名设置上传文件名单元格CSS类progressClass 上传进度栏设置进度条包装器块CSS类lineClass 上传进度行设置进度条块CSS类PreviewClass 上传预览设置图像预览块CSS...
V1.0.1(不断更新中,欢迎讨论建议) ...目录 一、命名规则… 1 二、CSS书写规范… 2 三、JS书写规范… 2 四、Vue.js书写规范… 3 4.1单个.vue文件书写规范… 3 4.2 Vue.js组件相关规范… 3 ...4.css的class名称全部
一 Jeecms安装过程 ...<id name="id" type="java.lang.Integer" column="id"><generator class="identity"/></id> <property name="title" column="title" type="java.lang.String" not-null="true" /> ...
源码所用技术:HTML、CSS、JQuery 修改照片方法: 1.将照片文件名保存为1.jpg-27.jpg,存储到源码文件的img文件夹中,因为爱心造型共可存放27张照片。 2.照片宽高比最佳尺寸700*700像素,具体尺寸可参考img文件中的...
* @param $content string PDF文件内容 若为html代码,css内容分离 非id,class选择器可能失效,解决办法直接写进标签style中 * @param $filename string 保存文件名 * @param $css string css样式内容 */ ...
如想减少照片数量,可删除源码中class名为“box”下的div数量。 修改文字内容:做上方文字:打开index.html找到源码中的第601行,替换str引号里的文字内容即可。 修改文字内容:做上方文字:打开index.html找到源码...
希望能帮助到平时为一堆补丁文件class(自动包含class内部类),jsp,html,js,css,xml,jar等文件花费很长时间整理的朋友,有了我这个工具,似乎这一切都变得简单,你只需要选择路径,然后在输入你的补丁文件名,程序...
最小化内部版本,文件名包含哈希值。 您的应用程序已准备好部署! 有关更多信息,请参阅有关的部分。 yarn eject 注意:这是一种单向操作。 一旦eject ,就回不去了! 如果您对构建工具和配置选择不满意,您可以...
" class="b"> <input type="button" class="b" value="关闭" onclick="window.close();"> </td></tr> End Sub '保存编辑文件 Sub SaveEdit(ByVal Fname) Dim oFile,FileStr Set oFile=oFso.OpenTextFile(Fname...
向浏览器添加一个SVG导出按钮,该按钮将页面上显示的SVG DOM元素作为包含CSS的文件输出。 将网页上的所有SVG DOM元素(现在包括同源IFrame...使用稍微有用的文件名(svg元素的id和class)保存svg 支持语言:English (UK)
class UploadFiles{ private $maxsize = '1000000'; //允许上传文件最大长度 private $allowtype = array('jpg','png','gif','jpeg');//允许上传文件类型 private $israndfile = true;//是否随机文件名 private ...
增加 fixCellHeight 选项用于禁用自动调整行高(行高可以使用 CSS 设定,从而避免每次自动计算提示了性能),默认为 true(启用自动调整,行为与之前的版本一致); 仪表盘: 修复面板配置中的 panelAttrs 和 ...
list:表情列表,例:{test1:'表情1',test2:'表情2'},键名代表文件名,扩展名必需为gif,键值代表alt信息 width:单个表情区域宽度,必需大于或等于表情最大宽度 height:单表情区域高度,必需大于或等于表情...
夹板用于修改网页的命令行工具。...您可以使用jQuery样式选择喜欢".class"和文件名中包含通配符"*.html"如果你使用" 。壳您可以使用以下命令打开外壳: cleat open " *.html "命令列表默认将文本设置
3. 将文件按要求保存(注意保存位置以及网页文件名); 4. 打开“资源管理器”或”我的电脑”,打开以上所建的网页文件的文件夹,双击网页文件,用IE浏览器浏览; 5. 若有问题,在编辑器中修改代码,保存,在IE浏览...
* CSS :UTF-8 * JS、JSP :UTF-8 * * 后台: * java :UTF-8 * * 数据库: * mysql、oracle、DB2 :UTF-8 * * 开发工具:UTF-8 * 2. 文本...
文件的命名规则与书中相应源代码文件名一致。读者可将相关文件夹(如ch2)拷贝到Tomcat服务器安装目录的子目录webapps下,并启动Tomcat服务器,在浏览器中浏览网页。 表1 第1章 序号 文件名称 位置 说明 1 ...