qingshandaiyue
命名规则说明:
1)、所有的命名最好都小写
2)、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
4)、空元素要有结束的tag或于开始的tag后加上"/"
5)、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
6)、<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
7)、给每一个表格和表单加上一个唯一的、结构标记id
8)、给图片加上alt标签
9)、尽量使用英文命名原则
10)、尽量不缩写,除非一看就明白的单词
 
CSS书写顺序:
  1.位置属性(position, top, right, z-index, display, float等)
  2.大小(width, height, padding, margin)
  3.文字系列(font, line-height, letter-spacing, color- text-align等)
  4.背景(background, border等)
  5.其他(animation, transition等)
 
通常我们最常用主要命名有:
wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它可根据自己需要选择性使用。
DIVCSS5建议:主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。
about      关于
account      账户
action    操作
ad,advertisment     广告
arrow      箭头图标
article     文章
aside      边栏
audio      音频
avatar      头像
background     背景
banner      条幅,广告
bar      条
branding      品牌化
breadcrumbs    面包屑
button      按钮
caption    标题,说明
category      分类
chart      图表
clearfix      清除浮动
close      关闭
column      列
comment      评论
community      社区
container      容器
content      内容
copyright      版权
current      当前态,选中态
default      默认
description      描述
details      细节
disabled      不可用
entry      文章,博文
error      错误
even      偶数,常用于多行列表或表格中
fail      失败(提示)
feature      专题
fewer      收起
field      用于表单的输入区域
figure      图
filter      筛选
first      第一个,常用于列表中
footer      页脚
forum      论坛
gallery      画廊
group      模块,清除浮动
header      页头
help      帮助
hide      隐藏
hightlight      高亮
home      主页
icon      图标
information      信息
last      最后一个,常用于列表中
links      链接
login      登录
logout      退出
logo      标志
main     主体
menu     菜单
meta     作者、更新时间等信息栏,一般位于标题之下
module     模块
more     更多(展开)
msg,message     消息
nav,navigation     导航
next     下一页
nub     小块
odd     奇数,常用于多行列表或表格中
off     鼠标离开
on     鼠标移过
output     输出
pagination     分页
popup     弹窗
preview     预览
previous     上一页
primary     主要
progress     进度条
promotion     促销
recommendations     推荐
register     注册
save     保存
search     搜索
secondary     次要
section     区块
selected     已选
share     分享
show     显示
sidebar     边栏,侧栏
sign in     登录
sign up     注册
slide     幻灯片,图片切换
sort     排序
sub     次级的,子级的
submit     提交
subscribe     订阅
subtitle     副标题
success     成功(提示)
summary     摘要
summit     提交
tab     标签页
table     表格
text     文本
thumbnail     缩略图
time     时间
tips     提示
title     标题
video     视频
wrap     容器,包,一般用于最外层
wrapper     容器,包,一般用于最外层
 
相对网页外层重要部分CSS样式命名:
外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容(中部)
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
DIV+CSS命名参考表:
CSS样式命名 说明
网页公共命名
#wrapper 页面外围控制整体布局宽度
#container或#content 容器,用于最外层
#layout 布局
#head, #header 页头部分
#foot, #footer 页脚部分
#nav 主导航
#subnav 二级导航
#menu 菜单
#submenu 子菜单
#sideBar 侧栏
#sidebar_a, #sidebar_b 左边栏或右边栏
#main 页面主体
#tag 标签
#msg #message 提示信息
#tips 小技巧
#vote 投票
#friendlink 友情连接
#title 标题
#summary 摘要
#loginbar 登录条
#searchInput 搜索输入框
#hot 热门热点
#search 搜索
#search_output 搜索输出和搜索结果相似
#searchBar 搜索条
#search_results 搜索结果
#copyright 版权信息
#branding 商标
#logo 网站LOGO标志
#siteinfo 网站信息
#siteinfoLegal 法律声明
#siteinfoCredits 信誉
#joinus 加入我们
#partner 合作伙伴
#service 服务
#regsiter 注册
arr/arrow 箭头
#guild 指南
#sitemap 网站地图
#list 列表
#homepage 首页
#subpage 二级页面子页面
#tool, #toolbar 工具条
#drop 下拉
#dorpmenu 下拉菜单
#status 状态
#scroll 滚动
.tab 标签页
.left .right .center 居左、中、右
.news 新闻
.download 下载
.banner 广告条(顶部广告条)
电子贸易相关
.products 产品
.products_prices 产品价格
.products_description 产品描述
.products_review 产品评论
.editor_review 编辑评论
.news_release 最新产品
.publisher 生产商
.screenshot 缩略图
.faqs 常见问题
.keyword 关键词
.blog 博客
.forum 论坛
常见class关键词:
  • 例如:text改为txt、delete改为del,这里针对单个单词组合命名,对词组单词的组合建议不使用缩写或简写
    单词 缩写 说明
    bottom btm 底部
    button btn 按钮
    background bg 背景
    content cont 内容
    check chk 选择框
    current curr 当前的
    delete del 删除
    text txt 文本
    disabled dis 禁用
    foot ft 底部
    head hd 头部
    hidden hide 隐藏
    input inp input框
    image img 图片
    index idx 索引
    message msg 消息
    password pwd 密码
    previous prev 前面的、上一面
    radio rad 单选
    register reg 注册
    select sel 选择
    tbody tbd 表格主体
    thead thd 表格头部
    tfoot tft 表格底部
    wrap wp 包装,外层
     
块(Block)的命名规范
 
类型 块名 类型 块名
顶部 topbar 登录 login
快速导航 quickmenu 菜单 menu
导航 nav 搜索框 searchbox
关键字 keywords 左边栏 leftside
右边栏 rightside 内容 content
左、右菜单 left/rightmenu 服务链接 servicelink
服务 service 底栏 footerbar
版权 copyright 注册 register
新闻 new 新闻列表 news
列表项 item 列表集合 lists
 
元素(Element)的命名规范
 
 
类型 元素名 类型 元素名
元素项 -item 元素头部 -hd
元素标题 -title 元素内容 -cont
元素底部 -btm 元素顶部 -top
元素中部 -middle 元素右则 -right
元素左则 -left    
 
 
 
 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-31
  • 2021-07-22
  • 2022-12-23
  • 2021-09-24
  • 2022-01-12
猜你喜欢
  • 2022-12-23
  • 2021-08-05
  • 2021-07-15
  • 2021-11-14
  • 2022-12-23
  • 2021-11-28
相关资源
相似解决方案