经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
前端css样式规划
来源:cnblogs  作者:晶之源  时间:2021/5/17 9:08:01  对本文有异议
  • 前端涉及文件夹

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

原文链接:http://www.cnblogs.com/fjjstyle/p/3145988.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号