css教程

    一、table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。

    二、另外如果你不是javascrput的高手，你可以不必去写id，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的id进行控制。

    三、table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而div 更能体现样式和结构相分离，结构的重构性强。

    四、大大缩减页面代码，提高页面浏览速度,缩减带宽成本。

    五、结构清晰，容易被搜索引擎搜索到，天生优化了seo。

    六、缩短改版时间。只要简单的修改几个css文件就可以重新设计一个有成百上千页面的站点。

    七、你可以轻松地控制页面的布局 。

    八、你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个css文件进行控制，只要修改这个css文件中相应的行，那么整个站点的所有页面都会随之发生变动。

    九、强大的字体控制和排版能力。css控制字体的能力比糟糕的font标签好多了，有了css，我们不再需要用font标签或者透明的1 px gif图片来控制标题，改变字体颜色，字体样式等等。

    十、css非常容易编写。你可以象写html代码一样轻松地编写css。

    十一、表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

    十二、更方便搜索引擎的搜索。用只包含结构化内容的html代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

    十三、在几乎所有的浏览器上都可以使用。

    十四、以前一些非得通过图片转换实现的功能，现在只要用css就可以轻松实现，从而更快地下载页面。

    十五、使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

    十六、提高易用性。使用css可以结构化html，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

    十七、可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如powerpoint。

    十八、更好的控制页面布局。

