这里想总结些编写网页的经验，以PC端的为主，前面总结过后台的，今天写些前台的，参考了bootstrap3.3.5、bootstrip2.3.2和模版matrix。

前段时间还写过一篇《前端基础学习分享》，比较基础的文章。

每次写CSS，总感觉不用写那么多CSS，但是精简的时候， 又难以下手。越写越觉得代码越来越多，越来越乱，所以这次我打算整理出一套比较灵活的结构，供以后使用。

CSS应该也可以像其他那些语言写的有层次，有结构。

一、规划

1）在拿到psd效果图后，我会将所有的效果图看一遍，然后开始打草稿，在纸上画，在PS中标注都可以。一般都是做个大概的统计，太详细不太现实，既费时间也费精力。

2）网站的浏览器兼容性要顾及到哪些，IE6，IE7还是IE8以上等，点击查看浏览器分布情况。写CSS的时候还得照顾下低版本的浏览器。

3）页面中的字体大小有几种；颜色有几种；超链接的:visit，:hover，:visit样式有几种

4）网站中有多少个小图标，是否可以用现有的字体库替代小图片

5）网站中是否用到了表格table，有哪几种表格款式，能否做出抽象

6）有几种按钮款式，扁平的、3D的还是啥样的

7）写些通用点的宽度与位移类，要能与其他地方配合，例如表单，文本等

8）表单中是横排的还是竖排的；输入框是怎么样的；下拉框单选框多选框又是啥样的，有些高逼格的网站无法忍受下拉框等的默认样式，那就得美化；颜色有几种

9）需要哪些辅助类，比如情境背景色等

10）网站可以抽象出许多可复用的组建，例如分页、错误页面等

11）CSS也可以有面向对象的思维，将通用的结构抽象出来，做成一个基类。

12）开发的时候将CSS手册打开，一些周边的在线网站准备好，例如CSS参考手册，webkit css library - 属性速查，CSS3样式生成器等。

二、低版本浏览器支持

以IE6、IE7为代表的一些低版本的浏览器很多CSS3、HTML5都不支持，有些伪类也不支持，例如:before等。这个时候就要做些兼容的操作。

1、modernizr.js

　　Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。可自定义脚本下载。使用了这个插件后，在html标签中会显示class，如下图所示，如果不支持某个CSS3，就会以“no-”开头。这样做的 话，就能优雅降级，在不支持这种样式的时候，换成另外一种样式。

aaarticlea/png;base64,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" alt="" />

2、respond.js

　　Respond.js是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。

三、基本的CSS设置

1、CSS的reset

重新默认样式，这个肯定有必要。参考了HTML5 Boilerplate。模版里的CSS注释是洋文的，自己翻译了一些。

/**

 * HTML5标签 在IE 8 / 9没有定义。

 * 在IE 10/11 Firefox 中没有定义`details` or `summary`

 * 在IE 11中没有定义main

 */

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {

  display: block;

}

figure,menu{

    margin:0;

    padding:0;

}

ul,ol{

    padding:0;

    list-style-type:none;

}

h1,h2,h3,h4,h5,h6,p,ul,ol,form,dl,dt,dd,li{

    margin:0;

}

.......

2、CSS的通用样式

1）左浮动，有浮动，清浮动；左对齐，右对齐，居中；字体粗细，加粗，斜体，普通等；宋体、雅黑字体等

2）position定位，相对定位，绝对定位等；display属性，block、inline、inline-block等

3）overflow属性，有hidden、scrolldeng；zoom属性；cursor属性；text-decoration属性

4）margin的四个方向；padding的四个方向

.l{float:left;}.r{float:right;}.cb{clear:both;}

.n{font-weight:normal; font-style:normal;}.b{font-weight:bold;}.i{font-style:italic;}

.fa{font-family:Arial;}.fg{font-family:Georgia;}.ft{font-family:Tahoma;}.fl{font-family:Lucida Console;}.fs{font-family:'宋体';}.fw{font-family:'微软雅黑';}.fe{font-family:'serif';}

.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}

.rel{position:relative;}.abs{position:absolute;}.fixed{position:fixed;}

.db{display:block;}.dib{-moz-inline-stack:inline-block; display:inline-block;}.di{display:inline;}.dn{display:none;}

