DIV+CSS网页布局常用基础

文件命名规范
全局样式：global.css
框架样式：layout.css
字体样式：font.css
链接样式：link.css
打印样式：print.css

---

常用类／命名规范
页　眉：header
内　容：content
容　器：container
页　脚：footer
版　权：copyright　
导　航：menu
主导航：mainMenu
子导航：subMenu
标　志：logo
标　语：banner
标　题：title
侧边栏：sidebar
图　标：Icon
注　释：note
搜　索：search
按　钮：btn
登　录：login
链　接：link
信息框：manage

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为searchInput、“搜索图标”命名这searchIcon、“搜索按钮”命名为searchBtn……。

---

CSS的结构化书写，_{注意#xx ul li那部分}，（自己之前书写的就不是标准方式）。

< div id=”mainMenu”>
< ul>
< li>
< a href=”#” >首页< /a>
< /li>
< li>
< a href=”#” >介绍< /a>
< /li>
< li>
< a href=”#” >服务< /a>

< /ul>
< /div>
/=====主导航=====/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/=====主导航结束=====/

---

注释书写规范
1、行间注释直接写在属性值后面

border:1px solid #fff;/定义搜索输入框边框/

2、整段注释书写方式如下：

/*=====搜索条=====*/
.search {
border:1px
solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索条结束=====*/

---