html5 图片命名,html5 css命名规范

一、注意事项:

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要 master.css

模块 module.css

基本共用 base.css

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

5.坚持以字母开头命名选择器，这样可保证在所有浏览器下都能兼容。

二、常用的css命名规则

头：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

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

状态：status

投票：vote

合作伙伴：partner

三、注释的写法:

内容区

四、id的命名:

(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

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guide

服务：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 { }

html5 图片命名,html5 css命名规范相关推荐

html5图片邀请函,html5,邀请函.doc
html5,邀请函 html5,邀请函看来HTML5的浪潮又要让我们的广告客户浑身湿透了.他们想要华丽的页面,想要让用户觉得他们很酷.事实上,即使他们只做了一张很廉价的"活动邀请函&quo ...
html怎么给div命名,div+css命名规则和技巧
对于新手来说,命名是一件很头疼的事情,各种div的镶嵌,命名的不好吧,可能要找半天才找到. 这是我从网上收集到的一些命名的技巧和规则. 命名的规则 1.所有的命名最好都小写,尽量不要大写和小写掺和着用 ...
html5图片的纵向排列,css让图片横着排列的方法
css让图片横着排列的方法发布时间:2021-01-11 11:52:50 来源:亿速云阅读:197 作者:小新这篇文章给大家分享的是有关css让图片横着排列的方法的内容.小编觉得挺实用的,因此 ...
html5 图片拱形旋转,CSS DIV拱形边框的图片
效果: 测试代码: .pic { width: 400px; height: 200px; background: url(tiger.png) no-repeat; } .shadow { posi ...
HTML5图片裁剪工具 HTML5 image crop tool
这是一篇介绍如何利用HTML5的canvas标签来裁剪图片的教程.图片裁剪的典型应用就是网站的头像裁剪.利用HTML5来裁剪图片,只需要在客户端实现,不需要将坐标数据发送至服务器端. 第1步. HTM ...
html5 图片羽化,html5+webgl仿ps羽化笔刷液态动画特效
html5 canvas基于webgl制作的仿ps羽化笔刷液态动画特效,羽化笔刷跟随鼠标移动绘画,很有梦幻效果. 查看演示下载资源: 5 次下载资源下载积分: 20 积分 js代码 attrib ...
html5 图片弹跳,html5 canvas画布里面圆球弹跳动画效果代码
特效描述:html5 canvas 画布圆球弹跳动画.html5 跳动的球体代码结构 1. HTML代码 Untitled Document body { margin: 0px; } var i ...
[转]常用的CSS命名规则
(壹)常用的CSS命名规则头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrappe ...
『前端规范化』CSS命名规范化
CSS命名规范化 CSS命名规范化,有利于代码阅读和维护,在大型项目及团队协作开发中有着重要的意义.这里我推荐采用BEM命名规范+适当的语义理解简写.因为BEM命名常常会因为太长而被人诟病,所以适当加 ...
html语言书写注意事项,CSS命名规范参考及书写注意事项
CSS书写顺序 *{ /*显示属性*/ display position float clear cursor - /*盒模型*/ margin padding width height /*排版*/ ...

html5 图片命名,html5 css命名规范

html5 图片命名,html5 css命名规范相关推荐

最新文章

热门文章