.ovh{overflow:hidden;}.ovs{overflow:scroll;}.vh{visibility:hidden;}.vv{visibility:visible;}

.z{_zoom:1;}.zoom1{*zoom:1;}

.mt5{margin-top: 5px;}.mt10{margin-top: 10px;}.mt15{margin-top: 15px;}.mt20{margin-top: 20px;}

.mr5{margin-right: 5px;}.mr10{margin-right: 10px;}.mr15{margin-right: 15px;}.mr20{margin-right: 20px;}

.mb5{margin-bottom: 5px;}.mb10{margin-bottom: 10px;}.mb15{margin-bottom: 15px;}.mb20{margin-bottom: 20px;}

.ml5{margin-left: 5px;}.ml10{margin-left: 10px;}.ml15{margin-left: 15px;}.ml20{margin-left: 20px;}

.pt5{padding-top: 5px;}.pt10{padding-top: 10px;}.pt15{padding-top: 15px;}.pt20{padding-top: 20px;}

.pr5{padding-right: 5px;}.pr10{padding-right: 10px;}.pr15{padding-right: 15px;}.pr20{padding-right: 20px;}

.pb5{padding-bottom: 5px;}.pb10{padding-bottom: 10px;}.pb15{padding-bottom: 15px;}.pb20{padding-bottom: 20px;}

.pl5{padding-left: 5px;}.pl10{padding-left: 10px;}.pl15{padding-left: 15px;}.pl20{padding-left: 20px;}

.cursor-pointer{cursor:pointer;}

.line-del{text-decoration:line-through;}

3、工具样式

1）清除浮动　　2）强制换行　　

3）两边对齐等样式　　4）单选框复选框文字对齐　　

5）截断文本，多出的文字显示...　　6）小三角显示

.input_align{vertical-align:-3px;}/*单选框复选框文字对齐*/

.interception{white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}/*多出的显示...*/

.br{word-wrap:break-word;word-break:break-all}/*强制换行*/

.same_height{margin-bottom:-3000px; padding-bottom:3000px}/*两边齐平*/

.fix{*zoom:1;}

.fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}/*清浮动*/

.min_fix{overflow:hidden;_zoom:1}

/**

 * 小三角

 * 纯色的就用一个，如果不是纯色的就用两个重叠再绝对定位

 */

span[class^="triangle-"]{

    content: '';

    height: 0;

    width: 0;

    position: absolute;

    pointer-events: none;

}

.triangle-top{

    border: solid transparent;

    border-width: 10px;/*宽度自定义*/

    border-top-color: #821134;/*四个方向 需要显示那个位置的就设置*/

}

4、视网膜屏幕（Retina）

现在的手机，或苹果电脑等，屏幕都是Retina屏的，高清分辨率，就要做单独处理了。下面的属性参考了bootstrap。

@media

  only screen and (-webkit-min-device-pixel-ratio: 2),

  only screen and (   min--moz-device-pixel-ratio: 2),

  only screen and (     -o-min-device-pixel-ratio: 2/1),

  only screen and (        min-device-pixel-ratio: 2),

  only screen and (                min-resolution: 192dpi),

  only screen and (                min-resolution: 2dppx) {

    .css{

        /*background-image: url(img_2x.png);*/

     }

}

5、移动端CSS

这里简单的介绍下移动端的开发。在这篇《移动web资源整理》的文章中有更多详细的说明，我里面的代码也是参照这篇文章修改的。

<!-- 页面自动调整到设备宽度，并禁止用户缩放页面-->

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<!-- 忽略将页面中的数字识别为电话号码 -->

<meta name="format-detection" content="telephone=no">

<!-- 忽略Android平台中对邮箱地址的识别 -->

<meta name="format-detection" content="email=no">

<!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

       ios7.0版本以后，safari上已看不到效果

-->

<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 -->

<!-- 可选default、black、black-translucent -->

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 去除winphone系统中a、input标签被点击时产生的半透明灰色背景 -->

<meta name="msapplication-tap-highlight" content="no">

<!-- iOS 设备的桌面图标 -->

<link rel="apple-touch-icon" href="apple-touch-icon.png">

四、字体ICON

1、自定义字体

1）以前的icon基本都是用图片sprite技术，现在有了自定义字体，在高版本的浏览器中可以替代图片了。这里我选用了Font-Awesome，有400多个图标可以选择。

