JSONP

JSONP是什么

跨域资源共享(Resources Domain Resources Sharing),客户端从不同的域名发送JSON响应时绕过浏览器限制

JSONP原理解析

利用 script标签 的 src属性 进行跨域请求,服务器响应函数调用传参。

2.1 静态方法创建

代码:

<?php
 //echo "a = 1";
?>
//html代码
<script type="text/javascript" src="http://ly.yungou.ws/test/index"></script>
<script type="text/javascript">
    console.log(a);   // 1
</script>

跨域请求成功!

2.2、 动态方法创建

动态创建 script标签的方式,添加到头部,来获取变量参数

<?php
    echo "var a = 1;";
 ?>

//通过 script语句动态创建 script标签进行请求
<script type="text/javascript">
   var script = document.createElement('script');
   script.src = 'http://ly.yungou.ws/test/index';
   var head = document.getElementsByTagName('head')[0];
   head.appendChild(script);
   console.log( a );
</script>

注意:原来动态创建 script 的方式发送请求 是异步的,虽然请求成功了,但是在使用变量时,请求还没有完成,相当于还没有定义变量,然后就报错了。
解决办法:使用callback

<?php
    echo 'callback(123)';
 ?>

<script type="text/javascript">
    var script = document.createElement('script');
    script.src = 'http://ly.yungou.ws/test/index';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);

    function callback(data){
        console.log( data );    //callback(123) 对 callback 调用 输出 123
    }
</script>

那我们就可以用这种动态的方式 很轻松的 拿到后台数据了,只不过前台声明的和 后台 调用的 函数名 需要一样才行,如上面的 然而这样也不太好,每次改动,那都要前后台对接一下。

所以我们可以把回调函数名放在参数中传输。案例如下:

<?php
$callback = $_GET[ 'callback' ];    // get 通过 callback键 得到 函数名
$userInfo = array( 'username' => 'leiyuan', 'password' => '123456' );// 生成数据
$data = json_encode($userInfo);
echo "{$callback}({$data});";// hello( json_encode($arr) )

通过 script语句动态创建 script标签进行请求

    var script = document.createElement('script');
    script.src = 'http://ly.yungou.ws/test/callback?callback=hello';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
     function hello(data){
        console.log(data);// Object {username: "leiyuan", password: "123456"}        
    }
  </script>

2.3 jsonp原理:

JSONP是一个协议(并且是非正式传输协议)。 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了.
由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求,

2.4 jsonp原理

首先在客户端注册一个callback, 然后把callback的名字传给服务器。
服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

JSONP和JSON的区别:
目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域。
  JSON(JavaScript Object Notation)和JSONP(JSON with Padding)
JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。一个是描述信息的格式,一个是信息传递双方约定的方法。
  1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery等框架都把jsonp作为ajax的一种形式进行了封装;
  2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加
