中国设计秀
中国设计秀
  • 当前位置:首页 > 网络设计学院 > CSS/html5教程

css图片切图转网页的代码规范

作者:vivi2009 源自:中国设计秀 时间:2016-07-19 11:43:24 点击: 关键字:css教程

网页制作cnwebshow文章简介:网页切图过程中div+css命名规则.
FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性。FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
id的命名: FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
(1)页面结构 FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
容器: container 页头:header 内容:content/container FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
页面主体:main 页尾:footer 导航:nav FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
侧栏:sidebar 栏目:column 左右中:left right center FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
页面外围控制整体布局宽度:wrapperFDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

(2)导航 FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
导航:nav FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
主导航:mainbav FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
子导航:subnav FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
顶导航:topnav FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
边导航:sidebar FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
左导航:leftsidebar FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
右导航:rightsidebar FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
菜单:menu 子菜单:submenu 标题: title 摘要: summary FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
(3)功能 FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
标志:logo FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
广告:banner FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
登陆:login FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
登录条:loginbar FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
注册:regsiter FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
搜索:search FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
功能区:shop FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
标题:title FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
加入:joinus FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
状态:status FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
按钮:btn FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
滚动:scroll FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
标签页:tab FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
文章列表:list FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
提示信息:msg FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
当前的: current FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
小技巧:tips FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
图标: icon FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
注释:note FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
指南:guild FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
服务:service FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
热点:hot FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
新闻:news FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
下载:download FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
投票:vote FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
合作伙伴:partner FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
友情链接:link FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
版权:copyright FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
class的命名: FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
(1)颜色:使用颜色的名称或者16进制代码,如 FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
.red { color: red; } FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
.f60 { color: #f60; } FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
.ff8600 { color: #ff8600; } FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
(2)字体大小,直接使用"font+字体大小"作为名称,如 FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
.font12px { font-size: 12px; } FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
.font9pt {font-size: 9pt; } FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
(3)对齐样式,使用对齐目标的英文名称,如 FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
.left { float:left; } FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
.bottom { float:bottom; } FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
(4)标题栏样式,使用"类别+功能"的方式命名,如 FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
.barnews { } FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
.barproduct { } FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
注意事项: FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
1.不使用大写形式的类名和id名; FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
2.尽可能使用描述性的英文单词的组合作为类名和id名; FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
3.id名及类名的多个英文单词之间使用“_”短横线分隔; FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
4.按区域进行描述编号 例:main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL)FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
附:一些css框架的命名参考FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

主要的 master.css 模块 module.css 基本共用 base.css FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
主题 themes.css 专栏 columns.css 打印 print.css FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
文字 font.css 表单 forms.css 补丁 mend.css FDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀
布局,版面 layout.cssFDr网页设计作品_优秀网站设计_网页制作教程_设计素材_中国设计秀

本文引用地址:http://www.cnwebshow.com/
本文关键字:css教程