2）下载后，稍微修改下那个CSS。第二个样式使用了属性选择符，这样的话只要是“fa-”开头的就是会显示字体。

3）可以直接引用字体库的CSS，也可以按需引用，写到自己的CSS文档中。

4）这里顺便介绍下Simple Icons，收集众多网站的Logo，并提供高质量、不同尺寸的png格式图片给广大网友。里面是图片，不是字体。

@font-face {

  font-family: 'FontAwesome';

  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');

  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');

  font-weight: normal;

  font-style: normal;

}

.fa, i[class^="fa-"]{

  display: inline-block;

  font: normal normal normal 14px/1 FontAwesome;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  transform: translate(0, 0);

}

2、h1--h6标签

这里参考了bootstrap中对这几个标签的重置，设置标题、副标题等可以用到，不然老是用p标签加字体大小，页面中的标签就太不丰富啦。

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {

      font-family: inherit;

      font-weight: 500;

      line-height: 1.1;

      color: inherit;

}

h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,

.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,

h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,

.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small {

      font-weight: normal;

      line-height: 1;

      color: #777;

}

h1,.h1,h2,.h2,h3,.h3 {

      margin-top: 20px;

      margin-bottom: 10px;

}

h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,

h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small {

      font-size: 65%;

}

h4,.h4,h5,.h5,h6,.h6 {

      margin-top: 10px;

      margin-bottom: 10px;

}

h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,

h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small {

      font-size: 75%;

}

h1,.h1 {font-size: 36px;}

h2,.h2 {font-size: 30px;}

h3,.h3 {font-size: 24px;}

h4,.h4 {font-size: 18px;}

h5,.h5 {font-size: 14px;}

h6,.h6 {font-size: 12px;}

五、表格

网站中或多或少会用到些表格结构，关于表格的一些属性，我在文章《关于table的一些记录》中做过记录。

实际应用中的表格是多种多样的，绝不是bootstrip模版中的几个样式所能摆平的，但模版中的思路可以借鉴，将样式抽象出来做到复用。

在CSS中单独开辟一段专门给表格的样式区域。

1、加.table样式

1）表格内的单元格是居中，居左还是居右可根据实际情况来定。

2）准备了三个对齐类.tr、.tc和.tl

aaarticlea/png;base64,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" alt="" />

2、条纹状网格.table-striped

1）这里是依赖:nth-child CSS 选择器实现的，这样就会有兼容性的问题，IE8浏览器及以下的都不支持

2）但可以写的普通点，就是在偶数或单数的tr上面单独加样式

aaarticlea/png;base64,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" alt="" />

3、带边框的表格.table-bordered

1）就是给td、th加上border属性。

2）注意标题下面的border是2像素，这些都可以找到相应的代码自定义。

aaarticlea/png;base64,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" alt="" />

4、鼠标悬停.table-hover

1）就是给tr加个:hover

aaarticlea/png;base64,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" alt="" />

5、颜色状态

1）有时候要给标题栏或内容栏给定不同的颜色，这里做了几个示例颜色

2）实际情况可能就是几种完全不同的颜色

aaarticlea/png;base64,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" alt="" />

1）根据实际情况可以组合运用

2）也可以自定义自己实际项目中的样式，组合也行，单独使用也行

六、按钮

1）这里还是参照bootstrip的按钮做demo。

2）如果模版中没有合适的，可以点击Buttons网站，一个开源的按钮CSS样式库，款式众多，也可自定义，总有一款适合你吧。

3）有三种标签可以做成按钮，<a>、<button>和<input>

1、普通样式按钮

aaarticlea/png;base64,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" alt="" />

1）如上图所示，我们常见到的

2）抽象出一个通用类.btn，然后根据颜色不同再编写不用的类.btn-default、.btn-success等，还有一个disabled，不可点击时候的样式。

3）将大小类也独立出来，.btn-lg、.btn-sm等

4）根据实际情况也可以做这三次的抽象，实际的按钮肯定与这里的不一样

5）CSS代码仅仅是部分的，将抽象基类展示了出来