```

JSONP使用注意事项
1、跨系统跨域名,获取基本信息,
ps:后端不能存在任何页面跳转登陆信息,否则会请求失败
2、jsonp的缺陷:不提供错误处理(对方拒绝请求,网络不通,请求地址或者参数不正确等等)如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。
3、动态请求,都是异步请求。不支持同步请求,async无效。
请求不是通过XHR完成的,而是动态创建script标记,并请求url。跨域请求和dataType: "jsonp" 本身不支持同步操作。
4、若要在fun中使用jsonp请求后的参数,需要注意的是执行顺序,fun需要写在callback中才能成功调用参数。
5、如果没有定义jsonp和jsonpCallback,jsonp默认为"callback",jsonpCallback会是Jquery自动生成的函数名。
6、请求返回的是script tag,首先会调用jsonpCallback函数,不管是否找到该函数,都会调用success函数

参考资料

http://api.jquery.com/jQuery.ajax/

【前端技术文档】CSS display属性

整    理:曹燕、肖雅君

时    间:2015-11-20

说    明:CSS display属性常用的取值

 

1.定义及取值

1.1定义

display 属性规定元素应该生成的框的类型。

1.2可能取值CSS display属性59

常用取值为:

block——使元素表现为块级元素(又叫块元素)

inline——使元素表现为内联元素(又叫行内元素)

inline-block——使元素表现为内联块状元素

2.块级元素、内联元素及内联块状元素

2.1区别

(1)块级元素会独占一行,其宽度若不设置则自动填满其父元素宽度;

内联元素不会独占一行,相邻的内联元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化,处于行尾的内联元素会拆分在两行显示;

内联块状元素也不会独占一行,相邻的内联元素会排列在同一行里,直到一行排不下,才会换行,其宽度若不设置则随元素的内容而变化,处于行尾的内联块状元素会整体移到第二行显示。

(2)块级元素可以设置 width, height属性;

内联元素设置width,  height无效;

内联块状元素可以设置 width, height属性。

(3)块级元素可以设置margin 和 padding;

内联元素水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果;

内联块状元素可以设置margin 和 padding。 

2.2常用html元素分类

块级元素:div,p,h1 -h6,hr,ol,ul,dl,form,table,pre,menu

内联元素:a,br,img,input,label,select,span,strong,b,em,i,small,cite,code,sub,sup,textarea

3.示例

3.1示例1——是否独占一行

说明:块级元素会独占一行;内联元素和内联块状元素不会独占一行,而是会排在一行中,直到排不下才会换行显示,但二者在处理行尾时略有不同。CSS display属性875 CSS display属性876

效果:CSS display属性882

3.2示例2——是否可以设置宽高

说明:块级元素和内联块状元素都可以设置宽高;内联元素不可以设置宽高。CSS display属性937 CSS display属性939

效果:CSS display属性946

3.3示例3——设置margin值

说明:块级元素和内联块状元素可以设置margin的4个方向值;内联元素只可以设置margin-left和margin-right值,上下的margin设置之后是无效的。CSS display属性1052 CSS display属性1054

效果:CSS display属性1060

3.4示例4——设置padding值

说明:块级元素和内联块状元素可以设置padding的4个方向值;内联元素只可以设置padding-left和padding-right值,上下的padding设置之后是无效的。CSS display属性1171 CSS display属性1173

效果:CSS display属性1179

3.5示例5——应用display转换元素类型

说明:通过设置display的值可以改变任意元素的类型CSS display属性1234 CSS display属性1236

效果:CSS display属性1242

【前端技术文档】水平垂直居中方式

整    理:曹燕、肖雅君

时    间:2015-11-13

说    明:html中元素实现垂直水平居中的方式

 

1. 块级元素和内联元素

1.1区别

1.2常用块级及内联元素

1.3内联块状元素

2. 水平居中

2.1 text-align:center

2.2 margin:0 auto

2.3 绝对定位水平居中方法一

2.4绝对定位水平居中方法二

2.5浮动配合相对定位

3. 垂直居中

3.1 line-height

3.2 vertical-align:middle配合line-height

3.3绝对定位垂直居中方法一

3.4绝对定位垂直居中方法二

4. 表格的居中问题

4.1表格居中

4.2扩展

5. 常用的绝对居中(水平垂直居中)方法

5.1一行文字的水平垂直居中

5.2内联元素的水平垂直居中

5.3任何元素的水平垂直居中

5.4translate方法

 

1.块级元素和内联元素

1.1区别

(1)块级元素会独占一行,其宽度自动填满其父元素宽度。

内联元素不会独占一行,相邻的内联元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。

(2)块级元素可以设置 width, height属性。

内联元素设置width,  height无效。

(3)块级元素可以设置margin 和 padding.

内联元素水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。

1.2常用块级及内联元素

块级元素:div,p,h1 -h6,hr,ol,ul,dl dt dd,form

内联元素:a,br,img,input,label,select,span,strong,b,em,font,i,small

1.3内联块状元素

同时具备内联元素、块状元素的特点,设置方法是display:inline-block

①和其他元素都在一行上;

②元素可以设置width, height,margin 和 padding。

 

2.水平居中

2.1 text-align:center

设置位置:块级元素

实现效果:使得块级元素内部的文本及内联元素、内联块状元素在水平方向上居中。并且它里面所有的文字、内联元素、内联块状元素都只会相对于最近一层块级元素来实现水平居中。

注:在IE6、7中,它能使任何元素进行水平居中。

示例:水平垂直居中方式2277 水平垂直居中方式2279

效果:水平垂直居中方式2285

 

2.2 margin:0 auto

设置位置:块级元素

实现效果:使块级元素自身水平居中。使用这个方法的前提是块级元素必须设置宽度,这样才能根据宽度自动调节左右两边的margin值,使之居中。

示例:水平垂直居中方式2389 水平垂直居中方式2391

 

效果:水平垂直居中方式2397

2.3 绝对定位水平居中方法一

方法:position:absolute;left:50%;再设置magin-left的值为负的元素宽度的一半。

设置位置:任何元素(任何元素设置了绝对定位之后display属性值会变为inline-block)。前提是元素必须设置宽度。

实现效果:使任何元素在水平方向上居中

示例:水平垂直居中方式2559 水平垂直居中方式2561

 

效果:水平垂直居中方式2567

2.4绝对定位水平居中方法二

方法:position:absolute; left:0; right:0; margin:auto;

设置位置:任何元素。前提是元素必须设置宽度。

实现效果:使任何元素在水平方向上居中

示例:水平垂直居中方式2683 水平垂直居中方式2685

 

效果:水平垂直居中方式2691

 

2.5浮动配合相对定位

方法:给要居中的元素加一层wrapper,wrapper设置:position:relative; float:left; left:50%;居中元素自身设置:position:relative; left:-50%;

设置位置:任何元素。优点是无需知道元素的宽度。

示例:水平垂直居中方式2844 水平垂直居中方式2846

效果:水平垂直居中方式2852

3.垂直居中

3.1 line-height

方法:将一个元素height和line-hieght的值设为一样

设置元素:块级元素

实现效果:使得块元素内部的文本垂直居中显示

示例:水平垂直居中方式2945 水平垂直居中方式2947

效果:水平垂直居中方式2953

3.2 vertical-align:middle配合line-height

设置元素:块级元素设置line-height与自身的height相同,它的内联子元素设置vertical-align:middle。

实现效果:使得内联元素相对于父元素垂直居中。因为vertical-align设置的是内联元素的基线相对于该元素所在行的基线的垂直对齐方式,必须先通过line-height设置行高,然后vertical-align:middle使得该元素的基线与所在行基线垂直居中对齐。

注:在IE6中无效。

示例:水平垂直居中方式3212 水平垂直居中方式3214

效果:水平垂直居中方式3220

3.3绝对定位垂直居中方法一

方法:position:absolute;top:50%;再设置magin-top的值为负的元素高度的一半。

设置位置:任何元素(任何元素设置了绝对定位之后display属性值会变为inline-block)。前提是元素必须设置高度。

实现效果:使任何元素在垂直方向上居中。

示例:水平垂直居中方式3380 水平垂直居中方式3382

效果:水平垂直居中方式3388

3.4绝对定位垂直居中方法二

方法:position:absolute;top:0;bottom:0;margin:auto;

设置位置:任何元素。前提是元素必须设置高度。

实现效果:使任何元素在垂直方向上居中。

示例:水平垂直居中方式3502 水平垂直居中方式3504

效果:水平垂直居中方式3510

4.表格的居中问题

4.1表格居中

(1)方法一:通过表格自身属性实现。水平居中通过align=”center”实现,垂直居中通过valign=”middle”实现,设置在th或td上,使得单元格的内容居中。

默认情况下,th完全居中,td在垂直方向上居中。

示例:水平垂直居中方式3645 水平垂直居中方式3647

效果:水平垂直居中方式3653

(2)方法二:通过css属性实现。水平居中通过text-align:center实现(前提是单元格内容是内联元素或内联块状元素),垂直居中通过vertical-align:middle实现。

4.2扩展

对于那些不是表格的元素,可以通过display:table-cell 来把它模拟成一个表格单元格,然后利用4.1中表格居中的方法二实现居中。

示例:水平垂直居中方式3833 水平垂直居中方式3835

效果:水平垂直居中方式3841

5.常用的绝对居中(水平垂直居中)方法

5.1一行文字的水平垂直居中

方法:text-align:center;外层块元素的line-height与height值相同

5.2内联元素的水平垂直居中

方法:外层块设置text-align:center;vertical-align:middle;line-height与height值相同

5.3任何元素的水平垂直居中

方法一:position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;

方法二:position:absolute;top:50%;left:50%;margin-top:负半元素高;margin-left:负半元素宽;

5.4translate方法

方法:元素设置position:absolute;top:50%;left:50%;然后设置transform: translate(-50%,-50%);

示例:水平垂直居中方式4264 水平垂直居中方式4266

效果:水平垂直居中方式4272

【前端技术文档】CSS Sprites

整    理:曹燕、肖雅君

时    间:2015-10-23

说    明:CSS Sprites

1. 原理简介

2. 优点

3. 使用场景

4. background-position属性

    4.1基本用法

    4.2使用示例

5. CSS Sprites使用方法

    5.1设置background-image

    5.2设置background-repeat

    5.3设置background-position

6. 综合示例

7. 使用注意点

8. 雪碧图在线生成工具

 

1.原理简介

CSS Sprites是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”等属性组合进行背景定位。

2.优点

①减少网页的http请求;

②减少图片的字节,n张图片合并成1张图片的字节总是小于这n张图片的字节总和;

③解决网页设计师在图片命名上的困扰,只需对一张集合的图片进行命名,不需对每一个小元素进行命名;

④更换风格方便,只需在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。

3.使用场景

①静态图片,不随用户信息的变化而变化;

②小图片,图片容量比较小;

③加载量比较大。

4.background-position属性

4.1基本用法

要想灵活使用CSS Sprites,首先要完全理解background-position这个属性的含义和使用。background-position属性用于设置背景图像显示的起始位置,与CSS Sprites相关时的取值方式是:

background-position : x , y ;

其中x设置了水平位置 ,是指背景图片左边界距离容器左边界的距离。若背景图片左边界在容器左边界的左方,则x<0;若在容器左边界的右方,则x>0.

y设置了垂直位置,是指背景图片上边界距离容器上边界的距离。若背景图片上边界在容器上边界的上方,则y<0;若在容器上边界的下方,则y>0;

background-position的默认取值是0,0.

4.2使用示例

例如:有一个宽300px,高150px的容器,有一张背景图片bg.jpgCSS Sprites1650

 

①background-position:0,0; 时的效果是:CSS Sprites1685

②background-position:70px,40px; 时的效果是:CSS Sprites1727

③background-position:-70px,-40px; 时的效果是:CSS Sprites1771

5.CSS Sprites使用方法

首先将网页上用到的小图标合并到一张图片上。

5.1设置background-image

background-image: url(bg.jpg);

将容器的背景图片设置为最终合成的雪碧图;CSS Sprites2041

5.2设置background-repeat

background-repeat: no-repeat;

将背景图片设置为不重复;

5.3设置background-position

通过设置这个属性将背景图片显示的位置调整到需要显示的部分。

6.综合示例

该示例使用的雪碧图以及要实现的效果分别如下:CSS Sprites2041CSS Sprites2050备注:雪碧图中每个图标的宽度是40px,高度是24px。

①html部分的代码如下(整体上是一个ul,每个图标的位置都是一个i元素):CSS Sprites2121

②加上基本的css样式CSS Sprites2135

此时的效果是:CSS Sprites2145

③给i元素添加背景图片并将background-repeat设置为no-repeatCSS Sprites2190

此时的效果是:CSS Sprites2200

解释:因为background-position的默认值是(0,0),所以背景图片(雪碧图)都是紧贴容器左上角(i元素的左上角)显示的。

④以第二个图标为例,要显示的图标是绿色皮鞋,此时应该将背景图片向上移动24px,横向上不需移动,所以第二个i元素的background-position设为(0,-24px)CSS Sprites2360

此时效果为:CSS Sprites2369

⑤下面的几个图标用一样的方法进行定位显示,这样就能实现最终的效果了。

CSS Sprites2407

7.使用注意点

①在手机端切图的时候注意要为每张图片之间留出足够空隙。因为使用元素的地方可能包含各种不同的内容,这些内容会导致容器变宽变高,预留了足够的空白的话,在容器大小发生变化时,可以避免其他的图片显示出来。

②不要等完成所有工作后再开始使用CSS Sprites。在网站全部完成后再使用CSS Sprites,也就意味着你要返回重写CSS,并且还要把用到的一大堆图片再丢到Photoshop里拼合成一张图片。如果在刚开始构建页面时就着手使用CSS精灵,那么一切都会变得简单。

③有些情况不要使用CSS Sprites。

(1)wap端:需要图片的高度撑起内容的,如设置img{width:100%;height:auto;}不能合成雪碧图。

(2)某些需要重复的图片不能合成。如:需要重复的背景图。

(3)轮播的banner图

8.雪碧图在线生成工具

如果用photoshop或其他工具测量计算每一个背景单元的精确位置,虽然没什么难度,但是很繁琐,可以利用一些雪碧图在线生成工具来帮助我们实现。

工具地址:http://www.cn.spritegen.website-performance.org/

①打开网页之后,页面上会有一些示例图片,点击“Clear”按钮将之清空CSS Sprites3012

②点击“Open”打开文件夹选择多张图片(直接选多张图片即可,不可用压缩包)

例如文件夹中有:CSS Sprites3063

全选放入之后生成:CSS Sprites3075

③点击“Settings”可以进行相关设置,包括图片的布局(紧缩型、垂直型、水平型)、生成css或less代码、代码前缀、图片之间的间距。保存设置,生成的雪碧图会自行进行调整。CSS Sprites3167

④得到想要的效果之后,点击“Downloads”进行下载。包括生成的雪碧图、css代码,以及使用的html代码。CSS Sprites3226 CSS Sprites3228 CSS Sprites3230

 

推荐一些其他实用的工具:

雪碧图在线生成工具: http://www.spritebox.net/

雪碧图在线生成工具:http://csssprites.com/

background定位工具:http://www.spritecow.com/

【前端技术文档】DIV+CSS布局

整    理:晋哲、徐秀

时    间:2015-10-16

说    明:DIV+CSS布局


> 简述

常见的网页布局方式,它取代了使用表格定义布局的老式方法。

DIV+CSS布局方式采用DIV盒模型结构将页面各部分内容划分到不同的区块,然后使用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等样式。具备全局设计观念,进行网页的统一设计管理,通过一个样式表,牵一发而动全身,只要修改样式表,就可以统一全站的风格。

简单地说,DIV用于搭建网页结构(框架)、CSS用于创建网页表现(样式/美化),页面内容和样式表现相分离,对网页进行标准化重构。


> 实例步骤

一、浏览设计效果图
综览设计图,可将页面结构区块划分,先构思全局架构,再细分局部结构。
div_pic1

二、HTML整体布局

在编写html代码时,一般结合两种方式:

1、从外到内
从整体到局部,先编写外围框架代码,再嵌套内部元素代码

如常见的页面结构:
body {}
  └Wrapper {}               /*页面层容器*/
      ├Header {}            /*页面头部*/
      ├PartMain {}          /*页面主体*/
      │   ├Sidebar {}      /*侧边栏*/
      │   └PartContent {}  /*主体内容*/
      └Footer {}            /*页面底部*/

2、从上到下
按页面结构、元素等顺序,有条不紊的搭建HTML框架

如下图简单的局部HTML代码结构:
div_pic2

总结:这两种方式没有先后之分,可以从外到内,先把整个页面的框架搭好,再一步步写每个区块里面的内容;也可以从上到下,按顺序先完成一块区域里面的全部内容,再去搭建下一个区块。


三、CSS样式美化

CSS通过选择器来关联定义盒模型的位置、大小、边框、内外边距、排列方式等样式属性。

下图为盒模型简图:
div_pic3

在编写样式进行页面表现时,有以下三种方式来插入样式表:

1、外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

例:
<head>
<link rel="stylesheet" href="style.css">
</head>

2、嵌入式样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

例:
<head>
……
<style>
    body{background-color: #fff;}
</style>
</head>

3、内联样式
当特殊的样式需要应用到个别元素时,可以使用内联样式。

例:
<span style="color: #000; margin-left: 20px">Hello World</span>

总结:三种样式表优先使用外部样式表、嵌入式样式表用来调试用的,一般不使用内联样式表。


> 定义说明

一、DIV+CSS的实质

DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(Table)布局定位的方式不同,它可以实现网页页面内容(HTML)与表现(CSS)相分离。

DIV+CSS是WEB标准中常用的术语之一,而标准的叫法应是XHTML+CSS。通常是为了区别HTML网页设计语言中的表格(Table)定位方式,因为DIV与Table都是XHTML或HTML语言中的一个标记,而CSS只是一种表现形式。所谓DIV+CSS布局的叫法容易让人误解为通篇只使用DIV标签,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。

当然不是所有的网页都需要用DIV+CSS布局,不要让DIV成为Table的替代品,例如数据页面、报表之类的页面的时候还是会用Table,WEB标准里并没有说要摒弃Table。

二、DIV+CSS的优势

1、使页面载入得更快
由于将大部分页面样式代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。

2、降低流量费用
页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。

3、修改设计时更有效率
由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。

4、保持视觉的一致性
DIV+CSS最重要的优势之一,以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。

5、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。

6、对浏览者和浏览器更具亲和力
我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。

三、存在的问题

1、对于CSS的高度依赖使得网页设计变得比较复杂。
相对于表格布局(Table),DIV+CSS布局要比表格定位复杂的多,在网站架构时容易出现页面错位等情况,所以需要编写HTML代码和样式文件时结构严谨,样式兼容。

2、CSS文件异常将影响整个网站的正常浏览。
CSS网站制作的设计元素通常放在几个外部文件中,这一个或几个文件有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。

3、对于网页的浏览器兼容性问题比较突出。
DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如CSS3样式属性IE兼容问题。因此在进行设计的时候也要考虑到不同浏览器的情况,进行更改和调试。

【前端技术文档】HTML表格布局

整    理:曹燕、肖雅君

时    间:2015-10-16

说    明:HTML表格布局

 

1. 表格标签

    1.1一个完整表格的示例

    1.2一个简化表格的示例

    1.3一个竖形表格的示例

2. 表格属性

    2.1设置宽、高、边框、文字对齐方式、背景颜色

    2.2设置单元格间距

    2.3设置单元格衬距

    2.4合并单元格——合并行

    2.5合并单元格——合并列

3. CSS表格属性

    3.1 border-collapse属性

    3.2 border-spacing属性

    3.3 caption-side属性

    3.4 empty-cells属性

    3.5 table-layout属性

4. 表格布局

 

  1. 表格标签
<table> 定义表格
<caption> 定义标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元格的内容
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义表格列的属性
<colgroup> 定义表格列的组

备注:

定义一个表格必须使用的标签:<table>、<tr>、<th>或<td>

不常使用的标签:<col>、<colgroup>

1.1一个完整表格的示例

代码:html表格布局1443

效果:html表格布局1449

1.2一个简化表格的示例

代码:html表格布局1469

效果:html表格布局1475

1.3一个竖形表格的示例

代码:html表格布局1495

效果:html表格布局1501

2.表格属性

width 规定表格的宽度
height 规定表格的高度
border 规定表格的边框
cellspacing 规定单元格间距(单元格与单元格之间的距离)
cellpadding 规定单元格衬距(单元边沿与其内容之间的空白。)
bgcolor 规定表格的背景色
background 规定表格的背景图片
align 规定表格的对齐方式
rowspan 合并单元格时规定跨域的行数
colspan 合并单元格时规定跨越的列数

备注:

width、height、bgcolor、background等属性不推荐使用,建议在css代码中进行样式的设置。

2.1设置宽、高、边框、文字对齐方式、背景颜色

代码:html表格布局1822

效果:html表格布局1828

2.2设置单元格间距

代码:html表格布局1846

效果:html表格布局1852

2.3设置单元格衬距

代码:html表格布局1870

效果:html表格布局1876

2.4合并单元格——合并行

代码:html表格布局1897

效果:html表格布局1903

2.5合并单元格——合并列

代码:html表格布局1924

效果:html表格布局1930

3.CSS表格属性

border-collapse 规定是否合并表格边框。
border-spacing 规定相邻单元格边框之间的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否显示表格中的空单元格上的边框和背景。
table-layout 设置用于表格的布局算法

3.1 border-collapse属性

该属性用于是否合并表格边框。border-collapse的取值有:(默认取值是separate)

①separate:边框会被分开。不会忽略border-spacing和empty-cells 属性。

②collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

③inherit:规定应该从父元素继承 border-collapse 属性的值。

不同取值的效果:html表格布局2326 html表格布局2332

3.2 border-spacing属性

该属性用于指定分隔边框模型中单元格边界之间的距离。使用px,cm等单位,不可为负值。它仅在border-collapse取值为separate时才起作用。border-spacing的取值有:

①length:设置水平和垂直间距。

②length,length:第一个设置水平间距,而第二个设置垂直间距。

③inherit:从父元素继承 border-spacing 属性的值。

不同取值的效果:html表格布局2550 html表格布局2554

3.3 caption-side属性

该属性用于指定表格标题相对于表格边框的放置位置。caption-side的取值有:(默认值是top):

①top:把表格标题定位于表格之上。

②bottom:把表格标题定位于表格之上。

③inherit:从父元素继承 caption-side 属性的值。

不同取值的效果:html表格布局2708 html表格布局2715

3.4 empty-cells属性

该属性规定了是否显示表格中的空单元格,如果显示,就会绘制出单元格的边框和背景.它仅在border-collapse取值为separate时才起作用。empty-cells的取值有:

①hide:不在空单元格周围绘制边框。

②show:在空单元格周围绘制边框。

③inherit:从父元素继承 empty-cells 属性的值。

不同取值的效果:html表格布局2904 html表格布局2909

3.5 table-layout属性

该属性用于指定完成表布局时所用的布局算法,即表格的列宽度是由单元格内容设定【即自动布局】,还是由表格宽度和列宽度设定【即固定布局】。table-layout的取值有:(默认取值是automatic)

①automatic:列宽度由单元格内容设定。

②fixed:列宽度由表格宽度和列宽度设定。

③inherit:从父元素继承 table-layout 属性的值。

当已经设定表格三列的宽度为20%,40%,40%,同时设置table-layout时的效果:html表格布局3160 html表格布局3162

4.表格布局

表格的功能主要有两种:结构布局(即组织页面的排版)、内容容器(即组织和显示信息)。

网页结构是由一个个矩形组成的,所有的内容都是放在矩形内的。这些矩形就可以是一个个表格;网页中的文字、图片、多媒体等内容都可以放在表格的单元格内。

一般通过表格的嵌套实现页面的结构布局。

布局示例:html表格布局3311

代码:html表格布局3317

参考网站:

w3cshcool: http://www.w3school.com.cn/