粉阿吉整理(4)之------Css Sprites、Css 统筹与表单表格

CSS Sprites(图片整合技术) 精灵图 雪碧图

将导航背景图片，按钮背景图片等不常更换的小图片有规则的合并到一张大的背景图上。

即将多张图片合为一张整图，然后用background-position来实现背景图片的定位。

精灵图的优势

通过整合图片

1. 减少对服务器的请求数量
2. 减少图片的体积从而加快页面加载速度

CSS统筹

1. 整站里相同的css样式提取到一个样式表里，各个页面调用相同的样式文件即可
2. 网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件

//重置样式表
html{
     overflow-x: hidden;}
body,ul,li,dl,dt,dd,p,ol,h1,h2,h3,h4,h5,h6,form,img,table,fieldset,legend,figure,figcaption{
     margin:0; padding:0;}
ul,li,ol{
     list-style:none;}
img,fieldset{
     border:0; }
img{
     display:block;}
a{
     text-decoration:none; color:#333;}
h1,h2,h3,h4,h5,h6{
     font-weight:normal;}
em,i,address{
     font-style: normal;}
body{
      font-family:"微软雅黑";font-size:12px;}
input,a{
     outline:none;}
.fl{
     float: left;}
.fr{
     float: right;}
.clean:after{
     content: '.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}

表单

- 表单的组成

表单域<form name="" method="" action="">form> 
表单控件<input type="text" value=""/> 
提示信息

- 表单控件元素

单选按钮：           <input type="radio" name=""   checked="checked" /> 

复选框：              <input type="checkbox" name=""  checked="checked" />            
				(disabled="disabled" :禁用)  (checked="checked" :默认选中)  (enabled：可用的)

文件上传：           <input type="file" name="" accept="image/gif，image/jpeg" /> 
                 	  限制图像的格式，可以写为：accept="image/*"  
                 	  
图像形式的提交按钮： <input type="image" src="submit.gif" alt="Submit" />

隐藏字段：            <input type="hidden" name="country" value="Norway" />

下拉列表（菜单）：         <select name="">      <option>菜单内容option>      select>

文本域/多行文本框：    <textarea  name="名" cols="宽度" rows="行数"> textarea>

表单字段集              <fieldset>fieldset>

字段级标题              <legend>legend>

提示信息标签           <label for="绑定控件id名">label>

表格

表格的作用：显示数据

- 表格的CSS属性

单元格间距(该属性必须给table添加)        border-spacing:value;

合并相邻单元格边框                border-collapse:separate(边框分开)/collapse(边框合并)；

无内容单元格显示、隐藏                 empty-cells:show/hide; 

固定单元格宽高(只能固定宽度)         table-layout:auto/fixed

表格标题                             标题内容 

表格标题位置：            caption-side:top/right/bottom/left;
  * 说明：left,right位置只有火狐识别，top,bottom IE6以上版本支持，ie6以下版本不支持其它属性值，只识别top;

- 表格的基本组成

表格 table      行tr    列td     列标题放在tr里 th:

添加组分隔线 ：       rules="rows/cols/all/none/groups"  

说明：      rows:位于行之间的线条
            cols:位于列之间的线条 
            all：位于行和列之间的线条        
            none:没有线条
            groups:位于行组和列组之间的线条

<table border="1">
    <caption>几种页面实现的比较caption>
    <thead>
        <tr><th>实现方式th><th>代码量th><th>搜索引擎友好th><th>特殊终端兼容th>tr>
    thead>
    <tbody>
        <tr><th>table 布局th><td> 多 td><td> 差 td><td> 一 般 td>tr>
        <tr><th>乱用标签的CSS布局th><td>少td><td>一 般td><td>差td>tr>
        <tr><th>标签语义良好的CSS布局th><td>少td><td>好td><td>好td>tr>
    tbody>
table>

- 数据行分组

表头 <thead></thead>     表体 <tbody></tbody>        表尾<tfoot></tfoot>        
说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。

<colgroup span="value"></colgroup> <col span="value" />  

说明：1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。 
      2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。 
      3）可以通过给table添加rules="groups"属性来给分组列添加组分割线。 
注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来决定表格内容部分分割线rules应该处于的位置，而col没有这个功能。