<div>

            <a href="#" class="btn btn-default btn-lg">按钮</a>

            <button class="btn btn-default btn-sm">按钮</button>

            <input type="button" class="btn btn-default btn-xs" value="按钮"/>

            <a href="#" class="btn btn-primary">按钮</a>

            <button class="btn btn-primary">按钮</button>

            <input type="button" class="btn btn-primary" value="按钮"/>

            <button class="btn btn-primary" disabled="disabled">按钮</button>

</div>

2、超链接式按钮

1）像个超链接一样，如上图的最后一个按钮，只要加个.btn-link样式即可。

2）这里也可以将超链接样式给抽象出来，将大小、颜色分出来

3）独特的超链接可以单独写样式

<button class="btn btn-link">按钮</button>

3、块级按钮

将按钮宽度变为100%，有时候会有所需要，如下图所示的就要比刚刚的按钮宽很多。

<button class="btn btn-primary btn-block">块级按钮</button>

七、栅格

这里把bootstrip2.3.2中的流布局.row-fluid等搬了过来。

1、流式栅格布局

1）span1--span12，有12种选项，默认会margin-left:2%左右

2）offset1--offset12，也有12种选项，代表向左便宜的量

3）margin-left与width，都用到了小数点后14位。

4）show-grid这个类仅仅是展示用的，我就写在了页面上面，没有写在style.css文件中

<div>

              <div class="row-fluid show-grid">

              <div class="span1">1</div>

              <div class="span1">1</div>

              <div class="span1">1</div>

              <div class="span1">1</div>

              <div class="span1">1</div>

              <div class="span1">1</div>

              <div class="span1">1</div>

              <div class="span1">1</div>

              <div class="span1">1</div>

              <div class="span1">1</div>

              <div class="span1">1</div>

              <div class="span1">1</div>

            </div>

            <div class="row-fluid show-grid">

              <div class="span4">4</div>

              <div class="span4">4</div>

              <div class="span4">4</div>

            </div>

            <div class="row-fluid show-grid">

              <div class="span4">4</div>

              <div class="span8">8</div>

            </div>

            <div class="row-fluid show-grid">

              <div class="span6">6</div>

              <div class="span6">6</div>

            </div>

            <div class="row-fluid show-grid">

              <div class="span12">12</div>

            </div>

</div>

aaarticlea/png;base64,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" alt="" />

2）默认栅格布局

1）流是用百分比计算，这里的话是直接用像素计算

2）span也有12种，详细信息可查看CSS。范围在100px---940px。

3）offset也有12种。范围在100px---980px。

八、表单

这里参考了bootstrip2.3.2和bootstrip3.3.5中的表单布局。

1、输入框样式

1）默认高度是20px，line-height也是20px，加了CSS3的圆角

2）当:focus的时候，边框颜色会改变，并加了CSS3的阴影效果

3）disabled，readonly的效果稍有不同

4）有些输入框旁边需要小图标，左边或右边，这里我就不列出来了，bootstrip中有说明

5）可将输入框的height，line-height，padding等抽象出来，运用到不同场景

<fieldset class="form-group">

     <input type="text" placeholder="第一个输入框" class="form-control mb5"/>

     <input type="text" placeholder="第一个输入框" class="form-control input-sm mb5"/>

     <input type="text" placeholder="第一个输入框" class="form-control mb5" disabled="disabled"/>

     <input type="text" placeholder="第一个输入框" class="form-control mb5" readonly="readonly"/>

</fieldset>

aaarticlea/png;base64,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" alt="" />

2、多选框与单选框

1）同样也有disabled样式

2）第一种是堆叠在一起的情况

3）第二种是内联的样式

<fieldset class="form-group">

                 <div class="checkbox"><label><input type="checkbox">独占一行</label></div>

                 <div class="checkbox"><label><input type="checkbox" disabled="disabled">独占一行 不能点击</label></div>

                 <div class="radio"><label><input type="radio">独占一行</label></div>

                 <div class="radio"><label><input type="radio" disabled="disabled">独占一行 不能点击</label></div>

</fieldset>

<fieldset class="form-group">

                 <div>

                     <label class="checkbox-inline"><input type="checkbox">内联一</label>

                     <label class="checkbox-inline"><input type="checkbox">内联二</label>

                 </div>

                 <div>

                     <label class="radio-inline"><input type="radio">内联一</label>

                     <label class="radio-inline"><input type="radio">内联二</label>

                 </div>

</fieldset>

aaarticlea/png;base64,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" alt="" />

3、下拉框

1）默认高度是34px

2）IE7、IE6低版本浏览器是不受CSS影响的

3）如果还想好看点的话，可以用插件select2，他还提供了额外的功能。

<select class="form-control">

    <option value="1">1</option>

    <option value="2">2</option>

    <option value="3">3</option>

    <option value="4">4</option>

    <option value="5">5</option>

</select>

4、静态控件

1）经常是在查看页面，直接将文字输出

2）使用了form-control-static类

3）注意这里用到了上面的流布局，我是在fieldset的父级加上了row-fluid的类。

<fieldset class="form-group">

    <label class="control-label">Email</label>

    <div class="controls">

        <p class="form-control-static span6">email@example.com</p>

    </div>

</fieldset>

5、堆叠布局

control-label-block，label标签上面加上这个类即可。

<fieldset class="form-group">

                <label class="control-label-block">Name</label>

                <div class="controls">

                  <input type="text" class="form-control span6"/>

                </div>

</fieldset>

aaarticlea/png;base64,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" alt="" />

6、内联布局

1）注意下面的span3，这里没有用流布局row-fluid，而是直接引用，这个时候不是百分比，而是写死的px值。

2）fieldset外面套的是form-inline。

<div class="form-inline">

            <fieldset class="form-group">

                <label class="control-label">Name</label>

                <div class="controls">

                  <input type="text" class="form-control span3"/>

                </div>

            </fieldset>

            <fieldset class="form-group">

                <label class="control-label">Email</label>

                <div class="controls">

                  <input type="text" class="form-control"/>

                </div>

            </fieldset>

            <fieldset class="form-group">

                <button class="btn btn-primary">搜索</button>

            </fieldset>

</div>

aaarticlea/png;base64,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" alt="" />

7、水平布局

1）标题label，默认是没有设置宽度的，可以添加span1或者其他设置宽度

2）按钮可以设置offset1或者其他，来设置偏移

3）加入form-horizontal类和row-fluid类

<div class="form-horizontal row-fluid">

            <fieldset class="form-group">

                <label class="control-label span2">Name</label>

                <div class="controls">

                  <input type="text" class="form-control span6"/>

                </div>

            </fieldset>

            <fieldset class="form-group">

                <label class="control-label span2">Email</label>

                <div class="controls">

                  <input type="text" class="form-control span6"/>

                </div>

            </fieldset>

            <fieldset class="form-group">

                <button class="btn btn-primary offset2">搜索</button>

            </fieldset>

</div>

aaarticlea/png;base64,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" alt="" />

8、校验状态

1）表单免不了要做验证，而验证的时候就需要醒目的颜色提示

2）默认给了三种颜色类.has-error、.has-warning和.has-success

aaarticlea/png;base64,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" alt="" />

九、辅助类

1、情境背景颜色

通过颜色来展示意图，当你表单验证的时候，可以用下面的样式展示提示信息。

aaarticlea/png;base64,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" alt="" />

十、组建

1、分页

1）分页有四种情况，默认的、当前页、不可点击的和移过去变色

2）分页可以通过URL来分，也可以通过ajax来分，用ajax的话代码会复杂一些

3）下面是个简单的分页结构，有上一页，下一页，中间页面，还可以有总记录数，总页数，最后一页，第一页，跳转到第几页等

4）分页也可以在样式不变的基础上，做不同尺寸

<nav>

          <ul class="pagination">

            <li class="disabled"><span>&laquo;</span></li>

            <li class="active"><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

            <li><a href="#">4</a></li>

            <li><a href="#">5</a></li>

            <li><a href="#">&raquo;</a></li>

          </ul>

