前端css样式规划

• 前端涉及文件夹

 images----背景图片

css----------样式文件

js------------脚本文件  

temp------临时图片文件

• 前端主要样式表

global.css-------------全局样式

headFoot.css--------头部与底部样式

index.css--------------首页样式

xx_channel.css------频道首页页面样式 (eg : book_channel.css,video_channel.css)

xx_list.css------------列表页面样式

xx_detail.css--------详细页面样式

forms.css ------------表单样式 (除去头部的所有form)

注：

1. 样式名称使用驼峰命名法如 boxLeft
2. xx代表的是频道名称，比如

视频频道：video；图书频道为：book；共享资料：share；文档：document；期刊：item；课程：curse；学分商城：score；考试：test；

 

• 前端主要标签

1. 全局

header-----页头

main--------主题

box----------容器

footer------页尾

1. 导航

nav-------------导航

mainnav-----主导航

subnav-------子导航

menu---------菜单

submenu----子菜单

sidebar-------内页左侧分类

1. 功能

logo-----------标志

login----------登录

search-------搜索

banner------广告

focus--------焦点图

scroll、bannerScroll--------滚动

crumbs-----面包屑

tab----------标签切换

pop-------------弹出窗口

icons-------------图标

partner--------合作伙伴

link--------------友联

 

• 关于注释

在页面和样式表里面，对容易混淆或比较重要的框架、样式都应写注释
页面内注释格式为
<!--header-->     --------------------------为开始
<!--//header-->   --------------------------为结束
样式表内注释格式为：
/* --header-- */
/* --//header--*/

 

• 关于样式排序

所有样式写到一行

 

• global.css

body,form,textarea,select,option,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dt,dd,menu,blockquote,fieldset,legend,button,input,hr,pre{margin: 0;padding: 0;}

body{font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#??????;background:???;background-color:#??????;}

ul,ol,img{border:0px;}

li{list-style-type:none;}

input,select,textarea{vertical-align:middle;outline:none;}

a{color:#??????;text-decoration:none;}

a:hover{color:#??????;}

.clear{clear:both;font-size:0;height:0;line-height:0;}

.clearfix{overflow:hidden;zoom:1;}

.leftF{float:left;}

.rightF{float:right;}

•  

• 代码规范

  第一：避免空的src和href；
  第二：把CSS放到顶部；
  第三：尽量把能放在底部的JS放到底部；
  第四：网页中的css和JS代码如果是公共部分的都外调。(网页尽量少出现css跟js代码)；
  第五：精简css跟js代码；
  第六：主要的内容放在一个DIV里面；
  第七：一个页面只有一个H1标签，如果要用H2标签那也必须是对H1的说明；H4-H6可以舍弃这些标签；