十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

DIV+CSS规范命名【超全】

DIV+CSS规范命名 百恒网络 2018-06-19 483

DIV+CSS规范命名


  一、页面结构


  容器: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

  友情链接:friendlink

  版权:copyright

  四、颜色


  使用颜色的名称或者16进制代码,如:

  .red { color: red; }

  .f60 { color: #f60; }

  .ff8600 { color: #ff8600; }

  五、字体大小


  直接使用“font+字体大小”作为名称,如:

  .font12px { font-size: 12px; }

  .font9pt {font-size: 9pt; }

  六、对齐样式


  使用对齐目标的英文名称,如:

  .left { float:left; }

  .bottom { float:bottom; }

  七、标题栏样式


  使用“类别+功能”的方式命名,如:

  .barnews { }

  .barproduct { }

  电子贸易相关命名:

  .products 产品

  .products_prices 产品价格

  .products_des cription 产品描述

  .products_review 产品评论

  .editor_rwview 编辑产品

  .news_release 最新产品

  .publisher 生产商

  .screenshot 缩略图

  .faqs 常见问题

  .keyword 关键词

  .blog 博客

  .forum 论坛

  八、注意事项


  1、一律小写;

  2、尽量用英文;

  3、不加中杠和下划线;

  4、尽量不缩写,除非一看就明白的单词;

  5、属性的值一定要用双引号(“”)括起来,且一定要有值如class="divcss5",id="divcss5";

  6、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整。

  九、样式文件命名


  主要的master.css

  模块module.css

  基本共用base.css

  布局,版面layout.css

  主题themes.css

  专栏columns.css

  文字font.css

  表单forms.css

  补丁mend.css

  打印print.css
400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×