<style type="text/css">cwc平坦软件园
    *{margin:0px;padding:0px;}cwc平坦软件园
    ul{list-style:none;}cwc平坦软件园
    img{border:0px;}cwc平坦软件园
    a{color:#05a;text-decoration:none;}cwc平坦软件园
    a:hover{color:#f00;}cwc平坦软件园
    #pic{width:950px;border:solid 1px #ccc;padding:2px;overflow:auto;zoom:1;}cwc平坦软件园
    #pic ul li {width:182px;float:left;text-align:center;margin:20px 0px 0px 20px;display:inline;}cwc平坦软件园
    #pic ul li a {display:block;}cwc平坦软件园
    #pic ul li a img {padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}cwc平坦软件园
    #pic ul li a:hover img {padding:0px; border:2px solid #f98510;}cwc平坦软件园
</style>cwc平坦软件园

 <div id="pic">cwc平坦软件园
            <ul>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
                <li><a href="#">cwc平坦软件园
                    <img src="images/logo.jpg" alt="" width="182px" height="113px" />金光大道</a></li>cwc平坦软件园
            </ul>cwc平坦软件园
        </div>cwc平坦软件园

当一个容器内元素都浮动后，它将高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。为了便于查看效果，把刚才实例中的#layout增加一个边框和内边距：cwc平坦软件园

#layout { width:400px; border:2px solid #ccc; padding:2px;}cwc平坦软件园

看到没，它没有被内容元素给撑高，要解决这个问题，需要使用以下样式cwc平坦软件园

overflow:auto;是让高度自适应， zoom:1;是为了兼容ie6而写（此样式不能通过w3c验证）。cwc平坦软件园

overflow:auto; zoom:1;cwc平坦软件园

这就是所谓的css hack，之前讲解3px bug时忘记说css hack是个什么东东了，现在补充一下：cwc平坦软件园

由于不同的浏览器，比如ie 6,ie 7,ie8,mozilla firefox等，对css的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的css，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的css code的过程，就叫css hack。这里的overflow:auto; zoom:1;就是所谓的css hack，这种形式是应用我们常用的代码来解决不兼容问题，也会用到添加一些特殊符号的形式，它本身没有意义，只是针对不同浏览器是否对它识别来实现的，具体用到的进修再讲。cwc平坦软件园

这又是ie6一个著名的bug，也是我们经常遇到的。如上例，当浮动后设置左侧外边距时后，最左侧将显示为双倍边距，比如设置为20，而在ie6下却显示40px，解决这个问题只需应用一个样式，大家记住就可以了cwc平坦软件园

display:inline;cwc平坦软件园

用过word的人都知道word有一个“项目符号和编号”的功能，用起来很方便。dreamweaver3的属性面板也有一个类似有的“项目符号和编号”的图标按钮，产生自动列表功能，但它只有两种形式，即方块和阿拉伯数字。不过我们可以利用dreamweaver3的css定义功能去重新定义“列表符号的格式”。下面以定义一个“大写罗马数字项目列表符号”为例来说明其使用方法：
　　 1、按f7（或点击快速启动栏里那个象“八卦图”似的图标），调出css面板，选择“none”，再点击面板下部的编辑图标，在弹出的“edit style sheet”对话框上按“new”按钮，在弹出的“new style”对话框中选择“redifine html tag（重定义html标记）”后，在下面的“tag”选择框中选择“ol”，按ok，立即弹出“style definition for ol”对话框，如下图所示：

　　 在“style definition for ol”对话框左边的选择窗口中选择“list”，在右边的面板上我们只要定义“type”就行了，点一下右边那个三角形按钮，可看到如下图所示的列表：

　　 2、我来解释一下上图中这个列表中各项的含义：
disc：实心圆；
circle：空心圆；
square：实心方块；
decimal：十进制数字；
lower-roman：小写罗马数字；
upper-roman：大写罗马数字；
lower-alpha：小写英文字母；
upper-alpha：大写英文字母；
none：不显示项目符号和编号。
　　 很显然，在本例中要选择“upper-roman”，然后按ok返回（要注意“bullet”属性现在不要选，否则有可能就不是预期的结果了）。在 “edit style sheet”对话框上按“done”按钮结束。在网页源代码的〈head〉与〈/head〉之间见到的css代码是这样的：
〈style type="text/css"〉
〈!–
ol { list-style-type: upper-romancircle}
–〉
〈/style〉
　　 对于不是使用dreamweaver3的网友，直接把上述代码复制在〈head〉与〈/head〉之间，产生的效果相同。
　　 3、这样当我们在设计网页时，在属性面板上点击项目编号图标，就能获得大写罗马数字的列表了，但在编辑时看到的还是十进制编号，只有在浏览时才显示其本来面目。若需要其它格式的编号，只要在第二步中选择列表中的其它样式就行了。
　　 若是要使按下图标后，项目符号前面那个图形（默认的是实心方块）也改变为数字编号，只要在第一步中选择“tag”标记时不要选“ol”而改为选“ul”，其它操作完全相同。如要把它改成用大写罗马数字项目符号，则得到的css代码是这样的：
〈style type="text/css"〉
〈!–
ul { list-style-type: upper-romancircle}
–〉
〈/style〉
　　 从这里可以看，这两个图标所起的作用基本相同，只是标记不同而已。

　　我们经常没有特别注意css文件的可维护与可读性的问题，当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。

　　然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。

　　下面列出四则技巧提高css文件可维护性的方法，以此作为指南，以一种较好的css样式组织习惯来进行web前端开发。

一、css样式文件分解

　　对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。

　　而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。

example source code
@import \”reset.css\”;
@import \”layout.css\”;
@import \”colors.css\”;
@import \”typography.css\”;
@import \”flash.css\”;

　　同时对于大型项目，你也可以加上css文件的升级标志或者一些诊断等其他措施，这里不再详述。

二、为css文件建立索引

　　为了能够迅速的了解整个css文件的结构，在文件开头建立文件索引是一个不错的选择。
　　一种可行的方法是建立树形的索引，结构上的id 和 class 都可以成为该树的一个分支。

example source code
[layout]
* body
      header / #header
      content / #content
            – left column / #leftcolumn
            – right column / #rightcolumn
            – sidebar / #sidebar
            – rss / #rss
            – search / #search
            – boxes / .box
            – sideblog / #sideblog
      footer / #footer
navigation         #navbar
advertisements         .ads
content header         h2

　　或者也可以这样：

example source code
[contents]
      1. body
      2. header / #header
            2.1. navigation / #navbar
      3. content / #content
            3.1. left column / #leftcolumn
            3.2. right column / #rightcolumn
            3.3. sidebar / #sidebar
                  3.3.1. rss / #rss
                  3.3.2. search / #search
                  3.3.3. boxes / .box
                  3.3.4. sideblog / #sideblog
                  3.3.5. advertisements / .ads
      4. footer / #footer

　　另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至rss部分你只需要简单的搜索。

example source code
[contents]
1. body
2. header / #header
3. navigation / #navbar
4. content / #content
5. left column / #leftcolumn
6. right column / #rightcolumn
7. sidebar / #sidebar
8. rss / #rss
9. search / #search
10. boxes / .box
11. sideblog / #sideblog
12. advertisements / .ads
13. footer / #footer

#rss { … }
#rss img { … }

　　定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。您还可以参考下面的文章。

三、格式化css属性

　　当我们编写代码的时候，使用一些特殊的编码风格会对提高css代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面，另外一部分则更喜欢将类似浮动和定位的更“重要”的属性放在前面。类似的，也可以将页面元素按照它在布局中的结构进行排序：

example source code
    body,
          h1, h2, h3,
          p, ul, li,
          form {
                  margin: 0;
                  padding: 0;
                  border: 0;
           }

　　一些开发者用一种更为有意思的方法：他们将属性按首字母的顺序排列。值得注意的是，这样一种方法可能对某些浏览器会产生问题。不管自己的格式如何，你要确保你已经清晰的定义了这些格式方法。这样，你的同事在阅读你的代码的时候将会感谢你的努力。您还可以参考下面的文章。

四、合理的利用缩进

　　为了让你的代码给人感觉更为直观，你可以使用一行来定义大纲元素的样式。当指定的选择器里的属性超过三个的时候，这种方式将带来混乱。但是,信息安全管理：阻止ssh口令尝试工具软件，适度的使用这种方式，你可以很清楚的区分相同类的不同点。

example source code
#main-column { display: inline; float: left; width: 300px; }
    #main-column h1 { margin-bottom: 20px; }
    #main-column p { color: #333; }

　　同时，样式修改的维护也是个比较麻烦的问题。很多人修改样式之后就忘记了，结果后来又发现修改的样式导致了页面出错，不得不苦苦寻找。因此，为修改的样式构建一个特殊的格式就很必要了。一种很简单的方式是，给修改过的样式缩进，同时，也可以使用一些注释（比如\”@new\”）来做一个标识。

example source code
#sidebar ul li a {
       display: block;
       background-color: #ccc;
            border-bottom: 1px solid #999;
       margin: 3px 0 3px 0;
            padding: 3px;
}

　　总的来说，只有建立一个合适的样式指南才会对样式表的可读性有所帮助。记住，移去每一个对你理解文件没有帮助的样式指南，避免对过多的元素使用过多的样式指南。然后，为了一个可读性可维护性良好的css文件而努力吧。

由于设计页面需要，要把两个并排显示的 div 实现一样高的效果， n 行 n 列布局，每列高度（事先并不能确定哪列的高度）相同，每个设计师追求的目标。方法有以下几种： 1 js 实现（判断 2 个 div 高） 2 纯 css 方法； 3 加背景图片实现。首先说下本博客实现的 2 个 div 一样高的方法（即 js 方法）
    div css 基本布局：
<div id=\”mm\”>
<div id=\”mm1\”></div>
<div id=\”mm2\”></div>
</div>
     1 js 实现 div 自适应高度
 代码如下：
<script type=\”text/javascript\”>
<!–
window.onload=window.onresize=funct {
if document.getelementbyid \”mm2\” .clientheight<document.getelementbyid \”mm1\” .clientheight {
document.getelementbyid \”mm2\” .style.height=document.getelementbyid \”mm1\” .offsetheight \”px\”;
}
else{
document.getelementbyid \”mm1\” .style.height=document.getelementbyid \”mm2\” .offsetheight \”px\”;
}
}
–>
</script>
 
     注：网上公布了不少方法，但代码或多或少有错；上面的无错代码；测试在 ie6.0/ie7.0 下通过，考虑绝大数人仍然用的 ie 所以并没有在 opera 和 firefox 下调试，哪位用的 opera 或 ff 可以协助看看 飘易博客 div 否保持了一致的高度。
 
    2 纯 css 方法
 
    css 里代码（调试通过，但不会显示 div 下边框，即 border-bottom
 
/* 左右自适应相同高度 start*/
#m1,#m2
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and  min-width: 0px  {
#m1,#m2
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#m1:before, #m2:before
{
content: \’[do not leave it is not real]\’;
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/* 左右自适应相同高度 end*/
 

    3 加背景图片
 
     这个方法，很多大网站在使用，如 163 sina 等。
 
    xhtml 代码：
 
<div id=\”wrap\”>
<div id=\”column1\”> 这是第一列 </div>
<div id=\”column1\”> 这是第二列 </div>
<div class=\”clear\”></div>
</div>
 
    css 代码 :
 
#wrap{ width:776px; background:url bg.gif  repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
 
     还有其他一些方法，但主流就是这几种了如果你还有关于多个 div 自适应高度的好的代码。

列表是html里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。 

样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。 

1．列表符号 
列表符号是指显示于每一个列表项目前的符号标识。 
基本格式如下： 
list-style-type：参数 
参数取值范围： 
·disc：圆形 
·circle：空心圆 
·square：方块 
·decimal：十进制数字 
·lower-roman：小写罗马数字 
·upper-roman：大写罗马数字 
·lower-alpha：小写希腊字母 
·upper-alpha：大写希腊字母 
·none：无符号显示 
参数中的disc是默认选项。 

2．图形符号 

图形符号指原来列表的项目符号将可以使用图形来代替。 

基本格式如下： 
list-style-image：url 
url是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。 

3．列表位置 
列表位置描述列表在何处显示。 

基本格式如下： 
list-style-position：参数 
参数取值范围： 
·inside：在box模型内部显示 
·outside：在box模型外部显示 
这里又出现了一个新的概念：box模型。box是指一种容器，包含了应用样式规则的对象，具体介绍将在后文中给出。 

如何用css定义虚线？在css中定义虚线一般有两种方法:一种是定义div的css样式，另一种是通过hr的css样式实现。

我们首先需要了解，关于线条的css的两个样式：
dotted : 　在mac平台上ie4 与windows和unix平台上ie5.5 为点线。否则为实线
dashed : 　在mac平台上ie4 与windows和unix平台上ie5.5 为虚线。否则为实线

水平虚线线条，我们可以用hr来实现，也可以定义一个div，将它的高度设为1px或其它你想要的高度。
css定义一条水平虚线hr的方法实例：

[css在线]-示例代码<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>www.csscssorg.com</title><style type="text/css"><!–hr {border:1px #cccccc dotted;}–></style></head><body><hr size="1" noshade="noshade" /></body></html>

css定义一条水平虚线div的方法实例：　

[css在线]-示例代码<meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>www.csscss.org</title><style type="text/css"><!–#aaa {border-top:1px dashed #cccccc;height: 1px;overflow:hidden;}–></style></head><body><div id="aaa"><a href="http://www.csscss.org/">css在线</a></div></body></html>

需要你注意：hr定义虚线方法中css的定义：hr {border:1px #cccccc dotted;} 用了dotted属性。在div的定义虚线的方法中用了dashed属性。从表面上讲，两者没有明显的区别。但在不同的浏览器环境下，可能会存在一些差异。但这些都无关紧要了，因为大多数人看到的是一样的效果——虚线。

一些新手朋友对选择器一知半解，不知道在什么情况下运用什么样的选择器，这是一个比较头疼的问题，针对新手朋友，对css选择器作一些简单的说明，希望能对大家的学习工作有一定的帮助。

                
准确而简洁的运用css选择器会达到非常好的效果。我们不必通篇给每一个元素定义类（class）或id，通过合适的组织，可以用最简单的方法实现同样的效果。在实际工作中，最常用的选择器有以下五类：

一、标签选择器：
顾名思议，标签选择器是直接将html标签作为选择器，如p、h1、dl、strong等html标签。

如：

p { font:12px;}
em { color:blue;}
dl { float:left; margin-top:10px;}

二、id选择器：
我们通常给页面元素定义id。
如<div id=\”menubar\”></div>，然后在样式表里这样定义：
#menubar {
margin:0 auto;
background:#ccc;
color:#c00;
}
其中\”menubar\”是自己定义的id名称。注意在前面加\”#\”号。
id选择器也同样支持后代选择器，
例如：
#menubar p {
text-align:center;
line-height:20px;
}
这个方法主要用来定义层和那些比较复杂，有多个“唯一后代”的元素。

三、类(class)选择器：
在css里用一个点开头表示类别选择器
例如：
.maincontent {
color:#f60;
font-size:14px ;
}
在页面中，用class=\”类别名\”的方法调用： <span class=\”maincontent\”>14px大小的字体＜/span>这个方法比较简单灵活，
可以随时根据页面需要新建和删除。但需要避免多class综合症。

四、群组选择器：
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
如：
p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
使用组群选择器，将会大大的减化css代码，将具有多个相同属性的元素，合并群组进行选择，
定义同样的css属性，这大大的提高了编码效率与css文件体积。 

五、后代选择器：
后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式，

例如：

li strong {
font-style:italic;
font-weight:800;
color:#f00;
}

#maincontent p {
color:#000;
line-height:26px;
}          

六、通用选择器：

通用选择器由一个星号表示。通用选择器一般用来对页面上的所有元素应用样式。

例如：可以使用以下规则删除每个元素上默认的浏览器填充和空白处：

* {

padding: 0;

margin: 0;

}

css中用四个伪类来定义链接的样式，分别为a:link、a:visited、a:hover和a:active。
例如：
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #f90 ;}
以上语句分别定义了\”链接、已访问过的链接、鼠标停在上方时、点下鼠标时\”的样式。
注意，必须按以上顺序写，否则显示可能和你预期的不一致。记住它们的顺序是“lvha”。

经常会有人咨询：div css是什么？table又是什么？为什么推荐div css网页布局呢？7b8平坦软件园

其实div css是网站标准（或称“web标准”）中常用术语之一， 说白了，就是一种网页的布局方法,7b8平坦软件园

同样，table也是一种布局方法，所不同的是，div css的网页布局方法有别于传统的html网页设计（即使用table）的定位方式,div css真正地达到了w3c内容与表现相分离。7b8平坦软件园

那么为什么会推荐品牌网站或者具长远运营理念、预算充足的企业使用div css来进行网页设计｜网站建设呢？7b8平坦软件园

其实原因就在于div css网页存在许多也许您并不知悉的优点！而这些优点对于浏览者的体验有相当的影响！7b8平坦软件园

也许您认为网站是企业的名片，企业主体需求才是第一位，的确，这的确是网站的重点之一，但是还要告诉您，犹如好的名片设计一样，好的名片除了本身是企业形象的代表外，还透过那些设计和质地透露给接收名片人一种感觉和信心，也就是良好的接收方感应也是名片存在另一层关注点，这就是行业所谓的宣传作用，7b8平坦软件园

而为什么有一些理念和发展计划，同时也具备一定运营资金的企业会都比较热衷于宣传？原因也很明显，因为宣传所带来的是更深的企业影响力。7b8平坦软件园

所以通常而言：好的网站平台至少  =  企业理念目标策略     专业网站设计公司设计开发     浏览者使用的体验关注     其它众多重点相结合的的综合体。7b8平坦软件园

 犹如没有被接收的名片一样，一个浏览者无兴趣或找不到内容的网站是毫无意义的。7b8平坦软件园

企业理念目标策略在网站策划阶段统称企业定位，这个不用多说，是您企业建站的目标；7b8平坦软件园

网站设计与开发，这是专业网站设计或建设公司应为您提供的个性化定制策划&执行服务，在此亦略过，当然如果您感兴趣可以点击：案例分析频道  或   服务流程  页面  对基本的服务及项目策划执行过程进行大概了解；7b8平坦软件园

今天就暂时站在普通浏览者的角度上一起看一下iv css有哪些常见的优点：7b8平坦软件园

其实任何互联网上的东东，无外忽是传播为目的，或宣传互动为目的，不论哪种，果您是普通浏览者，最痛恨的是什么？7b8平坦软件园

是的，打开速度，5秒…10秒…30秒….网站竟然还没打开！！想必这时，谁都已经完全不愿意再去浏览这个网站了！7b8平坦软件园

高效率的时代，对于速度的要求是必然的！我们无法忍受过慢的一切：过慢的网速，过慢的加载，过慢的响应…7b8平坦软件园

所以，建议您使用div css布局，因为同个网站，使用div css进行网页布局，将会大大缩减代码，让您的网页更slim！相比于传统的table网页总是充斥各种各样的属性和数字，div css网页布局的很多css文件通常都是共用的，这样从根本上和原理上大大缩减页面代码，从而提高了页面浏览速度。7b8平坦软件园

其次，网页终于打开了，此时浏览者正看着ie8或opera或firefox浏览器窗口…突然之间……页面。。。杯具了!!!7b8平坦软件园

图片出位!!!表格不齐!!!信息密密麻麻…..整版混乱不堪，这时，如果不是必须。。谁还会选择向下忍受着继续浏览？7b8平坦软件园

是的，相信任何人都会说:no! 因为那是完全的信息视觉污染！7b8平坦软件园

所以，网站的确需要div css网页布局！！！虽然各个浏览器有可能因内核或技术不同而导致相同页面按传统方法的确会存在较大的效果差异，但我们能和浏览者这样解释并硬性让其承担这种传统产物下的不良网页显示效果吗?7b8平坦软件园

对于网站来讲，浏览者本身就是深具潜力的巨大财富，不良的网页效果无疑是浏览者拒而远之的一种极大可能！！7b8平坦软件园

所以，建议众多准备建站的朋友，如果您的网站是品牌网站，如果有长期网站运营的决心，如果真正关注网站优化及推广，使用div css进行网页布局！7b8平坦软件园

因为div css网页布局的页面在各个浏览器基本上效果都差不多，所以站上长期运营及网站更全方位的效果上讲，推荐网站使用div css的网页布局。7b8平坦软件园

其实这只是从浏览者体验出发的一点点优点，关于div css网页布局优势，如果您想知道更多，可以浏览《网站seo之企业网站为什么需要使用div css布局？》进行了解。7b8平坦软件园

7b8平坦软件园
7b8平坦软件园

1.1  使用 css 优化工具

    a)  online css optimizer ；

    b)  css formatter and optimizer 。

