阅读模式:

前端css样式规划

阅读量:14  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:前端涉及文件夹images----背景图片css----------样式文件js------------脚本文件 temp------临时图片文件前端主要样式表global.css-------------全局样式headFoot.css-......

前端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可以舍弃这些标签;

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: