- 前端涉及文件夹
images—-背景图片
css———-样式文件
js————脚本文件
temp——临时图片文件
- 前端主要样式表
glou j H J ( + F $bal.css————-全局样式
headFoot.cR e l B _ % U Tss——–头部[ x [ u C K ^ ~ 1与底部样式
index.css————–首页样式
xx_$ i ; )channel.css——频道首页页面样式 (egj s ` : book_channel.css,video_channel.css)
xx_list.css————列表页面样式
xx_detail.css——–详细页面样式
forms.r ^ G p p , ? Kcss ————表单样式 (除去头部的所有form)
注:
- 样式名称使用驼峰命名法如 boxLeft
- xx代表的是频道名称,比如
视频频道:video;图书频道为:book;共享资料:share;文档:document;期刊:item;课程:curse;学分商城:score;考试:test;
- 前端Z | } | 5 L主要标签
- 全局
header—–页头
main——–主题
box———-容器
footer——页尾
- 导航
nav————-导航
mainnav—–主导A * @ 7 x航
subnav——-子导航
menu———菜单
submenu—-子菜单
si\ ) 9 8 V !debar——-内页左侧分类
- 功能
logo———–标志
login———-登录
search——-搜索
banner–P + m , H I % I—-广告
focus——–焦点图
scroll、bannerScroll——–滚动
crumbs—–面包屑
tab———-标签切换
pop————-4 + h 4 = z 1 H !弹出窗口
icons—–N J 1 O——–图标
pa4 m Q | . B = crtner——–合作伙伴
lY I 4 r @ t q wink————–友联
- 关于注释
在页面和样式表里面,对容易混淆或比较重要的框架、样式都应写注释
页面内注释格式为
<!–header–> ——————-e l o _ [ s 5——-为开始
<!–//header–> ————————–为结束
样式表内注释格式为:
/* –header– */
/* –//header–*/
- 关于样式排序
所有样式写到一行
- global.css
body,form,textarea,select,option,ol,ul,li,h1,h2,h3,h4,W ~ { `h5,h6,p,th,td,dl,dt,dd,menu% = G w,blockquote,fieldset,legend,button,input,hr,pre{margin:
0;padding: 0;}
body{font-family:Arial,Helvetica,sans-serif;font-size:12~ W ` l L Vpx;color:#??????;background:???;background-colv G V 7 9 Xor:#??????;}
ul,ol,img{border:0px;}
li{list-style-type:none;}h ( i , t ?
input,select,textarea{vertical-align:midQ p v \ H X Bdle;outline:none;}
a{co5 b 6 R % :lor:#??????;te= d K yxt-decoration:none;}
a:hover{color:#??????;}
.clear{clear:both;font-si? 5 : o C x 4 Tze:0;height:0;line-heiL a I _ : j Z / Jght:0;}
.clearfix{overflow:hidden;zoom:1;}
.leftF& w _ J h ; w d{float:left;+ k W S a}
.rightF{float:right;}
-
代码规范
第一:避免空的src和hrc [ G ~ ;ef;
第二:把CSS放到– T : E p O S d顶部;
第三:尽量把能放在底部的JS放到底部;
第四:网页中的css和JS代码如果是公共部分? o { m A E ) m 7的都外调。(网页尽量少出现css跟js代码)F 9 w I X 9 R R;
第五:精简css跟js代码;
第六:主要的内容放在一个DIV里面;
第七:一个页面只有一个H1标签,如果要用H2标签那也必须是对H1的说明;H4-H6可以舍弃这些标签;