解决方案：选取以上一个工具进行进行优化。

1.2  清理 css

在我们写样式的时候，页面的 css 在经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式 更名了而原来的忘了删除，总之页面中可能存在着一 些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。

    a) dust-me selector ；

    b) page speed ；

    c) css redundancy checker ；

    d) intellij idea ；

    e) expression web 。

解决方案：选取以上一个工具进行 css 清理。

1.3  在浏览器支持的情况下尽量使用 css 选择器

避免为每一个标签都定义 class 。

解决方案：重构 css ，去除不必要的 class 。

1.4  减少 css hack 的使用

    a) 尽量把浏览器默认值不相同的元素定义出来；

    b) 注意 padding ， margin ， border 在 width 和 height 中的大小计算；

    c) 注意 ie 中最小高度和 img 的使用。

解决方案：删除不必要的 css hack ，然后进行细节修改。

1.5  避免使用内联引用和内部引用，尽量使用外部引用

    a) 网页处理速度会更快一些，尤其在有很多网页共用一份 css 样式表时；

    b) 看上去更加专业，整个网站的配色、细节等做到完全统一，具有一致性，避免内联的像素、色彩等偏差；

    c) 方便维护。只要修改一个 css 文件，不管你有多少个网页文件，都会以你最新修改的版本为标准，不必进行散弹式修改。

解决方案：把内联引用和内部引用的 css 进行抽取、提出放到外部 css 文件中，使用外联引用。

1.6 浏览器兼容

支持主流浏览器：firefox ， ie6 ， ie7 ， ie8 ；逐步支持 chrome ， opera ， safari 。

解决方案 ：在不同浏览器上进行测试，然后逐一修复。

1.7 元素合并

类似:background-image: url(/oaweb/img/common/333.png); background-repeat: repeat-y; background-position: 0px 0px;

可合并为（ background ： url(/oaweb/img/common/333.png)  repeat-y 0 0; ）。

解决方案：有此类问题的地方进行合并。

1.8  规范命名

    a) id 和 class 命名采用该内容的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如 :newrelease （最新产品 /new release) ；

    b) 添加注释；

    c) 常用命名规范（参见附件 1 ）。

解决方案：发现不符合要求的进行修改；没有注释或注释不详、不清的地方进行添加或补充、修改。

1.9 抽取出一些常用的 css

对于标签可使用 class 组合，不需要把 float:right; 类似这样常用的样式写到一组定义的 css 中。

解决方案 ：定义一些常用的 css ，在样式中去除含有这些常用样式的 style ；最后在用到该样式的标签中加上定义好的被删除的常用样式的 class 。

1.10  注意 class 和 id 的异同，不要滥用

id 是用来进行唯一标示，作为网站中的样式，每个页面样式需要具备一致性。因此，除特定原因外，样式尽量使用 class 。

解决方案 ：查看不符合用 class 的标签，改为 id ；反之，改为 class 。

1.11  满足 seo

oa 当然不需要此项，但是在 ecooe 体验中就在所难免了。

解决方案 ：凭经验可适当修改，但毕竟不是这行的专家，可买本书来研究研究。

1.12  恰当的使用 css sprite

不要在每一处需要图片的地方都使用 css sprite ，它的难维护性决定了只适用于做背景图的时候采用；对于图片，还是应该去使用 img 标签。

解决方案 ：把使用了 css sprite ，但不用做背景的地方改为 img 标签；反之改为使用 css sprite 。

1.13  避免使用 expression 和 behavior

在页面渲染的过程中， expression 和 behavior 需要大量的计算，会大量地耗费客户端资源。所以不到迫不得已，请不要使用 expression 和 behavior 。

解决方案 ：删除使用了 expression 和 behavior 的地方，改之使用 javascript 进行替代。
[摘自互联网]