我的css排版实践

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>float_clear.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=gbk">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">

body {text-align: center;}

div {border: 1px solid black}

.topdiv {width: 960px;margin: 0 auto}

.clearfix:after {

   content: ".";

   display: block;

   height: 0;

   clear: both;

   visibility: hidden;

}

.clearfix {display: inline-block;}

</style>

  </head>

  <body>

   <span>居中显示"margin: 0 auto"即可,ie则需要在body上加上text-align:center</span>

    <div class="topdiv" >

     <div>正确的方法

     <div style="float: none;">top</div>

    <div style="float: left;">left</div>

    <div style="float: left;width: 90%">center</div>

    <div style="float: none;">right</div>

    <div style="float: none;">bottom</div>    

     </div>

     <div>正确的方法

     <div style="float: none;">top</div>

    <div style="float: left;;width: 8%">left</div>

    <div style="float: left;width: 82%">center</div>

    <div style="float: none;">right</div>

    <div style="float: none;">bottom</div>    

     </div>

     <div>错误的方法,且浏览器表现不同,right的边框为红色

     <div style="float: none;">top</div>

    <div style="float: left;width: 2%">left</div>

    <div style="float: left;width: 90%">center</div>

    <div style="float: none;width: 8%;border-color: red">right</div>

    <div style="float: none;">bottom</div>    

     </div>

     <div style="">浮动撑出

     <div style="float: none;">top</div>

    <div style="float: left">left</div>

    <div style="float: left;width: 980px">center</div>

    <span class="clearfix">使用clear无效</span>

    <div style="float: none;">right</div>

    <div style="float: none;">bottom</div>    

     </div>    

     <div style="float: left;">浮动撑出,解决方法--父元素设置float

     <div style="float: none;">top</div>

    <div style="float: left">left</div>

    <div style="float: left;width: 980px">center</div>    

    <div style="float: none;">right</div>

    <div style="float: none;">bottom</div>      

     </div>

     <div >我觉得最好的

     <div style="float: none;">top</div>

     <div style="float: left;">

     一行的使用一个div包含,这样可以做到下面不超出

    <div style="float: left">left</div>

    <div style="float: left;width: 90%">center<br/>

    宽度一般排版的时候会知道,不应该超出,所以最好分配宽度 <br/>    

    122222222222222222222222222222222222222222222222

    122222222222222222222222222222222222222222222222

    1222222222 22222222222222222222222222222222222222

    1222222222222222222222 22222222222222222222222222

    1222222222222222 22222222222222222222222222222222

    122222222222222222222 222222222222222222222222222

    122222222222222222222222222222222222222222222222

    1222222222 22222222222222222222 222222222222222222

    122222222222222222222222222222222222222222222222

    122222222222 222222222222222222222222222222222222

    12222222222222222222222 2222222222222222222222222

    122222222222222222222222222222222222222222222222

    122222222222222222222222222222222222222222222222

    1222222222222222 22222222222222222222222222222222

    122222222222222222222222222222222222222222222222    

    </div>    

    <div style="float: left;">right</div>

    </div>

    <div style="float: none;">换行的话使用float: none;bottom</div>      

     </div>    

    </div>

  </body>

</html>

Continue reading 我的css排版实践

CSS布局:详解浮动属性Float

相关文章:CSS布局:详解定位属性Position

什么是浮动?

浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。
这是一个例子:

在排版软件里面,存放文字的盒子可以被设置为允许图文混排,或者无视它。无视图文混排将会允许文字出现在图片的上面,就像它甚至不会在那里一样。这就是图片是否是页面流的一部分的区别。网页设计与此非常类似。

在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着。

像这样在一个元素上用CSS设置浮动:

#sidebar { float: right; }

fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的) 使元素不浮动,Inherit 将会从父级元素获取float值。

浮动的用处

除了简单的在图片周围包围文字,浮动可用于创建全部网页布局。

浮动对小型的布局同样有用。例如页面中的这个小区域。如果我们在我们的小头像图片上使用浮动,当调整图片大小的时候,盒子里面的文字也将自动调整位置:

