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

转载于:https://www.cnblogs.com/zmx120/p/5649562.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470411.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 查询sqlserver 视图_SQL Server查看视图定义总结

在SQL Server中如何查看数据库视图的定义呢? 其实官方文档已经有一个较详细的总结了,这里在官方文档的基础上,我们再深入展开分析一下,例如如何获取系统视图的定义。知其然知其所以然吗。1:使用SQL Server Management …

WebSocket实现实时通信

WebSocket 是一种数据通信协议,也是用于客户端和服务端数据通信,类似于我们常见的 http 既然有 http,为啥还要 WebSocket http 通信是单向的 请求 响应 没有请求也就没有响应 初次接触 WebSocket 的人,都会问同样的问题&#xf…

response.setContentType()的作用及MIME参数详解

转自脚本之家 原文http://www.jb51.net/article/32773.htmresponse.setContentType(MIME)的作用是使客户端浏览器,区分不同种类的数据,并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据,本文详细介绍,需要了解的朋友可以参考…

使用socket.io搭建一个实时聊天机器人

一、安装socket.io npm i socket.io --save二、使用 第一种:服务端使用原生node // 创建http服务器 const http require(http) var fs require(fs) const app http.createServer()app.on(request, (req, res) > {fs.readFile(__dirname /index.html, funct…

真随机和伪随机区别_用骰子DIY真随机助记词 | 火星号精选

免责声明:本文旨在传递更多市场信息,不构成任何投资建议。文章仅代表作者观点,不代表火星财经官方立场。小编:记得关注哦

EasyDarwin开源流媒体服务器性能瓶颈分析及优化方案设计

EasyDarwin现有架构介绍 EasyDarwin的现有架构对网络事件的处理是这样的,每一个Socket连接在EasyDarwin内部的对应存在形式就是一个Session,不论是RTSP服务对应的RTSPSession,还是HTTP服务对应的HTTPSession,都是一个继承自Task类…

python对文件的写操作方法writetext_用python实现读写文件常见操作方式

1 文件读取全文本操作在一定场景下我们需要把文本全部内容读取出来,进行处理。python提供三种函数读取文件,分别是read readline readlines,read():读取文件的全部内容,加上参数可以指定读取的字符。readline()&#…

Vue 中的组件缓存

一、介绍 先来看一个问题? 从首页的区块链模块切换到文章详情页面,再从文章详情页面回到首页,我们发现首页重新渲染原来的状态没有了,又回到了推荐模块。 首先,这是正常的状态,并非问题,路由…

SQLlite 分页

如果我要去11-20的Account表的数据 Select * From Account Limit 9 Offset 10; 以上语句表示从Account表获取数据,跳过10行,取9行 嗯,我觉得这个特性足够让很多的web中型网站使用这个了。 也可以这样写 select * from account limit10,9和上面…

thief book怎么用_战略管理工具箱--30个好用的战略管理好工具

-原创转载请告知-十年多年前,在上海做咨询的时候,曾经在书店买了一本《战略管理工具箱》的Poket小书,一直看一直看,里面包含常用的战略管理工具(30个),虽然不用都用上,用其中几个常用…

Vue中使用axios的响应拦截器处理请求失败的情况(处理token过期问题)以及 登录成功跳转回原来页面问题

参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态代码都会触发此函数,这里主要用于处理响应数据response > {return response},// 任何超出2xx范围的状态码都会触发此函数&#xff0…

cocoapods 命令

1.使用CocoaPods a 新建一个项目,名字cocoapods b 终端中,cd到项目总目录(直接拖过来) [objc] copy? cd /Users/pengjian/Desktop/cocoapodsc 建立Podfile(配置文件) 接着上一步,终端输入 v…

Vue项目中使用 路由导航守卫 处理页面的访问权限

参考Vue-Router官方文档 Vue-Router导航守卫 效果展示 1、给需要登录状态才能访问的页面路由对象的 meta 中添加配置属性 { // 小智同学name: user-chat,path: /user/chat,component: () > import(/views/user-chat),meta: { requiresAuth: true } },2、通过路由拦截器…

python的最受欢迎的库_2018年最受欢迎的15个Python库

2018 年最受欢迎的15个顶级 Python 库作者 | Goutham Veeramachaneni近日,数据科学网站 KDnuggets 评选出了顶级 Python 库 Top15,领域横跨数据科学、数据可视化、深度学习和机器学习。如果本文有哪些遗漏,你可以在评论区补充。图 1&#xff…

失败,因为你其实太过傲慢

因为你太过傲慢,不肯放低姿态去向他人学习,勤加练习,所以失败。转载于:https://www.cnblogs.com/panie2015/p/5667464.html

Uniapp学习笔记(数据展示、数据循环、条件编译、计算属性、组件的使用、组件插槽、生命周期)

1.项目准备 1.1开发方式 uni-app为我们提供2种开发方式: 使用DCloud公司提供HBuilderX工具来快速开发; 使用脚手架来快速开发(我们这次项目使用此方式); 1.2脚手架搭建项目 全局安装,如果你以前安装过…

word图片嵌入式为何只能看到一部分_Word排版的正确姿势!(Word论文排版教学)...

Hello,最近正值着手写毕业论文的初期,趁着这个时间点,我做了一个简易的,简单的,0基础的Word论文排版教学,帮助你在撰写论文的时候不再花费大量的时间浪费在调整格式里。初次做视频,难免有错误&a…

云计算三种服务模式SaaS、PaaS和IaaS及其之间关系(顺带CaaS、MaaS)

云计算架构图 很明显,这五者之间主要的区别在于第一个单词,而aaS都是as-a-service(即服务)的意思,这五个模式都是近年来兴起的,且这五者都是云计算的落地产品,所以我们先来了解一下云计算是什么…

python多线程和异步性能对比_python对比线程,进程,携程,异步,哪个快

目录概念介绍测试环境开始测试测试【单进程单线程】测试【多进程 并行】测试【多线程 并发】测试【协程 异步】结果对比绘图展示概念介绍首先简单介绍几个概念:进程和线程进程就是一个程序在一个数据集上的一次动态执行过程(数据集是程序在执行过程中所需要使用的资…

uni-ui介绍uni-api

一、uni-ui介绍 安装 二、uni-api 解决uni-app中的跨域问题: "h5" : {"router" : {"mode" : "hash"},"devServer": {"https": false,"proxy": {"/web": {"target": …