</nav>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPcAAAAyCAIAAAAPy9oDAAADi0lEQVR4nO2dMYviQBxH9zv5VfJJjoCQ0lLsUqSwy7VpUlkN3EHKnBAwyxUJGuSKsIWdHKaYK9Rk9Nx1Zpy/ZsLvYeGCuy+ZfY4zWVbfOABD5+3VBwAAOagcDB9UDoYPKgfDB5WD4YPKwfBB5WD43Kh8v9+XZVkURUnDyFtQ34iOHPSKqqrqum6aRrny/X5fFMVqtVoulykNz6nczCTwOVC8XNE0zW6322w2d0O/rrwsy9VqRdQ3KofCOLvdrq7rrx9zXXlRFHSzOCqHwjhN01RV9fVjbszlpImjciier0DlmkBhkQKVawKFRQpUrgkUFilQuSZQWKRA5ZpAYZEClWsChUUKVK4JFBYprKi8/Pn+i67yeH7+xmmamRtZgdxtj22eyx+YTh956hCdBUsuBln6RFD5vdv3+oNzzvkHWeXxfOGy7j7BL2/rT5mft/cXTrQ1rRBdZM9VlvoKz1AthS7klcdBEJ7uhkEQG67cW4y8xbf3v2SV566XxN1XChOhSuXdEymLGF3lWZT4UUJUeRal8f1H6SuEn5/70kMkqXis8nA2OZUdB5NZeOfR/axcmFxJKhfZ+tNEvhU1RZ660ZYzWyvnPHfPR55FrJ0XjCgeqDwOJuNT2eFsPJGbyHtW+QVKg6uoOC7NmdKLvtruIkozzmkrb5fmVAp2XjHmrspY0VUezsansuNgMh7LTuT9rTxPHeqt4eXqxaSCJacfS1a5uGmh2cDwi5dWlow82dc9ssqvIpefyftZueKlCZmRfVyk8FrfNkdW+aUwdcwlKCDsnvPU8WRnBMIVSxxMznELaxcbK1dPXGZkP5O5pvvIIvb/CEjucftzFpxfzN/x3OTFqId2n+Gsjbvbh9pWebfp4Sp7LKUNbjcnUW9wqebyJ5yFcMnV9OrxwSuJcTA7xy1cUzReOf+j9j/RKiMrzklbf06wnBA2UmanqBsQVt4NFMlZtFsLld+CpMKOvwod+f3DdOV56lx9L9mmSmkhoa7gp0XtWWRqRSvwxL/gKmJ55bq3PowsFP1RoHJNoLBIgco1gcIiBSrXBAqLFKhcEygsUqByTaCwSIHKNYHCIgUq1wQKixSoXBMoLFKgck2gsEiB97zVBIqeKDTf8xbvXy4DFD1R6Lx/OT6LQhIoXq44fhbFer0+HA5fPxKfKwRs5fi5QncTv105AAMDlYPhg8rB8EHlYPigcjB8/gGdrUFXZgcOfgAAAABJRU5ErkJggg==" alt="" />

2、错误页面

1）例如404错误呀，查询信息但返回的是空页面。这些根据实际不同，都会特别的设计。

2）这里做个简单的demo。demo比较朴素，没有图标，只有句简单的话

<div class="no-list">

    <h4>暂无数据</h4>

</div>

aaarticlea/png;base64,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" alt="" />

点击查看在线demo

demo下载：

http://download.csdn.net/detail/loneleaf1/8961803

最新文章

1. 通过btn获取所在cell
2. hehe
3. Mvc4页面缓存设置Cookie导致缓存失效
4. asp.net中virtual和abstract的区别分析
5. Spring 配置文件详解 http://www.blogjava.net/hellxoul/archive/2011/11/19/364324.html
6. Qt环境搭建（Qt Creator）
7. 移动端高清、多屏适配方案 [来源：http://div.io/topic/1092]
8. 020自动化测试 PK 手动测试
9. expect 传参
10. WndPric的使用方法
11. Rock the Tech Interview
12. MySQL时间差返回月个数
13. linux下的mysql安装
14. The 11th tip of DB Query Analyzer
15. opencv-python下简单KNN分类识别
16. Cartographer源码阅读(7)：轨迹推算和位姿推算的原理
17. 关于python性能相关测试cProfile库
18. CSS3--难以想象的滤镜效果
19. 【Android基础篇】TabWidget设置背景和字体
20. scala单元测试，包括功能测试和性能测试

热门文章

1. Android带边框表格的实现
2. python 函数之day3
3. session跟cookie的区别
4. DSY3163*Eden的新背包问题
5. CI框架，源代码一次性判断获取post(get)数据是否有某个字段值为空方法
6. 最近碰到的一些 SSL 问题记录
7. EventAggregator, EventBus的实现
8. 在.NET中使用反射实现简易插件机制
9. .NET陷阱之六：从枚举值持久化带来大量空间消耗谈起
10. Qcon会议之所见所想