同样的布局可以通过在外容器使用相对定位,然后在头像上使用绝对定位来实现。这种方式中,文本不会受头像图片大小的影响,不会随头像图片的大小而有相应变化。

清除浮动

清除(clear)是浮动(float)的相关属性.一个设置了清除浮动的元素不会如浮动所设置的一样,向上移动到浮动元素的边界,而是会忽视浮动向下移动。如下,一图顶千言。

上例中,侧栏向右浮动,并且短于主内容区域。页脚(footer)于是按浮动所要求的向上跳到了可能的空间。要解决这个问题,可以在页脚(footer)上清除浮动,以使页脚(footer)待在浮动元素的下面。

#footer { clear: both; }

清除(clear)也有4个可能值。最常用的是 both,清楚左右两边的浮动。left 和 right 只能清楚一个方向的浮动。none 是默认值,只在需要移除已指定的清除值时用到。inherit 应该时第五个值,不过很奇怪的是 IE 不支持(这个不奇怪吧,IE 从来都这么特立独行吧 -糖伴西红柿注)。只清除左边或右边的浮动,实际中很少见,不过绝对有他们的用处。

伟大的塌陷

使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素,那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景,这个问题会很难被注意到,但是这是一个很重要的问题。

塌陷的直观对立面更不好,看看下面的情况:

当上面的块级元素自动扩展以适应浮动元素时,段落间的文本流中会出现非自然的空白换行,而且没有有效的方法来修正这个问题。对于这种情况,设计师的抱怨会更甚于对塌陷的抱怨(没理解,不是设计完成之后才会进行页面编码吗?- 糖伴西红柿)。

为了防止怪异的布局和跨浏览器的问题,塌陷问题几乎总是被要处理的。我们在容器中的浮动元素之后,容器结束之前来清除浮动。

清除浮动的技术

如果你很明确的知道接下来的元素会是什么,可以使用 clear:both; 来清除浮动。这个方法很不错,它不需要 hack,不添加额外的元素也使得它有良好的语义性。当然事情并不是都可以这样解决的,工具箱中还是需要另外几个清除浮动的工具。

  • 空div方法从字面来看,是一个空的 div。
    。有时可能会用
    或者一些其他元素,但是 div 是最常用的,因为它没有浏览器默认样式;没有特殊功能,而且一般不会被 css 样式化。这个方法因为只是为了表现,对页面没有上下文涵义而被纯语义论者嘲笑。诚然,从严格的角度来说他们是对的,但是这个方法有效而且没有任何伤害。
  • overflow 方法在父元素上设置 overflow 这个 css 属性。如果父元素的这个属性设置为 auto 或者 hidden,父元素就会扩展以包含浮动。这个方法有着较好的语义性,因为他不需要额外元素。但是,如果需要增加一个新的 div 来使用这个方法,其实就和空 div 方法一样没有语义了。而且要记住,overflow 属性不是为了清除浮动而定义的。要小心不要覆盖住内容或者触发了不需要的滚动条。
  • 简单清除方法使用了一个聪明的 css 伪选择符(:after)来清除浮动。比起在父元素上设置 overflow,只需要给它增加一个额外的类似于”clearfix”的类。这个类使用如下 css:
    .clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
    }
    这会在清除浮动的父元素之后应用一点看不见的内容。这不是全部内容,还需要一些额外的代码来适应那些老旧的浏览器。

不同的情况需要不同的浮动清除方法。以一个具有不同样式块的网格为例。

为了从视觉上较好的把相似的块联系起来,需要在必要的地方开启新行,这里是颜色改变的地方。如果每个颜色组都有一个父元素的话,我们可以使用 overflow 或者 简单清除方法。或者,在每组之间用一个空div方法。额外的 div 之前并不存在,可以自己试试来看看哪个方法好。

浮动的问题

