香港二肖中特图 www.lekyn.tw 为了保持页面规范,避免错误,加快学习和开发效率,以下列出Zving前端开发中CSS的一些规范及注意事项,此规范适用于项目前端页面。(2009年7月31日初稿 2017年03月20日修正)

CSS命名规则

页面制作最重要的就是CSS,定义合理的CSS命名规范,可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用中划线命名法或骆驼式命名法,不要使用下划线命名法。

骆驼式命名法: 是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记。例如:mianNav footNav

下划线命名法: 是指函数名中的每一个单词都用一个下划线来隔开。例如:mian_nav foot_nav

中划线命名法: 是指函数名中的每一个单词都用一个中划线来隔开。例如:mian-nav foot-nav

1.通用命名规则:

1)  所有ID或者class字母和数字之间用“-”连接,如:  #col-left、#col-right

2)  或所有ID或者class两个单词之间的链接采用骆驼式命名法,如mianNav、footNav

3)  页面主体框架布局命名:lay-left、lay-center 、lay-right

4)  栏目布局容器命名一律采用: col-left、col-right

5)  栏目标题块命名一律采用title。元素标签采用:<h4> 如:

<div class="title"><h4>标题</h4></div>

6)  页面所有图片区域全部采用:pic-banner、pic-logo

7)  页面文本列表区域全部采用: list-pic、list-item

8)  页面上按钮采用:btn-submit、btn-search

9)  广告区域:ad-left,ad-right,ad-top,ad-bottom

2.主框架命名规则:

1)  #header (页面头部)

2)  #main (页面主体)

3)  #footer (页面尾部)

3.通用命名规则:

主 体:main
外层:wrap
功能条:funcbar
友情链接:friend-link
版 权:copyright
页眉:header
页脚:footer
标题:title
注 释:note
面包屑:breadcrumb
容 器:container
内 容:content
搜 索:search
登 陆:login
当前状态:current
页头:header
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:sub-nav
主导航:main-nav
菜单:menu
子菜单:sub-menu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
信息:msg
提示技巧:tips
栏目标题:title
指南:guide
服务:service
热点:hot
新闻:news
下载:download
注册:reg(register)
状态:status
按钮:btn
投票:vote

4.常用简写命名规则:

bd:body
hd:header
fnt:字体
nav:导航
tb:表格
lnk:链接
ml/mr:margin-left/margin-right
lst:列表
pl / pr / pd:padding-left/-right/padding
col:栏目
frm:表单
con:内容
inf:信息
lg:Logo
inp:Input
ft:footer
btn:button
more:更多
fl /fr float:left/float:right
tit 标题栏
spr 空行
t / d / mid / l / r:上 / 下 / 中 / 左 / 右
bdr:边
w:宽
h:高

网站布局和样式文件命名

1.  网站样式文件命名和样式从属关系

1)  全局布局共用CSS文件:common.css 包括css reset(用来清除默认值)、全局性的一些属性值的定义,还有网站布局容器的共用的CSS部分:页眉、页脚、搜索共用CSS

2)  频道私有CSS文件:home.css (当前频道或者页面的CSS独有属性值以及为了兼容不同的浏览器的所采用的hack

2.  网站布局:

设计稿中页面宽度建议为960宽度;网站采用目前最流行的bootstrap3作响应式布局。分栏宽度参考设计稿,如果没有设计稿就使用bootstrap的12列概念:

两栏布局:主容器宽度为9列 副容器宽度为3列。

三栏布局:3列、5列、4列。

3.  网站栏目:

web页面上不同内容的组合方式:图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义:

1)  全局框架通用样式

2)  页眉

3)  导航

4)  搜索

5)  页脚

6)  内容列表通用样式

7)  图片通用样式

8)  表单通用样式

4.   频道私有CSS文件:针对网站频道不同风格所以各部分需要独自私有定义,但是通用布局不需要再重新设置,只需要设置私有部分。 

HTML文档结构

1.html基本框架结构


<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9, IE=10, IE=11, chrome=1" />
<meta name="renderer" content="webkit" />
<title> 标题 </title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/home.css" />
</head> 
<body>
<!—start 页头-->
<div id="header" class="page-width header"> …… </div>
<!—end页头-->

<!—start 主体-->
<div id="main" class="page-width main"> …… </div>
<!--end主体-->

<!—start 页脚-->
<div id="footer" class="page-width footer"> …… </div>
<!—end页脚-->
<script src="js/jquery.js" type="text/javascript"></script>
</body> 
</html> 

2.HTML5标准的Doctype声明。

第一行必须加文档声明

<!doctype html>

不同的文档声明影响页面元素的渲染效果,上例中我们使用HTML 5。以保证在IE6.0以上及非IE的现代浏览器里采用一致的“盒模型”。

3.编码声明。默认使用UTF-8编码。

web文件的“换行符类型“windows换行符-CR/LF”;编码为“UTF-8”“GBK”(在GBK版本里,或在需要与支持GBK的其他系统/控件交互的情况下,使用“GBK”编码)

4. meta,title等处填写相应的关键词和描述。

<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10, chrome=1" /> <meta name="renderer" content="webkit" />也是必须的,这第一句是让IE8及以上版本以最高级内核渲染页面,即使系统里安装有IE8或更高版本,一些以IE为内核的浏览器(如360浏览器早期版本),仍然采用IE7的内核渲染,使用上面这一句设置,让IE以最高等级内核渲染页面,减少针对IE7作兼容处理的工作量。


