div+css命名规则
作为一个前端菜鸟,进公司的第一个项目就是中途从外包公司接过来的公司网站,在别人写过了的基础上接着写,命名什么的,简直不要太痛苦。
目前,这个网站已经完成,但是被后台人员指出命名不规范。有心想解释一两句,但是又觉得的这一个月在命名上的折腾,的确让我对命名规范都模糊了不少。
在看了一些css样式命名规则后,我做了一些笔记。
一、命名规则说明
1.所有的命名最好都小写
2.属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
3.每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
4.空元素要有结束的tag或于开始的tag后加上"/"
5.表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
6.<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
7.给每一个表格和表单加上一个唯一的、结构标记id
8.给图片加上alt标签
9.尽量使用英文命名原则
10.尽量不缩写,除非一看就明白的单词
11.在外框楼层太多,无法具体命名的情况下,可以使用af、bf、cf来区别命名
二、相对网页外层重要部分CSS样式命名
外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容(中部)
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
三、注释
/* Header */
内容区
/* End Header */
四、常用的css命名
页面外围控制整体佈局宽度:wrapper
布局:layout
头部:header/head
底部:footer/foot
导航:nav 二级导航:subnav
侧边栏:sidebar 左侧边栏:leftsidebar 右侧边栏:rightsidebar
栏目:column
主要内容区:main 内容区:content/container
菜单:menu 子菜单:submenu
左右中:left right center
登录:login
登录条:loginbar
标志:logo
广告:banner
热点:hot
新闻:news
箭头:arr/arrow
下载:download
搜索:search
搜索输入框:searchInput
搜索结果:search_result
搜索条:searchbar
友情链接:friendlink
滚动:scroll
下拉:drop
下拉菜单:dropmenu
标签:tags
文章列表:list
提示信息:msg/message
摘要:summary
当前的: current
小技巧:tips
图标: icon
注释:note
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
常见问题:faqs
编辑评论:editor_review
关键词:keyword
博客:blog
论坛:forum
合作伙伴:partne
网站信息:siteinfo
网站地图:sitemap
版权:copyright
商标:branding
下面是一些关于产品类的命名:
产品:products/product
产品价格:products_prices
产品描述:products_description
产品评价:products_review
最新产品:news_release
生产商:publisher
缩略图:screenshot
注意:
在命名时使用id还是class都可以,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用id命名,其它都用class命名,同时考虑命名的css选择器在HTML中的可重用性。
div+css命名规则的更多相关文章
- 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:
页头:header 如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar 标志:logo ...
- div+css 命名规则
编写网页的时候,一般都没有把命名规则认真对待.在结合语义以及搜索优化两方面给出了一套命名方案,对增强阅读性.规范性和提高开发效率是有帮助的,当然,这方面的规范,仁者见仁智者见智,网上有许多前辈们以经验 ...
- 增强SEO的div+css命名规则
页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页 ...
- div+css命名规范大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么 ...
- DIV+CSS命名规范-转载1
命名规则说明: 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divc ...
- DIV+CSS命名参考
用了一段CSS布局设计网页,发现自己的命名有点混乱,完全按照自己的想法命名,虽然没什么影响,有不给别人看源文件,但是工作室有时候和团队合作完成项目的时候,就遇到麻烦了,要修改一个地方相当的费事.所以还 ...
- [转]HTML DIV+CSS 命名规范大全
原文链接 常用DIV+CSS命名大全集合,即CSS命名规则 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. ...
- CSS命名规则和如何命名
CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...
- 常用DIV+CSS命名大全集合
一.命名规则说明: - TOP 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",i ...
随机推荐
- 【BZOJ3140】消毒(二分图匹配)
[BZOJ3140]消毒(二分图匹配) 题面 Description 最近在生物实验室工作的小T遇到了大麻烦. 由于实验室最近升级的缘故,他的分格实验皿是一个长方体,其尺寸为abc,a.b.c 均为正 ...
- 【HNOI2004】敲砖块(动态规划)
越来越懒了,不想粘题目 题解 样例的输入是个很好的提醒, 把他往左边对齐之后 如果要打掉某个位置,那么必须要打掉右上方的所有砖 然后就很明显的一个DP了.... #include<iostrea ...
- 【洛谷1129】 [ZJOI2007]矩阵游戏
题面 题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作: ...
- [Lugu3380]【模板】二逼平衡树(树套树)
题面戳我 您需要写一种数据结构来维护一个有序数列,其中需要提供以下操作: 1.查询k在区间内的排名 2.查询区间内排名为k的值 3.修改某一位值上的数值 4.查询k在区间内的前驱(前驱定义为严格小于x ...
- [COGS2701]:动态树
题面 传送门 Sol LCT维护子树和 # include <bits/stdc++.h> # define IL inline # define RG register # define ...
- 关于input 的选中,自定义input[type="checkbox"]样式
1.css 呈现 选中后 的input的样式可以用 /*背景图*/ background:url('../pc/images/archives/icon_choosed.png') no ...
- 如何直接在github上预览html网页效果
http://justcoding.iteye.com/blog/2321552 2.vue 配合vue-resource调用接口,获取数据 https://www.cnblogs.com/fei ...
- Linux 下 vim 编辑文件,解决中文乱码,设置Tab键空格数
vim编辑文件的时候,输入中文就出现乱码 解决办法: 以哪个用户登录的就在哪个用户目录下创建文件 vimrc vim .vimrc (.创建的是隐藏文件) 文件内容: set tabsto ...
- Lucene就是这么简单
什么是Lucene?? Lucene是apache软件基金会发布的一个开放源代码的全文检索引擎工具包,由资深全文检索专家Doug Cutting所撰写,它是一个全文检索引擎的架构,提供了完整的创建索引 ...
- Spring源码学习:第2步--使用SLF4j+Log4j日志框架替换掉其自身的commons-logging日志框架
正如Spring官方文档所述,其底层的实现选择了commons-logging作为日志框架.这一"失足"性的选择,竟连Spring自身都抱怨.但是,谁叫Spring如此优秀呢,即使 ...