浮动因脆弱而饱受诟病。大多数的脆弱性来自于 IE6 及其一系列的浮动相关 bug。因为越来越多的设计师不再支持 IE6 了,你也可以不关注它了。不过对于那些要关注的人来说,这里有些大概。

  • 推倒是浮动元素内的元素(大多是图片)比浮动元素本身宽造成的现象。大多数的浏览器会在浮动之外渲染图片,但是不会有伸出来的部分影响其他布局。IE 会扩展浮动来包含图片,精彩大幅度地影响布局。一个普遍的例子是突破伸出主内容之外把侧栏推到下面。

    快速修正:确保不是图片造成这种情况,使用 overflow:hidden 来切除多余的部分。
  • 双倍边距bug处理 IE6 时,另一个需要记住的事情是,如果在和浮动方向相同的方向上设置外边距(margin),会引发双倍边距。快速修正:给浮动设置 display:inline; 而且不用担心,它依然是块级元素。
  • 3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素,好像浮动元素的周围有一个奇怪的力场一样。快速修正:在受影响的文本上设置宽度或高度。
  • IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉。快速修正:用父元素的底内补白(padding)代替。

替代品

如果需要文本环绕图片,除了 float 之外还真没多少替代品。说到这,可以看看这个使文本围绕不规则形状的聪明技术。对于页面布局,肯定有很多选择。Eric Sol 在 A List Apart 上有一篇文章人造绝对定位,介绍了一个很有意思的技术,它在很多方面把浮动的扩展性和绝对定位的实力结合起来。CSS3 有 Template Layout Module ,当它被广泛支持时,将会是一个页面布局技术的选择。

视频

作者还贴心地做了一个视频来解释相应的概念。

原文all about floats
译文关于浮动的前世今生

Continue reading CSS布局:详解浮动属性Float

