网页设计过程中一般命名规则

id的命名:

 

(1) 页面结构

 

       容器: container

 

       页头：header

 

       内容：content/container

 

       页面主体：main

 

       页尾：footer

 

       导航：nav  

 

       侧栏：sidebar

 

       栏目：column 

      

       左右中：left right center

 

       页面外围控制整体布局宽度：wrapper   

 

 

 

(2) 导航

 

      导航：nav

 

      主导航：mainbav

      

       子导航：subnav

 

       顶导航：topnav

 

       边导航：sidebar

 

       左导航：leftsidebar

 

       右导航：rightsidebar

 

       菜单：menu 

 

       子菜单：submenu

      

       标题: title 

 

       摘要: summary

 

 

(3)功能

 

      标志：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

 

       主题  themes.css

 

      专栏   columns.css

 

       打印  print.css

 

      文字  font.css

 

       表单  forms.css 

 

       补丁  mend.css 

 

       布局，版面  layout.css

 

CSS命名规则

 

       头：header

 

       尾：footer

 

       导航：nav

      

       内容：content/containe

 

       侧栏：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