CSS制作导航栏,编写更好的CSS代码

编辑更好的CSS代码

2014/01/15 · CSS · 9
评论 ·
CSS

本文由 伯乐在线 –
yanhaijing
翻译。未经许可,禁止转发!
英文出处:Mathew
Carella。欢迎出席翻译组。

编辑好的CSS代码,有助进步页面的渲染速度。本质上,引擎必要分析的CSS规则越少,质量越好。MDN师长CSS采纳符归类成三个紧要项目,如下所示,品质依次下跌。

  1. ID 规则
  2. Class 规则
  3. 标签规则
  4. 通用规则

对作用的广阔认识是从SteveSouders在二〇〇九年出版的《高质量网站建设进阶指南》开端,固然该书中列支的愈加详细,但你也得以在这里翻开完整的引用列表,也可以在谷歌(谷歌)的《快快CSS选取器的极品实践》中查看越来越多的底细。

正文我想享受部分自身在编制高品质CSS中用到的简易例子和指南。那个都是境遇MDN
编写的短平快CSS指南的启发,并根据类似的格式。

css代码优化的12个技术,css代码优化

1.ID 规则
2.Class 规则
3.标签规则
4.通用规则
对功用的大面积认识是从SteveSouders在二〇〇九年问世的《高品质网站建设进阶指南》先导,就算该书中列支的更是详实,但你也足以在那里查看完整的引用列表,也可以在Google的《高效CSS选拔器的最佳实践》中查阅更多的底细。
正文我想分享部分本人在编辑高质量CSS中用到的大概例子和指南。那个都是受到MDN
编写的迅猛CSS指南的开导,并根据类似的格式。

一、避免超负荷约束

 一条普遍规则,不要添加不须求的约束。

复制代码 代码如下:

 // 糟糕
ul#someid {..}
.menu#otherid{..}

// 好的
#someid {..}
#otherid {..}

二、后代选取符最烂

不但品质低下而且代码很薄弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改,那是多么不好,更加是在大商店里,写html和css的累累不是同一个人。

复制代码 代码如下:

// 烂透了
html div tr td {..}

三、幸免链式(交集)采取符

那和过于约束的情形好像,更明智的做法是简单的创办一个新的CSS类选拔符。

复制代码 代码如下:

// 糟糕
.menu.left.icon {..}

// 好的
.menu-left-icon {..}

四、坚持KISS原则

设想大家有如下的DOM:

复制代码 代码如下:

<ul id=”navigator”>
    <li><a href=”#”
class=”twitter”>Twitter</a></li>
    <li><a href=”#”
class=”facebook”>Facebook</a></li>
    <li><a href=”#”
class=”dribble”>Dribbble</a></li>
</ul>

上边是应和的条条框框……

复制代码 代码如下:

// 糟糕
#navigator li a {..}

// 好的
#navigator {..}

五、使用复合(紧密)语法

尽只怕采用复合语法。

复制代码 代码如下:

// 糟糕
.someclass {
 padding-top: 20px;
 padding-bottom: 20px;
 padding-left: 10px;
 padding-right: 10px;
 background: #000;
 background-image: url(../imgs/carrot.png);
 background-position: bottom;
 background-repeat: repeat-x;
}

// 好的
.someclass {
 padding: 20px 10px 20px 10px;
 background: #000 url(../imgs/carrot.png) repeat-x bottom;
}

六、幸免不须要的命名空间

复制代码 代码如下:

// 糟糕
.someclass table tr.otherclass td.somerule {..}

//好的
.someclass .otherclass td.somerule {..}

七、幸免不要求的再次

尽恐怕整合重复的条条框框。

复制代码 代码如下:

// 糟糕

.someclass {
 color: red;
 background: blue;
 font-size: 15px;
}

.otherclass {
 color: red;
 background: blue;
 font-size: 15px;
}

// 好的

.someclass, .otherclass {
 color: red;
 background: blue;
CSS制作导航栏,编写更好的CSS代码。 font-size: 15px;
}

八、尽或许精简规则
在上头规则的基础上,你可以尤其统一差异类里的双重的平整。

