1、规则

语义化标签：css选择器的命名能够反映页面结构的功能区块，让网页结构一目了然

当特殊的样式需要应用到个别元素时，使用内联样式

2、书写顺序：

位置 -> 大小 -> 文字 -> 背景 -> 其它

3、命名

结构命名：

容器：container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

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

功能命名：

导航：

nav导航，navbar导航条

topnav：顶部导航， mainnav：主导航， subnav：子导航， sidebar：边导航

leftsidebar：左导航 rightsidebar：右导航

菜单

menu：菜单，

submenu：子菜单

drop：下拉， dorpmenu：下拉菜单， links：链接菜单

title：标题， summary：摘要

其它

标志：logo

广告：banner

登录：login

登陆条：loginbar

注册：regsiter

搜索：search

功能区：shop

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的：current

小技巧：tips

图标：icon

注释：note

指南：guild

服务：service

版权：copyfight

友情链接：link