如何修正DIV float之后导致的外部容器不能撑开的问题

      如何修正DIV float之后导致的外部容器不能撑开的问题

      在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:

      HTML4STRICT代码:

          1. <div style="width:200px;border:1px solid red;">

          2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

          3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

          4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

          5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

          6. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

          7. </div>

                显示的结果如下:

                P_1160709253_0.gif

                容器DIV没有被撑开

                大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。

                我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?

                以前我都是用这样的方法来解决:

                HTML4STRICT代码:

                  1. <div style="width:200px;border:1px solid red;">

                  2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  6. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  7. <div style="clear:both;"></div>

                  8. </div>

                  显示的结果如下:

                  P_1160709321_0.gif

                  显示正常了

                  我们看到,在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV:<div style="clear:both"></div>  。这样,其实就在最后增加了clear的动作。

                  但是,我总觉得,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,我一直在寻找更好的解决办法。

                  昨天在无数次的询问了Google大仙后,我终于找到了How To Clear Floats Without Structural Markup 这篇文章,找到了解决的办法。

                  首先设置这样的CSS:

                  CSS代码:

                  1. .clearfix:after {

                  2. content: ".";

                  3. display: block;

                  4. height: 0;

                  5. clear: both;

                  6. visibility: hidden;

                  7. }

                  然后,我们再修改原来的HTML代码,让外部的容器DIV来使用这个CSS:

                  HTML4STRICT代码:

                  1. <div style="width:200px;border:1px solid red;" class="clearfix">

                  2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  6. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  7. </div>

                  在 Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop 也不会有问题了。原来,这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。

                  但是,在文章中说,Windows IE并不支持这样做。所以要让IE也完美显示,则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:

                  CSS代码:

                  1. .clearfix:after {

                  2. content: ".";

                  3. display: block;

                  4. height: 0;

                  5. clear: both;

                  6. visibility: hidden;

                  7. }

                  8. /* Hides from IE-mac \*/

                  9. * html .clearfix {height: 1%;}

                  10. /* End hide from IE-mac */

                  因为转义字符"\",Mac IE浏览器会忽略掉这段Hack,但Windows IE不会,它会应用 * html .clearfix {height: 1%;} 来达到撑开DIV容器的目的(貌似Mac IE没有办法解决这个问题,不过幸好用户数量是在是太少了,Safari支持就可以了:p)。

                  测试一下,果然大功告成。

                  P_1160709321_0.gif

                  Continue reading 如何修正DIV float之后导致的外部容器不能撑开的问题

                  css3-jqeury

                  css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。

                     在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。

                  1.多重背景

                  #backgrounds-box {
                  background: url(top-backgroundg.png) top left no-repeat,
                  url(bottom-backgroundg.png) bottombottom left no-repeat,
                  url(middle -backgroundg.png) left repeat-y;
                  padding: 35px;
                  }

                  2.文字阴影

                  b { text-shadow:  5px 5px 5px #666666; }

                  3.圆角

                  #rounded-corners-box {
                  -moz-border-radius-topleft: 8px;
                  -moz-border-radius-topright: 8px;
                  -moz-border-radius-bottomright: 8px;
                  -moz-border-radius-bottomleft: 8px;
                  -webkit-border-top-left-radius: 8px;
                  -webkit-border-top-rightright-radius: 8px;
                  -webkit-border-bottom-left-radius: 8px;
                  -webkit-border-bottom-rightright-radius: 8px;
                  }

                  4.透明效果

                  .div-name { background: #333333; opacity:0.8; width: 380px; height:70px; }

                  下面来看看jQuery插件实现css3效果的插件:

                  jQuery Corners 0.3

                  http://malsup.com/jquery/corner/

                  轻松地实现漂亮的圆角,无需额外的标签或图片。支持 iPhone.、Chrome、Firefox、Safari 2+、 Opera 9.0+、Internet Explorer 6+。

                  jQuery Corners 0.3

                  jQuery Canvas Rounded Corners

                  通过canvas 实现圆角的jQuery插件,支持IE7、FF。

                  jQuery Canvas Rounded Corners

                  How To  Border Image with CSS3 and jQuery

                  CSS3 draft 介绍灰墙强大的图片边框技术。

                  How To Border Image with CSS3 and jQuery

                  How To CSS Multiple Backgrounds / Background Layering with jQuery

                  实现多重图片背景的这个插件可以极大地减少xhtml标签,精简你的代码,多重背景的概念类似于PS的图层,一个图层叠在另一个图层上面。

                  How To CSS Multiple Backgrounds / Background Layering with jQuery

                  How To Drop Shadow with jQuery

                  为页面上的文字和透明图片添加柔和和阴影效果。

                  drop-shadow

                  How To Text-shadow in Internet Explorer using jQuery

                  这个教程会教你如何在IE中轻松实现文字阴影效果。

                  How To Text-shadow in Internet Explorer using jQuery

                  How To Element Gradient with jquery

                  允许你自定义元素的填充渐变效果,支持指定渐变的方向。

                  How To Element Gradient with jquery

                  How to Rounded Corners in jQuery

                  一个简易的用jQuery实现圆角的教程。

                  How to Rounded Corners in jQuery

                  CSS3 Template Layout realized with jQuery

                  实现CSS3布局。

                  CSS3 Template Layout realized with jQuery

                  Creating a polaroid photo viewer with CSS3 and jQuery

                  结合CSS3的 Box Shadow 属性Rotate 实现拖动图片过程中的阴影效果。

                  Creating a polaroid photo viewer with CSS3 and jQuery

                  jSlickmenu: A jQuery plugin for slick CSS3 menus

                  jSlickmenu通过类似CSS3的rotation 和shadows属性现非常酷的菜单效果。

                  Super slick jQuery menu with CSS3

                  Continue reading css3-jqeury

                  p3p 跨域

                  p3p 跨域

                  最近因为工作需要写了个msn机器,发现xiaoi机器的活动页面是使用frame来加载用户页面,于是会导致cookie,session,js,等权限问题。
                  1、cookie,session的权限问题,解决方案一:可以通过添加P3P header解决,如:Response.AddHeader("P3P", "CP=CAO PSA OUR");,也可在IIS里面直接设置。//很好
                  2、如有页面中还有frame,就会报禁止访问。
                  终极方案:添加一个跳转页面,页面只需一个js:
                    window.top.location = "your url";//这一条行不通,跨域访问仍然会报错,top则造成在msn外面打开了新窗口,莫名其妙。
                  这样,就不会存在任何权限问题。
                  =====================================================================================================
                  sohu实现-单点登录:

                  跨域(cross-domain)访问 cookie (读取和设置)

                  由 qyb 于 星期四, 2006-11-16 21:41 发表

                  Passport 一方面意味着用一个帐号可以在不同服务里登录,另一方面就是在一个服务里面登录后可以无障碍的漫游到其他服务里面去。坦白说,目前 sohu passport 在这一点实现的很烂(不过俺的工作就是要把它做好啦,hehe)

                  搜狐的 SSO 需求比较麻烦,因为它旗下有好多域名:sohu.com、chinaren.com、sogou.com、focus.cn、17173.com、go2map.com,登录用户漫游的主要障碍也来自于此。

                  以前亿邮的邮件系统在和别的系统整合的时候是提供一个 URL,用户从第三方系统里面点击这个链接就可以生成访问邮件界面所需的 cookie,然后进入邮件。这个方式的确很有效,但问题是:
                  1. 每个外部链接都必须用特殊的 URL 跳转,维护很麻烦
                  2. 两个系统集成已经很麻烦了,若是集成的系统有好几个,彼此都需要跳转而缺乏一个中心机制就成了噩梦
                  3. 根本无法处理用户直接在地址栏输入地址进行访问的情况

                  即使是跨域,上述的解决方法相对来说还是容易的。
                  A. 首先是所有登录必须首先通过一个中央服务器进行认证,然后在它那里给浏览器种下 cookie(下面称之为 sso cookie)
                  B. 当用户访问另外的域名 app 的时候,浏览器是无法直接发送 sso cookie 给服务器认证的。此时应该利用 javascript,动态创建一个隐藏的 iframe,让其访问 sso
                  C. 这个 iframe 的请求是可以把 sso cookie 送给 sso server 的。sso server 验证 cookie 后,返回一个重定向页面到 app 的某个 URL,由该 URL 设置 app cookie
                  D. 此时浏览器上可看见的页面容器实际上也是可以和重定向回来的内容交互的。比如可以用 js 控制发现重定向页面成功返回后,就刷新整个页面,让它看起来和用户登录后访问没有什么区别。

                  下面是真正的技巧:怎样才能在 IE 里面跨域去设置 cookie
                  上述技术看起来是不是很好?但它的前提是所有的登录都 post 到 sso server 上,认证成功后再返回 app 页面。可我接受到的需求之一就是要支持页面无刷新登录。

                  哈!就是说本来在 chinaren.com 上提交登录表单的 action 应该是 passport.sohu.com 这个 sso server。可是在 AJAX 大潮下,chinaren 计划采用 XMLHTTPRequest 提交,这个就麻烦了,因为是不能跨域来提交的。

                  那么解决方法就是跨域产生 cookie,即 js 发现口令校验成功后,再在 passport.sohu.com 上种上合法的 cookie.

                  套用上面的跨域读 cookie 的方案似乎很简单去推论:就是创建一个隐含的 iframe,让那个 iframe 去调用 passport.sohu.com 的 URL 来产生 cookie。很遗憾,此方法在 Fx 下工作的很好,但是不能在 IE 上应用。(在 IE 状态栏上显示 cookie 隐私警告,红色圆底白横杠)

                  我试了很多很多方法,包括创建 、 node,包括用 js 设置,但都一次次被 IE 无情的挡在了浏览器外。google 之,也没有任何真正可用的答案,中文网页要么介绍的方法是错的,要么说无解。

                  最后还是在 chinaren 一哥们的帮助下,翻出了他们所使用的,以和 alumni.sohu.com 交互的方法(不知道是哪位牛人发现的),只需要设置 P3P HTTP Header,在隐含 iframe 里面跨域设置 cookie 就可以成功。他们所用的内容是:

                  P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"

                  最后是我做的一个小小的演示:cookie 怎么在 vmx.cn 和 dup2.net 之间交互

                  1. http://qiuyingbo.test.vmx.cn/cookie.php

                  2. 随便输入什么,点 reset cookie,就可以看到 vmx.cn 的 cookie 已经被设上了

                  3. 在该页面点连接到 http://www.dup2.net/vmx/cookie.html

                  4. 点"get corss-domain cookie" .. (此时 js 会去创建一个iframe,请求 qiuyingbo.test.vmx.cn ,返回页面把 cookie 值作为 GET 参数重定向回 dup2.net 的另外一个URL。)

                  5. 点 "display corss-domain cookie" .. 就可以看到 vmx.cn 的 cookie 了

                  6. 在该页面的输入框中输入其它的值,然后点 "set cross-domain cookie",该行为将主动设置 vmx.cn 的 cookie

                  7. 点链接回到 http://qiuyingbo.test.vmx.cn/cookie.php ,就可以看到新的值了

                  ==============================================================================================================================

                  作者:老王

                  说使用P3P可以完成跨域COOKIE操作,感觉很COOL,不过没有提供源代码,我胡乱写了一下,大家看看。

                  实际工作中,类似这样的要求很多,比如说,我们有两个域名,我们想实现在一个域名登录后,能自动完成另一个域名的登录,也就是PASSPORT的功能。

                  我只写一个大概,为了测试的方便,先编辑hosts文件,加入测试域名(C:\WINDOWS\system32\drivers\etc\hosts)

                  127.0.0.1       www.a.com
                  127.0.0.1       www.b.com

                  首先:创建 a_setcookie.php 文件,内容如下:

                  <?php 
                  //header('P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"'); 
                  setcookie("test"
                  , $_GET['id'], time()+3600, "/", ".a.com"); 
                  ?>

                  然后:创建 a_getcookie.php 文件,内容如下:

                  <?php 
                  var_dump($_COOKIE
                  ); 
                  ?>

                  最后:创建 b_setcookie.php 文件,内容如下:

                  <script src="http://www.a.com/a_setcookie.php?id=www.b.com"></script>

                  ----------------------------

                  三个文件创建完毕后,我们通过浏览器依次访问:

                  http://www.b.com/b_setcookie.php
                  http://www.a.com/a_getcookie.php

                  我们会发现,在访问b.com域的时候,我们并没有在a.com域设置上cookie值。

                  然后我们修改一下a_setcookie.php文件,去掉注释符号,a_setcookie.php即为:

                  <?php  
                  header('P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"');  
                  setcookie("test", $_GET['id'], time()+3600, "/", ".a.com");  
                  ?>

                  再次通过浏览器依次访问:

                  http://www.b.com/b_setcookie.php
                  http://www.a.com/a_getcookie.php

                  这次,你会发现在访问b.com域的时候,我们设置了a.com域的cookie值。

                  末了补充一句,似乎只有IE对跨域访问COOKIE限制比较严格,上述代码在FIREFOX下测试,即使不发送P3P头信息,也能成功。不过IE是老大啊。

                  参考文档:http://www.w3.org/P3P/

                  p3p介绍:

                  http://www.yxl.cn/Info/20060302,212041,5095.html

                  这里水很深……

                  Continue reading p3p 跨域

                  wicket与jsf/seam比较

                  wicket与jsf/seam比较

                  原文:

                  http://swik.net/Peter-Thomas/Incremental+Operations/Seam+%2F+JSF+vs+Wicket:+performance+comparison/cp1je

                  Seam / JSF vs Wicket: performance comparison

                  Your tags: or Cancel

                  Tags Applied to this Entry

                  No one has tagged this page.

                  Tag this Entry | Tagging Details

                  created on 20 Jan 2009, by Syndication, read more…

                  A while after Seam support for Apache Wicket was announced, I downloaded Seam and took a look at the Wicket example. Then an idea struck – how about doing a performance comparison – I mean, here was the very same application implemented in JSF and Wicket – right? So I decided to write a JMeter script for both the JSF and Wicket versions of the Seam “hotel booking” example and compare results. I started right away but very soon got tired of waiting for app-server re-starts on my trusty laptop (Jetty has really spoiled me) – and it kind of bothered me that the Seam examples were not in Maven 2 layout. Anyway, at some point I decided to re-write an “EJB-free” version of the Seam booking example using just Wicket and JPA. And use Maven and Jetty. And… one thing led to another – and what I ended up doing is this:

                  • Adapted the Seam JPA example (the one that does not use EJB) as the baseline application. Converted it into a Maven 2 WAR project which can run on Jetty.
                  • Implemented what I hope is the exact equivalent of the above using only Wicket and JPA, also Maven-ized and Jetty-fied. Decided to also experiment with some of the ideas in this blog post.
                  • Wrote a JMeter script for both applications taking care to exercise identical functionality.
                  • Used an Ant script to run the JMeter scripts in batch mode (passing number of concurrent users as a parameter) and start / stop Jetty in sync.
                  • Automated the entire cycle of running the load test for 1, 5, 10, 15 and 20 concurrent users including some code to parse the JMeter logs and generate a CSV file of tabular results.
                  • Also included an Ant target that takes a JVM heap dump at the end of the load test – just before the users are logged out and the HTTP sessions killed.

                  I was able to re-use the official Seam Wicket example to some extent, mainly the HTML files – but the Java side is almost completely re-written. The Seam booking example covers quite a bit of ground from the framework comparison point of view – for example:

                  • Security – some pages are secured and redirect to a login page
                  • Templating – some pages inherit from a common layout with a header / footer defined
                  • Ajax
                    • hotel search results refresh as you type and a “busy” image is shown during the Ajax request
                    • form field validations occur as soon as the field loses focus
                  • Session scope – some state is stored and retrieved in the session
                  • Page navigation / state
                    • user navigation state transparently managed by the framework
                    • user should be able to work in multiple concurrent conversations (browser tabs)
                    • the browser back button should work as expected
                  • JPA – getting access to the entity manager and transaction management
                  • Forms – binding, validation and displaying error / info feedback to the user
                  • Hibernate Validator – annotations on the JPA entity classes are re-used for form-validation

                  Both sides use the exact same entities, persistence.xml and initial HSQLDB import. I’m using the latest Seam 2.1.1-GA and Wicket 1.3.5. Disclaimer: my Wicket code may not be ideal, and I’ve also experimented with a custom RequestCycle for JPA and tried to use inherited models as far as possible. Instructions on how you can download the source and run the scripts on your local machine are at the end of this blog post.

                  I may do some follow up blog posts on how the code compares between the Seam / JSF and Wicket implementations, and also share some tips on writing JMeter scripts and automation using Jetty, Ant etc. I’m also expecting to have to make corrections and changes to the code based on feedback. For now, I’ll summarize my observations on performance and memory usage.

                  Performance:
                  In the JMeter script, except for the login and logout (first two rows and last row), the actions are executed in a loop ten times for each concurrent user. So if the number of concurrent users is 20, the login and logout actions happen 20 times and the rest 20 x 10 times. The numbers below are average page response time in milliseconds.

                  performance2

                  Wicket appears to be faster by a wide margin. For two pages (“ajax post search” and “post confirm booking”) the results are a bit closer. This can possibly be explained by the fact that these particular actions display the results from a relatively expensive database query. My amateur profiling attempts suggest that the database query is taking most of the time here.

                  One thing I have to mention: the “cc number” and “cc name” requests are simulations of the Ajax validations of the credit card number and name fields on the booking form. For these particular requests on the JSF side, the entire form is being POST-ed instead of just the value of the form field being validated when the user tabs out (onblur). So the difference here is quite dramatic. I did try adding ajaxSingle=”true” in the JSF view but it did not appear to work (I used HttpFox while building the JMeter scripts). I can re-post the updated results if someone lets me know what changes need to be made to “book.xhtml” to get the Ajax validation to work as expected.

                  Memory Usage:
                  The JMeter script can be told to skip the logout page and I wired up one of the Ant targets to take a JVM heap dump / snapshot as soon as the JMeter script completes. So I can compare what the heap looks like just after a load test when all the concurrent HTTP sessions are alive.

                  I’m very much a NetBeans user but I have to say that the Eclipse Memory Analyzer is far better than what the built-in NetBeans Profiler offers for looking at JVM heap dumps. Here are some side-by-side screenshots of the heap analysis after running the JMeter script for 20 concurrent users.

                  “Top Consumers” report below showing the classes that dominate memory usage:

                  top-consumers2

                  The “dominator tree” report below is very useful to see which objects hold on to the most memory directly as well as indirectly. The column headings after “Class name” are Shallow Heap, Retained Heap and Percentage. Shallow Heap means the memory consumed by a single object and Retained Heap is the sum of shallow sizes of all objects that will be garbage collected if the given object is garbage collected.

                  dominator-tree

                  Looking at the above two reports we can infer that on the Seam / JSF side, the 20 sessions each take up about 800 KB adding up to around 16 MB total. On the Wicket side the 20 sessions add up to around 1.5 MB. On the Wicket side it is the DiskPageStore that appears to hold the most memory and we can see what is going on here after drilling down a little:

                  diskpagestore2

                  The Wicket DiskPageStore uses SoftReference-s to serialized pages so the memory will be reclaimed by the JVM if needed. And the SerializedPageWithSession holds a WeakReference to the actual page instance (MainPage). You can also spot the byte-array which is the result of page serialization. If a serialized page is requested (perhaps the user hit the browser back-button) and the page is no longer in memory because the SoftReference has been GC-ed – it will be restored from the temp file that the DiskPageStore has been saving pages to.

                  I’m totally impressed by the Eclipse Memory Analyzer. Here we can see the break-up of the contents of the largest HTTP session on both sides. I think we can safely blame JSF for the lion’s share of memory usage on the left:

                  session-dominators

                  Finally, a summary of the heap-dump comparison (for 20 users) collated from the various reports:

                  heap-summary

                  Instructions:

                  Prerequisites:

                  • JDK 1.5 or greater installed
                  • Apache Ant installed
                  • JMeter 2.X available unzipped somewhere (better use latest 2.3.2)

                  Steps:

                  • Do a Subversion check out of the source from here: http://perfbench.googlecode.com/svn/trunk/perfbench/
                  • Create a perfbench/build.properties file that points to your JMeter installation. You can look at the comment in perfbench/build.xml for an example.
                  • Open a command prompt, change directory to perfbench/seam-jpa
                  • If running for the first time, use the command “ant jmeter-cycle”. The build script would prompt for the number of threads, so enter “1”. It may take time for all the required JAR files to get downloaded. Once you see Jetty start and stop successfully, you should be all set to run the actual benchmark.
                  • To start the benchmark run “ant jmeter-cycle-full”. This should take 2 – 3 minutes to run a series of tests for 1, 5, 10, 15 and 20 concurrent users. Results will be dumped into perfbench/target. You can look at the *.csv file at the end for the results.
                  • You can also run a load test which saves a snapshot of the heap dump towards the end by running “ant jmeter-cycle-heapdump”.
                  • Repeat the previous 3 steps after changing working directory to perfbench/wicket-jpa

                  Update: perfbench/build.xml starts Jetty with JVM options “-Xms64m -Xmx64m” and you may need to change this if you want to experiment with more concurrent users.

                   

                  我说,这两个都不行啊,别怪我打击你。

                  Continue reading wicket与jsf/seam比较

                  模板库

                  国外免费
                  http://www.freewebsitetemplates.com
                  模板库

                  http://www.skinpress.com/
                  韩国模板

                  http://sc.68design.net/

                  Continue reading 模板库

                  Pagination


                  Total views.

                  © 2013 - 2020. All rights reserved.

                  Powered by Hydejack v6.6.1