复制代码 代码如下:

// 糟糕
.someclass {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
 font-size: 16px;
}

.otherclass {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
 font-size: 8px;
}

// 好的
.someclass, .otherclass {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
}

.someclass {
 font-size: 16px;
}

.otherclass {
 font-size: 8px;
}

九、防止不分明的命名约定
最好应用表示语义的名字。一个好的CSS类名应描述它是如何而不是它像什么。
十、避免 !importants
实际您应该也可以运用其他优质的拔取器。

十一、遵守一个正式的宣示顺序

虽说有局地排列CSS属性顺序常见的措施,上面是自己依据的一种流行艺术。

复制代码 代码如下:

.someclass {
 /* Positioning */
 /* Display & Box Model */
 /* Background and typography styles */
 /* Transitions */
 /* Other */
}

十二、社团好的代码格式
代码的易读性和易维护性成正比。下边是自家按照的格式化方法。

复制代码 代码如下:

// 糟糕
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
 …
}

// 好的
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
 …
}

// 好的做法
.someclass {
    background-image:
        linear-gradient(#000, #ccc),
        linear-gradient(#ccc, #ddd);
    box-shadow:
        2px 2px 2px #000,
        1px 4px 1px 1px #ddd inset;
}

通晓,那里只讲述了个其余平整,是自身在本身要好的CSS中,本着更迅捷和更易维护性而品尝根据的规则。若是你想阅读越来越多的学问,我提出阅读MDN上的编纂高效的CSS和谷歌(谷歌)的优化浏览器渲染指南。

<style
type=”text/css”></style>
<link href=”public.css”
rel=”stylesheet” type=”text/css”/>

前日最首要学习了网页导航栏的制作。注意:引入外部CSS样式时,倘使应用background:url(…png),一定记得用..跳出当前文件夹,回到上级目录。

避免超负荷约束

一条普遍规则,不要添加不必要的封锁。

CSS

// 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..}
#otherid {..}

1
2
3
4
5
6
7
// 糟糕
ul#someid {..}
.menu#otherid{..}
 
// 好的
#someid {..}
#otherid {..}

 

代码优化是怎完结的

代码优化就是对网页中的html源代码举行须要的调动,以增进页面的有好行,页面经过优化后,一方面可以使得的简单页面中的冗余代码,加快页面的显示速度,同时降低页面占用搜索引擎服务器的仓储空间,从而增强页面的用户体验及搜素引擎友好型;另一方面可以卓越页面主旨,进步页面的相关性。
器重步骤:精简代码;底部优化,权重标签使用及图片优化。在那五个环节中,精简代码是最基础、最根本。
1.简洁代码是指清除大概简化页面中的代码,从而达到降低页面体积、升高页面的用户体验及寻找引擎优化性的目标。
简短代码又分七个小步骤:1.清理废品代码;2.html标签转换;3.CSS优化;4js优化以及表格优化。
1.1
垃圾代码是指那个在剔除的情形下也不会潜移默化页面正常突显的非须要代码。不要轻视这个代码,他占有了很大的长空,不仅影响属性还影响搜索引擎的测算时间,所以代码最好是手写,若是用frontpage,Word,Dreamweaver,等工具写的话,发生的污物代码会格外多,所以手动清理掉。
1.2
html标签转换,首若是指利用短标签替换在网页中已毕均等听从的长标签。例如与,两周都是对字体加粗,可是比多出八个字符,即使页面很多的话,就会发出很多冗余代码。
1.3
css优化。css优化首假设改变css的调用方式,以及避免采纳css为根本内容定义样式。
运用div+css格局制作页面,一方面避免垃圾代码,另一方面可以减去重复代码。这种办法对寻找引擎极度要好。
1.4
js优化。js对搜素引擎极不友好。近年来摸索引擎不恐怕解析javascript生成的页面大概内容。所以最主要的内容不可以用js脚本生成;
1.5表格优化,古板的页面基本都是用table。不过那种措施对寻找引擎分外不友善,所以不指出用table
实战:我的网站gsm alarm
system所有的页面都是手写,大概从不其他的冗余代码,就是标签的转换,尽量幸免了长便签。
再有就是css优化,所有的体制我放在外部页面,只需在头顶添加引用即可,这样大大减弱了页面的体积。
还有就是自己利用了div+css的方式写了每一种页面。
还有js优化,所有的要紧内容都未曾选择js,用js只是显得一些神效,可是js的代码也是写在外部页面,而要在页面的最底层添加引用,千万不要再尾部,假如在头顶也会潜移默化页面的习性的
而自身的网站gsm alarm
system所有的页面都遵从了地点所述规则。以上三哥假如有错的地点,各位二弟,可以赋予指引,四哥不胜多谢。好了明天就到此了,下节继续。
 

先行级 <span style=”color:red;”></span>
越接近成分的css属性优先级越高

一、导航栏达成步骤:

子孙选用符最烂

不独品质低下而且代码很脆弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改,那是多么糟糕,尤其是在大商家里,写html和css的再三不是同一个人。

CSS

// 烂透了 html div tr td {..}

1
2
// 烂透了
html div tr td {..}

 

CSS代码太多了,用什方法可以优化CSS代码?

通过外部调用来让页面变得不难
 

1.ID 规则
2.Class 规则 3.标签规则 4.通用规则 对功用的科普认识是从SteveSouders在二〇〇九年问世的《高质量网…

选取器优先级
行内style >ID接纳器 > class类选取器>html标签选拔器
.new ul li a.blue{color:blue;}> a:hover{color:red;} >
.white{color:white;}

1、网页整体分为底部、内容、底部。网页中央内容部分为版心。版心是定宽的。

防止链式(交集)拔取符

那和过火约束的动静相近,更精明的做法是简约的始建一个新的CSS类选择符。

CSS

// 糟糕 .menu.left.icon {..} // 好的 .menu-left-icon {..}

1
2
3
4
5
// 糟糕
.menu.left.icon {..}
 
// 好的
.menu-left-icon {..}

 

<span style=””>优先级最高</span>

2、设定版心宽度。其余每部分情节只须求设置高度即可。

坚持KISS原则

想象我们有如下的DOM:

XHTML

<ul id=”navigator”> <li><a href=”#”
class=”twitter”>Twitter</a></li> <li><a
href=”#” class=”facebook”>Facebook</a></li>
<li><a href=”#”
class=”dribble”>Dribbble</a></li> </ul>

1
2
3
4
5
<ul id="navigator">
    <li><a href="#" class="twitter">Twitter</a></li>
    <li><a href="#" class="facebook">Facebook</a></li>
    <li><a href="#" class="dribble">Dribbble</a></li>
</ul>

下边是相应的规则……

CSS

// 糟糕 #navigator li a {..} // 好的 #navigator {..}

1
2
3
4
5
// 糟糕
#navigator li a {..}
 
// 好的
#navigator {..}

 

(2)三个接纳器的先期级总计
若是,用1意味着标签接纳器,10意味着类拔取器,100意味着ID拔取器,1000意味行内样式
H2{color:#FF0000} 优先级 1
.news h2{color:#0000FF} 优先级 11
div.news h2{color:#00FF00} 优先级 12
div#news h2{color:#FFFF00} 优先级 102

3、header部分分为左、中、右三局地。分别用div包起来,可以安装padding。

行使复合(紧密)语法

尽大概选取复合语法。

CSS

// 糟糕 .someclass { padding-top: 20px; padding-bottom: 20px;
padding-left: 10px; padding-right: 10px; background: #000;
background-image: url(../imgs/carrot.png); background-position: bottom;
background-repeat: repeat-x; } // 好的 .someclass { padding: 20px 10px
20px 10px; background: #000 url(../imgs/carrot.png) repeat-x bottom; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 糟糕
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background: #000;
background-image: url(../imgs/carrot.png);
background-position: bottom;
background-repeat: repeat-x;
}
 
// 好的
.someclass {
padding: 20px 10px 20px 10px;
background: #000 url(../imgs/carrot.png) repeat-x bottom;
}

 

 

4、nav部分用ul落成,li中的a标签为行内元素,要用display转为块标签,给li设置宽高、行高,可以兑现居中。

避免不要求的命名空间

CSS

亚洲必赢官网,// 糟糕 .someclass table tr.otherclass td.somerule {..} //好的
.someclass .otherclass td.somerule {..}

1
2
3
4
5
// 糟糕
.someclass table tr.otherclass td.somerule {..}
 
//好的
.someclass .otherclass td.somerule {..}

 

*{font-size:12px;} //通用采用器 ie6不协理,少用
h1{font-size:12px;} // 标签选用器
<div class=””></div> //类样式 【使用最多】
<div id=””></div> // id 选择器 【多用于js调用,id唯一】

5、鼠标移上去的成效用a:hover完成。

幸免不须要的重新

尽量整合重复的平整。

CSS

// 糟糕 .someclass { color: red; background: blue; font-size: 15px; }
.otherclass { color: red; background: blue; font-size: 15px; } // 好的
.someclass, .otherclass { color: red; background: blue; font-size: 15px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 糟糕
 
.someclass {
color: red;
background: blue;
font-size: 15px;
}
 
.otherclass {
color: red;
background: blue;
font-size: 15px;
}
 
// 好的
 
.someclass, .otherclass {
color: red;
background: blue;
font-size: 15px;
}

 

多成分选拔器
h1,h2{color:red;}

导航栏代码如下:

尽心尽力精简规则

在上头规则的基本功上,你能够更进一步联合不一样类里的重新的规则。

CSS

// 糟糕 .someclass { color: red; background: blue; height: 150px; width:
150px; font-size: 16px; } .otherclass { color: red; background: blue;
height: 150px; width: 150px; font-size: 8px; } // 好的 .someclass,
.otherclass { color: red; background: blue; height: 150px; width: 150px;
} .someclass { font-size: 16px; } .otherclass { font-size: 8px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 糟糕
.someclass {
color: red;
background: blue;
height: 150px;
width: 150px;
font-size: 16px;
}
 
.otherclass {
color: red;
background: blue;
height: 150px;
width: 150px;
font-size: 8px;
}
 
// 好的
.someclass, .otherclass {
color: red;
background: blue;
height: 150px;
width: 150px;
}
 
.someclass {
font-size: 16px;
}
 
.otherclass {
font-size: 8px;
}

 

子孙成分选取器
子成分选用器

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>

防止不强烈的命名约定

最好利用表示语义的名字。一个好的CSS类名应描述它是何等而不是它像什么。

.new li{border:1px solid #ccc;} 后代所有因素【尤其哦】
.new > .title{color:red;} 子代成分 【唯有一代】【少用】
<div class=”new”>
<div class=”title”>title</div>
<div class=”content”>
<li>集团建立</li>
</div>
</div>

<style>

避免 !importants

骨子里您应该也可以拔取任何优质的接纳器。

div.box class=”box” 的 div
div#header id=”header”的div

*{
margin:0;
padding:0;
}
body{
font-family: “微软雅黑”;
font-size: 16px;
}
.header{
height:58px;
background: #191D3A;
}
.header .inner_c{
width:1000px;
margin: 0 auto;
}
.header .logo{
float:left;
padding-right: 50px;
}
.header .nav{
float:left;
}
.header .nav li{
line-height: 58px;
list-style: none;
float:left;
text-align: center;
border-right: 1px solid #212542;
}
.header .nav .last{
border: none;
}
.header .nav li a{
display: block;
height:58px;
width:100px;
text-decoration: none;
color: #6B6889;
}
.header .nav li .current{
color: #fff;
background: #252947;
}
.header .nav li a:hover{
color: #fff;
background: #252947;
};
.header .jrwm_box{
float: left;
}
.header .jrwm{
padding-left: 48px;
padding-top: 12px;
}

按照一个专业的申明顺序

虽说有一些排列CSS属性顺序常见的法子,下边是自家根据的一种流行艺术。

CSS

.someclass { /* Positioning */ /* Display & Box Model */ /*
Background and typography styles */ /* Transitions */ /* Other */ }

1
2
3
4
5
6
7
.someclass {
/* Positioning */
/* Display & Box Model */
/* Background and typography styles */
/* Transitions */
/* Other */
}

 

其余html成分都有 width height padding margin border background

.banner{
height:465px;
background: url(images/banner.jpg) no-repeat center top;
}

团体好的代码格式

代码的易读性和易维护性成正比。上面是自个儿根据的格式化方法。

CSS

// 不佳 .someclass-a, .someclass-b, .someclass-c, .someclass-d { … }
// 好的 .someclass-a, .someclass-b, .someclass-c, .someclass-d { … }
// 好的做法 .someclass { background-image: linear-gradient(#000,
#ccc), linear-gradient(#ccc, #ddd); box-shadow: 2px 2px 2px #000,
1px 4px 1px 1px #ddd inset; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 糟糕
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
}
 
// 好的
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
}
 
// 好的做法
.someclass {
    background-image:
        linear-gradient(#000, #ccc),
        linear-gradient(#ccc, #ddd);
    box-shadow:
        2px 2px 2px #000,
        1px 4px 1px 1px #ddd inset;
}

 

眼看,那里只讲述了个其余平整,是本人在自己要好的CSS中,本着更便捷和更易维护性而品尝根据的平整。假设你想阅读更加多的文化,我指出阅读MDN上的编制高效的CSS和Google的优化浏览器渲染指南。

赞 4 收藏 9
评论

body{font:bold italic 24px 陶文;} 简写的款式
letter-spacing: 字间距
line-height:150% 行高1.5倍

</style>
</head>
<body>
<div class=”header”>
<div class=”inner_c”>
<div class=”logo”><img src=”images/logo.png”
alt=””></div>
<div class=”nav”>
<ul>
<li><a href=”” class=”current”>首页</a></li>
<li><a href=””>博雅游戏</a></li>
<li><a href=””>博雅音信</a></li>
<li><a href=””>关于大家</a></li>
<li><a href=””>客服宗旨</a></li>
<li class=”l”><a href=””>投资者关系</a></li>
</ul>
</div>
<div class=”jrwm”>
<a href=””><img src=”images/jrwm.png” alt=””></a>
</div>
</div>
</div>
</body>
</html>

关于作者:yanhaijing

亚洲必赢官网 1

付出宝付款 如若不便民捐赠,可以访问我的博客,给自己带来收入。About
Me Ecmascript5普通话版+es合集我还在此间 Q群推荐github 家园threejs
官方群javascript 家园
个人主页 ·
我的小说 ·
1

亚洲必赢官网 2

padding:0px 0px 1px; 上 左右 下
单行文本上下居中li{height:30px;
line-height:30px;}
li{list-style-type:none; }

运行效果:

伪类接纳器 <a>
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}

亚洲必赢官网 3

a.a1:link{color:red;} [厉害哦]

 

<li><a>xx</a></li>
<li><a class=”a1″>xxxxx</a></li>

二、!important

background-color
background-image
background-attachment 移动滚动条时,背景固定fix 如故滚动 scroll

important升高权重,权重无穷大

<style type=”text/css”>
body,div,li{padding:0; margin:0;}
ul,li{list-style:none;}
li{
padding-left:30px;
background-repeat:no-repeat;
background-image:url();
background-position:left center;} li背景图片水平左对齐 垂直居中对齐
</style>

font-size:24px !important;
升高的是一本性质权重,不是选用器。
!important不只怕提拔持续的权重,该是0仍旧0
<div>
<p>哈哈哈哈哈哈</p>
</div>
div{color:red !important;}
p{color:blue;}
是因为div是由此持续来影响文字颜色的,所以不可以增强权重。

行内成分 span a img 

important在建站中是分歧意利用的,幸免混乱,通晓就好。

行内成分的高低由内容决定,设置 width 和 height是看不到效果的

 

行内成分转块成分

<span style=”float:left;”></span> 变成了块元素

a span{display:block;} //行内成分转成块成分

div{display:inline;}
//块成分转行内成分

行内成分,经过什么样操作,可以改为“块成分”?
变动、display:block、固定定位、相对定位

<span style=”float:right;”>右对齐
float成分不占空间,不占px

此外因素都可以扭转 float
具备图片float:left; 只要宽度不够,就会自动换行,就有如下效果
<ul><li><img src=””/></li></ul>
图片1 图片2
图片3 图片4

p{width:580px; padding:20px 10px;} 宽就是600px了,添加padding margin
要减小width

种种div都定义高度
li{float:left;}
font-weight:bold;

<div class=”class1 class2″></div> 加多少个样式

一行八个东西,一个float:left;一个float:right;

css定位
position: static(静态定位) fixed(固定定位) relative 相对固定 absolute
相对定位
left 设置成分距离左边多少路程
right top bottom

其余因素,默许是静态定位
稳定定位:相对于浏览器窗口(在线QQ)
固定成分,脱离文档,不占空间,是”块元素“
对峙固化:是周旋于”它原本的和睦“来举办的偏移,所占空间保留(天猫商城图片新品标志)
position:relative;
right:-100px; //用负数

相对定位:相对于它的上代(上级照旧上上级,最后是<body>)定位,不占空间

构成使用
上级相对 position:relative;
切实那个成分 position:absolute; top:-10px; right:-30px;

CSS HACK
实在解决不了包容性难点,能够尝试使用css hack
CSS HACK,针对不一致浏览器IE6 IE7 IE8
火狐,编辑差别的CSS代码的长河,就叫CSS HACK。
(1)CSS属性的HACK:
div{
background-color:red; //所有浏览器都协助 别的 突显 red
*background-color:green; //ie6和IE7支持 ie7 显示 green
_background-color:blue; //IE6认识 最终 ie6 显示 blue

 

下面的css hack  未验证

CSS Hack的贯彻情势:

         (1)IE条件语句:只在IE9-有效

                   <!–[if IE]>
小于IE10的浏览器会看到此句<![endif]–>

                   <!–[if IE 6]>
IE6看到此句<![endif]–>

                   <!–[if lt IE 8]> 小于IE8的浏览器会看到此句
<![endif]–>

                   <!–[if lte IE 8]>
小于等于IE8的浏览器会看到此句 <![endif]–>

                   上述标准语句中得以放置任何CSS/HTML/JS语句。

         (2)接纳器前缀

                   <style>

                            .content{ }       
所有浏览器都能知道的选拔器

                            *html  .content{}                     
唯有IE6能清楚的接纳器

                            *+html     .content{}                  
只有IE7能领悟的选用器

                   </style>

         (3)属性前缀

                   <style>

                            .content{

                                     -webkit-animation: anim1  3s;      

                                     -moz-animation: anim1  3s;

                                     -o-animation: anim1  3s;

                                     background: red;              
/*抱有浏览器都能辨识*/

                                     *background:green;        
/*IE6/IE7能识别*/

                                     _background:blue;           
/*IE6/IE7能识别*/

                                     +background:yellow;       
/*IE能识别*/

                                     background: yellow\9\0;
/*IE9+能识别*/

                                     background: pink !important; 
/*IE6不能够辨别*/

}

                   </style>

css 优化

页面访问速度优化

         (0)硬件/网络优化

         (1)数据库优化

         (2)服务器优化

         (3)前端优化: HTML优化、CSS优化、JS优化

  CSS优化方案:

         优化原则:尽大概裁减HTTP请求数量;尽只怕裁减每一趟请求的多寡大小

         优化措施:

         (1)CSS
Pepsi-Colas:背景图滑动门、把无数的小背景图拼接为一副大图——百度“CSS
七喜s在线”可以找到很多这么的工具

         (2)把CSS放到页面顶部,多用<link href=”x.css”/>代替@import
url(x.css)

         (3)幸免选取CSS说明式

         (4)幸免空的src和href值

         (5)巧用浏览器缓存,把CSS放在尽恐怕少的HTML外部文件

         (6)首页中尽量不要外部CSS

         (7)不要在HTML中缩放图像

        
(8)对JavaScript文件和CSS文件实行削减(剔除空白/换行/注释等),减小文件大小。可使用类似YUI
Compressor等工具    Yahoo UI Libary

 

网站地图xml地图