<meta name="keywords" content="关键词" />
<meta name="description" content="页面描述" />
<title>标题</title>

5.基本结构(考虑到页头页脚将会制作成包含文件,所以<body>区的内容至少要分散到三个独立div内。)

div#header

div.global-nav

a img.logo

div#login-bar

div#main-nav

div#search

div#main

div#lay-left: (布局容器1)

div.col (内容块1)

div.col (内容块2)

div#lay-right: (布局容器2)

div.col (内容块3)

div.col (内容块4)

div#footer:

div.link

div.copyright

Web页面切图和CSS注意事项

1.  Web页面切图

1)  Web页面的切图类型可以归纳为背景(bg)、列表项目的符号(li)、内容中插入的图片(pic)、按钮(btn)、图标等几种形式(ico)。

2)  建议把用CSS背景加载的图片拼合成一张图片。这样可减少对服务器的请求。从而提升页面加载速度。

3)  除页面头部大图保存格式为jpg外,其他图片一律采用gif格式

2.  CSS相关事项:

1)  所有的html代码小写

2)  每个标签都要有开始和结束,且要有正确的层次,没有结束标签的,标签后加上"/"。 如:<img />、<br />

3)  所有的属性必须用引号""括起来

4)  文档类型必须声明,禁止文档类型乱用

5)  所有<&特殊符号用编码表示

6)  必须正确使用代码缩进,缩进时使用tab(键盘中的TAB键),禁止无缩进、乱缩进,禁止使用空格缩进

7)  CSS加载的背景图片要预定义宽度和高度,路径采用绝对路径可以直接从访问者计算机缓存中加载,提高页面加载速度。

8)  要尽可能做到表现与结构完全分离,代码中不涉及到表现元素,如style、font、bgColor、border。

9)  <h1>到<h6>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。采用继承方式,否则个性定义就会失效。

10)  Font的缩写为:样式粗细大小行高字体(font:italic bold 12px/30px “simsun”

11)  class和id选择器,尽量使用class选择器,id只能在同一页面中不能重复适用

12)  给页面的布局和重要的区块加上注释,如:<!—header -->

13)  给图片加上alt标签,利于搜索引擎的查询。

14)  所有的标签必须进行合理的嵌套。

15)  页面的实现过程中出现的问题是有规律的几种:3个像素的bug、双倍浮动空白边距、文字溢出bug。尽可能采用合理布局可以避免不同浏览器下所产生的问题。css的hack应该尽量避免采用。

16)  尽可能的合理的去用继承,好处是代码结构清晰,方便其他修改人员辨认页面结构、减少css的代码的重复定义。

17)  网站上经?;岢鱿钟没淙胍淮蠖巫址妥帜敢灾劣谖淖治薹ㄕU坌?,把版式破坏,这样我们就要参考以下样式:word-wrap:break-word; overflow:hidden; 当然必须得有宽度属性值。

18)  文字过长要出现省略号样式如下:
white-space: nowrap; text-overflow:ellipsis; overflow:hidden;

19)  一个完整的表单应该包括:


<fieldset>
<legend></legend>
<label></label>
<input />
</fieldset>

20)  页面上的列表元素除了ul ol外,我们还可以采用dl dt dd组合。

21)  合理采用多重样式定义可以有效的增加样式的重用性。

22)  我们要清楚哪些标签是块状元素和内联元素。一般我们可以把css元素分为block(块状)和inline(内联)。熟悉这些元素属性有利于我们深入理解css。

23)  按照推荐css属性书写顺序:

显示属性:
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float

自身属性:
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

文本属性:
color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor

3.  CSSHTML编写问题:

1)  考虑到cms内的文章编辑器内编辑文章时会对正文字体进行大小设置,所以建议前端页面的样式定义里不要对 body,textarea,select,button,之外的标签重新设置字体大??;并且建议不要对body,textarea,td之外的标签重设行高。

2)  基本的css设定(global.css)可以如下,(仅示例,请视情况修改或扩展)


/* reset.css */
body {background-color:#fff;color: #222;}
a { color: #06a; text-decoration: none; }
a:hover { color: #f90; text-decoration: underline; }
body,q,iframe,form,
ul,li,dl,dt,dd{ margin: 0; padding: 0;}
img,fieldset{border: none 0;}
body,td,textarea{word-break: break-all; line-height:1.5;}
body,input,textarea,select,button{margin: 0; font-size: 12px;font-family: Tahoma, SimSun, sans-serif;}
div,p,table,th,td{ font-size:1em; font-family:inherit; line-height:inherit;}

/*--float txtAlign--*/
.tc { text-align:center; }
.tr { text-align:right; }
.tl { text-align:left; }
.fl{ float:left; }
.fr{ float:right; }

/*-- link --*/
a{text-decoration:none;}
a:hover{text-decoration:underline;}

3) 允许使用css hack,以提高制作效率,如


.fl{ float:left; _display:inline;}
.fr{ float:right; _display:inline;}

4)  页面布局,编写html时尽量不要对元素进行ID命名,亦即尽量少使用css中的ID选择器,对元素ID命名可以在编写js交互脚本时进行

5)  建议使用VSCode或Atom为前端开发编辑器,如果使用Dreamweaver建议使用Dreamweaver CS 以上版本:在页面制作时注意清除浮动、及定义浮动元素宽度,可以让页面在Dreamweaver里的设计视图下接近最终浏览效果