html图标命名,html 命名规范
命名规范
header 头部 menu菜单栏 banner导航栏 show显示
不能使用拼音 或汉语
不能使用数字开头命名
可以用下划线或横杠命名 ,一般用来拼两个名字
命名的两种方式
class类命名:指代一类用法
可以使用多个类命名
id命名
具有唯一性
企业命名规范
标题: title
摘要: summary
箭头: arrow
商标: label
网站标志: logo
转角/圆角: corner
横幅广告: banner
子菜单: subMenu
搜索: search
搜索框: searchBox
登录: login
登录条:loginbar
工具条: toolbar
下拉: drop
标签页: tab
当前的: current
列表: list
滚动: scroll
服务: service
提示信息: msg
热点:hot
新闻: news
小技巧: tips
下载: download
栏目标题: title
热点: hot
加入: joinus
注册: regsiter
指南: guide
友情链接: friendlink
状态: status
版权: copyright
按钮: btn
合作伙伴: partner
投票: vote
左/右/中:left/right/center
简介:profiles
评论:comment
ID命名
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
(3)功能
标志:logo
广告:banner
登陆:login
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
新闻: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 { }
(5)图标库的引用
1.字体图标的颜色
i { color:#ddd; }
2.字体图标的大小
i { font-size:20px; }
3.字体图标的位置
i { transform-translateY(30%); }
标签嵌套遵循的规则
p dt h标签 里面不能嵌套块属性标签
a标签不能嵌套a标签
块级元素可以包含内联或某些块级标签
行内元素可以嵌套行内元素 特殊:a标签不能嵌套a标签
初级选择器
*通配符选择器 选择到所有的标签
标签选择器 选择到所对应的tag标签
类选择器 (class) 选择到.class所对应的类
id选择器 选择到id命名的元素
后代选择器 之间是空格 是选择到tag1里面的子元素tag2
div.p 是选择到是div标签 他的名字是p
标签要语义化
背景属性
background-image 背景图片 会覆盖背景颜色
background-repeat 背景平铺 background-repeat:repeat-x 水平方向平铺 repeat-y 垂直方向平铺
background-color 背景颜色
background-position 背景定位 方位值
x水平方向: left center right
%
px距离上边
y垂直方向: top bottom center
%距离左边
px
background-size 背景图片的大小 只给一个值 第二个会默认auto
x:px %
y: px contain 等比例缩放x轴和y轴 直到接触到边缘为止
背景图片综合写法 color image repeat position /size cover 按照盒子最大边等比例缩放
background-attachment:fixed
3人点赞
作者:吡啵吡啵萌萌哒
链接:https://www.jianshu.com/p/b610f9d707e9
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
html图标命名,html 命名规范相关推荐
- mysql中对象标识符的命名规则,标准规范数据库命名规范.doc
标准规范数据库命名规范 数据库命名规范 概述 基本原则 以大小写敏感编写SQL语句. 尽量使用Unicode 数据类型. 优先使用连接代替子查询或嵌套查询. 尽量使用参数化SQL查询代替语句拼接SQL ...
- Oracle数据库建表 Oracle数据库的统一命名与编码规范
本文转载自:http://chinaxxren.iteye.com/blog/889590 如有疑问请咨询原博主,谢谢!! 写在前边: 规范是一种习惯,在Oracle数据库中笔者认为表中的字段命名规范 ...
- ORACLE数据库的统一命名与编码规范
1.编写目的 使用统一的命名和编码规范,使数据库命名及编码风格标准化,以便于阅读.理解和继承. 2.适用范围 本规范适用于公司范围内所有以ORACLE作为后台数据库的应用系统和项目开发工作. 3.对象 ...
- 解读ORACLE数据库的统一命名与编码规范
1.编写目的 使用统一的命名和编码规范,使数据库命名及编码风格标准化,以便于阅读.理解和继承. 2.适用范围 本规范适用于公司范围内所有以ORACLE作为后台数据库的应用系统和项目开发工作. 3.对象 ...
- Java/C/C++标识符命名规则和规范
Java/C/C++标识符命名规则和规范 本篇文章是关于标识符的命名规则和命名规范的总结,有助于像作者本人一样的初学者或是知识模糊需要复习的小伙伴. 命名规则: (1).由26个英文字母大小写,数字0 ...
- python变量命名规则与规范(约定)
引子 前些日子,大大的一位友友问了我一个问题,表示了对命名规范的不解.确实如此关于命名规范有一套相对严谨而复杂的理论,大大在此特就python的变量(以及函数和对象)命名规则与规范进行讲述. 规则 规 ...
- 变量的命名规则及规范
变量的命名规则及规范 规则 可以包括数字.字母.下划线.$ 不能以数字开头 严格区分大小写 不能有空格 不能是关键字或保留字 规范 变量的名尽量有意义 遵循驼峰命名规则 a.大驼峰(UserName) ...
- sql server(MsSql)字段命名,表命名,视图命名,SQL语句书写参考
@[TOC](sql server(MsSql)字段命名,表命名,视图命名,SQL语句书写参考) 对我个人来说,字段命名,表命名,视图命名,SQL语句书写都有一套自己的习惯,可以减少维护成本.减少不必 ...
- 编写高质量的代码—从命名入手(命名…
编写高质量的代码-从命名入手(命名规范) 笔者从事开发多年,有这样一种感觉,查看一些开源项目,如Spring.Apache Common等源码是一件赏心悦目的事情,究其原因,无外两点:1)代码质量非 ...
- hive 给未命名字段命名
** hive 给未命名字段命名 ** hive中有时候create table新生成表格时候忘记命名一些通过函数计算之后生成的列. 如果没有命名,hive会帮忙取一个列名,名字我这里是_c0这样的格 ...
最新文章
- WEB攻击手段及防御第1篇-XSS
- VTK:Utilities之ArrayCalculator
- 用Python轻松开发数据库取数下载工具
- [leetcode] 68.二叉树的最近公共祖先
- python 禁用网卡_如何编程实现启用禁用网卡
- 华为路由器配置DHCP中继
- 傅里叶级数与复的傅里叶级数、傅里叶变换
- AD18原理图到PCB流程
- 数学建模——模糊数学
- 商城管理系统源码 商城APP源码 电子商城源码
- C语言求1000后面有多少个0,c语言题目计算1000!的末尾有多少个零
- 高低压配电柜温度在线监测系统解决方案
- python基础(八):进制转换及python中的进制转换方法
- mpeg4和mp4格式一样吗?
- 洛谷 P1049 装箱问题
- 读论文:(nvdiffrec) Extracting Triangular 3D Models, Materials, and Lighting From Images
- vncserver密码修改
- R语言一般线性模型(涉及因变量是虚拟变量(哑变量))
- GaussDB200 部署
- webmail 客户端_开源Webmail客户端Isotope入门
热门文章
- Android 根据应用内选择时间调整TextClock时区
- android Logcat打印格式说明
- 一个基于WinHttp的轻量级的分片下载库介绍
- python计算md5码
- 序号47指标横向展示.xlsx_杭州增加2万个小客车指标!想拥有“浙A”车牌,这个APP一定要收好~...
- 阴历日期和阳历日期互相转换(java)
- linux中进程unit是什么意思,Unit(linux)基础命令
- iOS 299美元企业账号申请流程及注意事项
- SolidWorks to URDF转换及常见机器人模型
- 微型计算机日常的应用领域,计算机的应用领域有哪些?