html css 命名规范,浅谈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
注册:regsiter
状态态:status
投票:vote
合作伙伴:partner
注释的写法
/* Footer */
内容区
/* End Footer */
id的命名
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
id的命名
页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
功能
标志: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
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
以上就是小编为大家带来的浅谈css命名规则(新手必看)全部内容了,希望大家多多支持脚本之家~
html css 命名规范,浅谈css命名规则(新手必看)相关推荐
- css中字体下划线样式,css下划线 浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
- css inport作用,浅谈css和@import区别及用法详解
下面小编就为大家带来一篇浅谈css和@import区别及用法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法. 一.用法 ...
- Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍 选择器权重 字体属性 文本属性 元素分类 display属性: 块状元素 行内元素 行内块元素 盒模型 内边 ...
- 浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言 在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从 什么是CSS ...
- html 怪异模式,CSS_浅谈CSS编程中的怪异模式,怪异模式盒模型
今天学习了 - phpStudy...
浅谈CSS编程中的怪异模式 怪异模式盒模型 今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...
- php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上,如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上 如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
- Mysql存储过程名规则_数据库对象命名规范一(原则、命名、 表、视图、存储过程、函数、触发器命名规范)...
命名规范是指数据库对象如数据库(SCHEMA).表(TABLE).索引(INDEX).约束(CONSTRAINTS)等的命名约定. 1. 原则命名使用具有意义的英文词汇,词汇中间以下划线分隔. 命名只 ...
- linux系统pkl,(网摘)Linux新手必看:浅谈如何学习linux
地址:http://www.eimhe.com/bbs/viewthread.php?tid=53256&extra=page=1> Linux新手必看:浅谈如何教习linux 一.起步 ...
- css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发 来源 | web前端开发 我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
最新文章
- 【连载】【黑金动力社区原创力作】《液晶驱动与GUI 基础教程》 --序言(一)
- sql server2008禁用远程连接
- oracle 存储同步,Oracle数据库知识——存储过程篇
- 程序员面试金典 - 面试题 03.01. 三合一(数组栈)
- 网友评论:Struts漏洞为什么来势凶猛
- c3p0连接错误 An attempt by a client to checkout a Connection has timed out.
- cpc卡内计费信息异常包括_抖音信息流广告投放收费标准是什么?抖音发一个广告多少钱?...
- 数据库学习笔记3-隔离级别 Read Uncommitted
- EAN13商品条码数据如何居中显示
- Vue+ele 列表不同页列表序号累加
- 中兴a2018拆机图片_中兴a2s拆机视频
- CuraEngine源码编译
- 笔记类app之Leanote同步机制 韩俊强的博客
- 朱刘算法 有向图的最小生成树
- [论文阅读]A Joint Training Dual-MRC Framework for Aspect Based Sentiment Analysis
- 对NVMe SSD热插拔时,我需要注意什么?
- 字符实体:在 HTML 中显示小于号 ()
- grafana 实现自定义主题 Boom Theme
- PLC编程与应用培训课程_PLC系统认知
- 1,2,5相加为100 方法总数
热门文章
- Maven 多环境配置profile
- Linux中的sed命令
- fastapi 的启动方式
- SpringMVC开发框架中使用@ResponseBody注解后返回的json字符串中文乱码问题
- 计算机的需求配置,软件最佳运行对计算机配置最低要求怎样?
- android 日志泄露,安卓Hacking Part 4:非预期的信息泄露(边信道信息泄露)
- SqlServer驱动包不同,取出数据的编码居然不同
- 微服务之间的调用方式RestTemplate和FeignClient
- springboot 文件上传 设置文件大小配置
- python time模块和random 模块