DIV布局三注意

 

[日期]: 2008-01-02  [来源]:   [作者]: zuoyefeng

随着互联网的发展,web2.0思想的漫延,业界对网页设计(布局)需求越来越苛刻。网页的布局一般有两种方案:

1、表格布局(传统方案)
2、DIV布局(优化方案)
以下事件,不得不让我们去重视DIV布局的应用。
A、DreamWeaver8的可视化设计,实际上就是DIV+CSS布局方式。
(我们用DW对文字左对齐且加粗,DW会加上DIV标签,并用CSS来实现加粗,而不是用font标签)
B、微软最新开发IDE vs2005,默认的布局也是DIV+CSS布局方案,但它的DataList和GridView仍是用表格来实现了。
C、国外近70%以上的网站采用div布局开发,90%以上的新网站均是DIV布局。
D、国内越来越多的网站、软件均采用DIV布局来规划页面。
E、国内各大门户,如163、凤凰网、闪吧、闪客帝国等均是DIV布局。
DIV布局如此重要,为何在国内行动略慢呢?

原因1:DIV布局,以手写代码为主,主要是CSS,这样增加了美工从事DIV的难度。
原因2:DIV布局,本身属生前台的工作,程序员往往不与理采。
原因3:DIV布局,需要良好的html、css2.0基础。
原因4:DIV布局,IE、火狐对DIV盒子思想的执行标准不同,也增加了DIV的难度。
好,本文主要针对,你已经有了DIV布局的基础,使你的设计,如何能兼容主流浏览器,一般的教程上,书上,所载的DIV,仅仅是针对IE的,照上面去做,无疑是浪费时间、复而迷惑。

注意,以上三大事项,你的DIV布局,基本可以兼容IE和火狐。这里有一个很重要的原则,IE对DIV的解释比较松散一些,火狐比较严格一些,所以你写的DIV布局,也要严格一些。
就说这么多了,DIV布局,主要是css2.0“用来用去”,其思想是用div标签来作容器,用ul li来代码行和列,其它的细节,待于你自己去实践。

Continue reading DIV布局三注意

彻底弄懂CSS盒子模式(DIV布局快速入门)

 

http://bbs.blueidea.com/thread-2727499-1-3.html

前言

作者:唐国辉 天涯社区、经典论坛昵称:webflash

如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS排版网页的优势远远不只这些,本人在这里就不多说,自己可以去查找相关信息。

理解CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。CSS盒子模式CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。在现实生活中,假设我们在一个广场上,把不同大小和颜色的盒子,以一定的间隙和顺序摆放好,最后从广场上空往下看,看到的图形和结构就类似我们要做的网页版面设计了,如下图。由“盒子”堆出来的网页版面由“盒子”堆出来的网页版面

现在对CSS盒子模式理解多少了,如果还不够透彻,继续往下看,我会在后面举例,并延用盒子的概念来解释它。

转变我们的思路

传统的前台网页设计是这样进行的:根据要求,先考虑好主色调,要用什么类型的图片,用什么字体、颜色等等,然后再用Photoshop这类软件自由的画出来,最后再切成小图,再不自由的通过设计HTML生成页面,改用CSS排版后,我们要转变这个思想,此时我们主要考虑的是页面内容的语义和结构,因为一个强CSS控制的网页,等做好网页后,你还可以轻松的调你想要的网页风格,况且CSS排版的另外一个目的是让代码易读,区块分明,强化代码重用,所以结构很重要。如果你想说我的网页设计的很复杂,到后来能不能实现那样的效果?我要告诉你的是,如果用CSS实现不了的效果,一般用表格也是很难实现的,因为 CSS的控制能力实在是太强大了,顺便说一点的是用CSS排版有一个很实用的好处是,如果你是接单做网站的,如果你用了CSS排版网页,做到后来客户有什么不满意,特别是色调的话,那么改起来就相当容易,甚至你还可以定制几种风格的CSS文件供客户选择,又或者写一个程序实现动态调用,让网站具有动态改变风格的功能。

实现结构与表现分离

在真正开始布局实践之前,再来认识一件事——结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习 CSS的目的所在吗?举个例来说P是结构化标签,有P标签的地方表示这是一个段落区块,margin是表现属性,我要让一个段落右缩进2字高,有些人会想到加空格,然后不断地加空格,但现在可以给P标签指定一个CSS样式:P {text-indent: 2em;},这样结果body内容部分就如下,这没有外加任何表现控制的标签:

<p>加进天涯社区有一段时间了,但一直没有时间写点东西,今天写了一篇有关CSS布局的文章,并力求通过一种通俗的语言来说明知识点,还配以实例和图片,相信对初学CSS布局的人会带来一定的帮助。</p>

如果还要对这个段落加上字体、字号、背景、行距等修饰,直接把对应的CSS加进P样式里就行了,不用像这样来写了:

<p><font color="#FF0000" face="宋体">段落内容</font></p>

这个是结构和表现混合一起写的,如果很多段落有统一结构和表现的话,再这样累加写下去代码就繁冗了。

再直接列一段代码加深理解结构和表现相分离:
用CSS排版

<style type="text/css">
<!--
#photoList img{
height:80;
width:100;
margin:5px auto;
}
-->
</style> <div id="photoList">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>

不用CSS排版

<img src="01.jpg" width="100" height="80" align="middle" />
<img src="02.jpg" width="100" height="80" align="middle" />
<img src="03.jpg" width="100" height="80" align="middle" />
<img src="04.jpg" width="100" height="80" align="middle" />
<img src="05。jpg" width="100" height="80" align="middle" />

第一种方法是结构表现相分离,内容部分代码简单吧,如果还有更多的图片列表的话,那么第一种CSS布局方法就更有优势,我打个比喻你好理解:我在BODY向你介绍一个人,我只对你说他是一个人,至于他是一个什么样的人,有多高,是男是女,你去CSS那里查下就知道。这样我在BODY的工作就简单了,也就是说 BODY的代码就简单了。如果BODY有一个团队人在那里,我在CSS记录一项就行了,这有点像Flash软件里的元件和实例的概念,不同的实例共享同一个元件,这样动画文件就不大了,把这种想法移到CSS网页设计中,就是代码不复杂,网页文件体积小能较快被客户端下载了。用CSS排版减小网页文件体积演示地址:http://www.hsptc.com/css1.html用CSS排版减小网页文件体积

像上面我做的那个版面,一共分为四个区块,每个区块的框架是一样的,这个框架就是用CSS写出来的,样式写一次,就可以被无数次调用了(用class调用,而不是ID),只要改变其中的文字内容就可以生成风格统一的众多板块了,它的样式和结构代码是(请不要直接复制生成网页,把下面代码分别粘贴到网页中它们应在的位置):

<style type="text/css">
<!--
* {margin:0px; padding:0px;} 
body {
font-size: 12px; 
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>

熟悉工作流程

在真正开始工作之前我们脑海中要形成这样一种思想:表格是什么我不知道,在内容部分我不能让它再出现表现控制标签,如:font、color、 height、width、align等标签不能再出现,(简单说工作前先洗脑,忘掉以前的一惯做法,去接受和使用全新的方法),我不是单纯的用DIV来实现排版的嵌套,DIV是块级元素,而像P也是块级元素,例如要分出几个文字内容块,不是一定要用DIV才叫DIV排版,不是“<div>文字块一</div><div>文字块二</div><div>文字块三</div>”,而用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>” 更合适。

用 DIV+CSS设计思路是这样的: 1.用div来定义语义结构;2.然后用CSS来美化网页,如加入背景、线条边框、对齐属性等;3.最后在这个CSS定义的盒子内加上内容,如文字、图片等(没有表现属性的标签),下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图:CSS排版结果图演示地址:http://www.hsptc.com/css2.htmlCSS排版结果图

  1. 用div来定义语义结构

现在我要给大家演示的是一个典型的版面分栏结构,即页头、导航栏、内容、版权(如下图),典型版面分栏结构其结构代码如下:

<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>

上面我们定义了四个盒子,按照我们想要的结果是,我们要让这些盒子等宽,并从下到下整齐排列,然后在整个页面中居中对齐,为了方便控制,我们再把这四个盒子装进一个更大的盒子,这个盒子就是BODY,这样代码就变成:

<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

最外边的大盒子(装着小盒子的大盒子)我们要让它在页面居中,并重定义其宽度为760像素,同时加上边框,那么它的样式是:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}

页头为了简单起见,我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙,目的是让页头的图像不要和下面要做的导航栏连在一起,这样也是为了美观。其样式代码为:

#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}

导航栏我做成像一个个小按钮,鼠标移上去会改变按钮背景色和字体色,那么这些小小的按钮我们又可以理解为小盒子,如此一来这是一个盒子嵌套问题了,样式代码如下:

#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}

内容部分主要放入文章内容,有标题和段落,标题加粗,为了规范化,我用H标签,段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离,这里用填充。内容区块样式代码为:

#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;

版权栏,给它加个背景,与页头相映,里面文字要自动居中对齐,有多行内容时,行间距合适,这里的链接样式也可以单独指定,我这里就不做了。其样式代码如下:

#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}

最后回到样式开头大家会看到这样的样式代码:

* {
margin: 0px;
padding: 0px;
}

这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以这样的控制,这可以在一定程度上简化代码。最终完成全部样式代码是这样的:

<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
}
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
-->
</style>

结构代码是这样的:

<body>
<div id="header"></div>
<ul id="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论 坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
<div id="content">
<h3>前言</h3>
<p>第一段内容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段内容</p>
</div>
<div id="footer">
<p> 关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>

好了,此文到此结束,更多内容,如:CSS中的盒子宽度计算,浏览器兼容问题,XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以,看过之后记得跟帖,你的鼓励是我不断出新文章的动力^-^

Continue reading 彻底弄懂CSS盒子模式(DIV布局快速入门)

CSS2.1选择符

当你学习CSS时,要学的第一个东西就是选择符(selector)。显然,选择符是CSS中最基础的部分,但是却很少有开发者能将他们物尽其用。当你使用type、ID、class等选择符来完成你的作品时,你可能还不知道除此之外还有很多很多关于它的东西要学。
熟练掌握CSS2.1中所有可用的选择符可以使我们的HTML文档更加简洁明了。可以使你最少量地使用class属性,尽量避免多余的div和span标签出现等。怎么样,听起来还不错吧?
    那么为什么并不是所有的选择符都被得到广泛地应用呢?其中一个很重要的原因就是包括Internet Exlorer 6.0在内的所有IE版本对CSS2.1支持的缺陷造成的。然而几乎所有的现代浏览器都在最大程度上支持CSS2.1中规定的选择符。在我们开始一切工作之前我们必须意识到这些差别。
    令人欣慰的是,在IE7.0对选择符的支持得到了很大程度的提高。得知这个消息后,在未来的设计中你就可以放心大胆地使用它们了,因此也有必要全面了解和掌握所有规定的选择符了(本文发表时IE7.0还在开发中dudo注)。
由于CSS2.1中规定的选择符有很多,因此在一篇文章中想把他们解释的很清楚可能会需要很长很长的篇幅来写,所以我将从下面三个部分来分开讲解,以期这些知识简单易接受。
1、本文第一部分,讲解包括通配符、类型选择符、id、class在内的基本的选择符;
2、第二部分主要讲选择器(combinators)、联合选择符(grouping)、分组和属性选择符
3、第三部分主要讲解伪类和伪元素(pseudo-classes and pseudo-elements)
好,我们开始第一部分的讲解。
选择符基础
首先是一个最基本的知识点:CSS选择符是与文档树结构中元素匹配的一种模式。当模式中的匹配结果返回true时,CSS中声明的样式才会应用到相匹配的元素中去。以下面这个简单的CSS语句为例来说:

view plaincopy to clipboardprint?

  1. p { color:#f00; } 

选择符CSS语句中大括号“{”前面的部分。这里的选择符就是p,它将匹配文档中所有的p元素并把p元素内的文本设置为红色。这个例子很基础。
选择符概述
好,看过上面简单的例子之后,我们介绍一下其它一些选择符,现在开始已经慢慢地深入了。在开始介绍之前,还是选看一下CSS2.1所有选择符的结构吧。
CSS2.1选择符结构

view plaincopy to clipboardprint?

  1. 选择符类型        模式        说明 
  2. 通配选择符        *        匹配所有元素 
  3. 类型选择符        E        匹配所有E元素 
  4. 类(Class)        .info        匹配所有属性class值等于info的元素 
  5. ID        #footer        匹配所有属性id值等于footer的元素 
  6. 后代选择符        E F        匹配所有为E后代的F元素 
  7. 子选择符        E > F        匹配所有为E子元素F 
  8. 邻近选择符        E + F        匹配所有E的兄弟元素F 
  9. 属性选择符        E[att]        匹配所有拥有att属性的E元素,与属性值无关 
  10. 属性选择符        E[att=val]        匹配所有拥有att属性且值为val的E元素 
  11. 属性选择符        E[att~=val]    匹配所有拥有att属性且val为属性值中一个完整单词的E元素 
  12. 属性选择符        E[att|=val]        匹配拥有拥有att属性且val是其值的开始 
  13. :first-child伪类    E:first-child        匹配所有处于其父元素中的第一个节点E元素 
  14. 链接伪类        E:link        匹配所有未访问过的链接 
  15.         E:visited        匹配所有已经访问过的链接 
  16. 动态伪类        E:active        匹配所有激活状态中的链接 
  17.         E:hover        匹配鼠标经过时的链接 
  18.         E:focus        匹配处于焦点状态的链接 
  19. :language伪类    E:lang(c)        匹配所以语言为c的E元素 
  20. :first-line伪类    E:first-line        匹配元素E中内容的第一行 
  21. :first-letter伪类    E:first-letter    匹配E元素中的首字母 
  22. :before 和 :after    E:before        匹配在E元素前(后)插入的内容 
  23. 伪类        E:after 

下面我将在后面的两部分中更加详细地解释这些选择符,请继续往下看。上表中用到了一些术语,下面我简单解释一下:
后代:
在文档树结构中一个元素的子元素,子元素的子元素,直到这个元素的最底层为止。
祖先:
在文档树结构中一个元素的父元素,父元素的父元素,甚至更上一层的元素
子元素
是指在文档树结构中一个元素的直接后代,他们之间再也没有任何其他元素出现
父元素
是指在文档树结构中一个元素的直接祖先,他们之间再也没有其他任何元素出现
兄弟元素
是指和当前元素拥有同一父元素的元素
简单选择符 和 混合选择符
选择符中有两个基本的类型:简单选择符和混合选择符。
简单选择符由一个类型选择符或者通配符加上零个或者多个属性选择符,ID选择符,伪类选择符构成。下面的语句就是一个简单选择符的例子:

view plaincopy to clipboardprint?

  1. p.info { background:#ff0 } 

混合选择符由两个或者多个简单选择符通过连接符组成。下面是一个非常简单的混合选择符。

view plaincopy to clipboardprint?

  1. div p { font-weight:bold; } 

上面这条规则将会应用到所有div内的元素p上
选择符有时可能会使用伪类。在混合选择符中,伪类只能出现在最后一个简单选择符后面。
通配选择符
通配选择符用一个星号“*”来表示,它匹配文档中的所有元素。在样式表中一般很少见,但是它有时候会配合class和ID选择符一起使用。如果简单选择符中不仅仅含有通配选择符,那么“*”可以省略不写。
.myclass就等同于 *.myclass
#myid 等同于 *#myid
通配选择符的一个广泛应用就是用来把所有元素的margin和padding值设为0:

view plaincopy to clipboardprint?

  1. * { margin:0; padding:0; } 

这就是有时所说的全局空白重设
类型选择符
类型选择符匹配所有指定的元素。下面这个示例将匹配文档中所有段落元素p,并设定字段大小为2em:

view plaincopy to clipboardprint?

  1. p {font-size:2em;} 

类选择符
类选择符用点号“.”来表示,根元素的class属性值来指定元素。下面这个示例将把所有属性class为info的p元素背景设为红色:

view plaincopy to clipboardprint?

  1. .info { background:#f00; } 

你可以给一个元素设定多个类名,不过每个类名中间要用空格隔开。类选择符就可以指向拥有多个类名的元素了。下面的例子中将来定义类名既有info又有error的p元素:

view plaincopy to clipboardprint?

  1. p.info.error { color:#900; font-weight:bold; } 

注意:多类选择符IE6.0以前的版本并不支持,IE7支持。
元素类型可以不用写。下面这条语句也同样会应用到所有class为info的p元素中去:

view plaincopy to clipboardprint?

  1. .info { background:#ff0; } 

ID选择符
ID选择符用“#”来表示,根据元素的id属性值来匹配元素。下面这个规则将应用到id为info的元素中去,而不管他的类型是什么:

view plaincopy to clipboardprint?

  1. #info { background:#ff0; } 

如果同时也指定了元素类型,那么规则将只有应用到指定的类型上:

view plaincopy to clipboardprint?

  1. p#info { background:#ff0; } 

有一点一定要记住,ID选择符优先级高于class类选择符,并且在同一文档中id必须唯一。因此,ID选择符制定的样式最终只会应用到文档中的一个元素上。

本文是关于CSS2.1选择符系列文章的第二部分。第一部分主要是讲关于类型选择符、类class选择符、id选择符、通配选择符和简单选择符的基础知识。
而在本部分中,我们主要讲一下选择符的高级应用,这不仅仅包括已经在主流浏览器中得到广泛支持的那些选择符。现在,浏览器对选择符的支持越来越完善,因此完全有必要拿出点时间来了解一下本文所介绍的所有选择符。
选择器
选择器用于将组成混合选择符的多个简单选择符分隔开来。CSS2.1中定义的选择器包括空格(任何数目的tab制表位、空格、具有空格性质的其他字符),大于号“>”和加号“+”。在现在的章节中我们将一一介绍这些选择器的使用。
后代选择符
后代选择符由两个或者多个简单选择符通过空格分隔而组成。他匹配第一个简单选择符对应元素的所有后代元素。例如,下面这条规则将会应用到是div后代的p元素上去:

view plaincopy to clipboardprint?

  1. div p { color:#f00; } 

任何形式的简单选择符都可以是后代选择符的组成部分。下面的例子中CSS规则将会应用到id是myid的div中的、li元素下的、类名为info的p元素中:

view plaincopy to clipboardprint?

  1. div#myid li p.info { color:#f00; } 

后代选择符可以使我们在不用指定id或者class的情况下选取目标元素,这有助于使文档中的标记更加简洁。假设我们有一个如下结构的导航菜单:

view plaincopy to clipboardprint?

  1. <ul id="nav">
  2. <li><a href="#">Link 1</a></li>
  3. <li><a href="#">Link 2</a></li>
  4. <li><a href="#">Link 3</a></li>
  5. </ul>

要选取导航栏中的列表元素和超级链接,我们可以使用下面的CSS规则:

view plaincopy to clipboardprint?

  1. #nav li { display:inline; } 
  2. #nav a { font-weight:bold; } 

上面的规则不会应用到文档中的所有列表元素和链接中去。和一一给它们指定一个class相比,使用后代选择符会使你的文档清洁不少。
子选择符
子选择符用于择取指定元素的直接后代。子选择符由两个或者多个选择符通过大于号“>”分隔而成。父元素在“>”的左侧,在选择器“>”的两侧允许有空白存在。
下面的规则将会就用到所有div的子元素strong中去:

view plaincopy to clipboardprint?

  1. div > strong { color:#f00; } 

只有是div直接后代的strong元素才是这条规则的目标元素。如果文档中在div和strong元素中间有其他元素的话,这条规则就是无效的。下面的例子中只有“Text one”样式受上面规则的影响:

view plaincopy to clipboardprint?

  1. <div>
  2. <strong>Text one</strong>
  3. <p><strong>Text two</strong></p>
  4. </div>

相邻的兄弟选择符
相邻的兄弟选择符由两个或者多个简单选择符通过加号“+”分隔而组成。加号两侧允许有空白存在。它匹配第一个元素的下一个兄弟元素,这两个元素必须具有相同的父元素,并且第一个元素和第二个元素在其前与其紧密相邻:

view plaincopy to clipboardprint?

  1. p + p { color:#f00 } 

如果把上面这条规则应用到下面的例子中,那么“Paragraph two”样式受影响:

view plaincopy to clipboardprint?

  1. <div>
  2. <p>Paragraph one</p>
  3. <p>Paragraph two</p>
  4. </div>

分组
之所以在这里讲分组,是因为我发现在学习分组混合选择符的时候经常会有人出错。
如果利用几个不同的选择符对不同元素应用相同的样式时,就可以使用逗号“,”把它们分组而不用为每个选择符重复同样的规则了。这里最容易出现的错误就是选择符的不完整。假设我们有下面这么一段代码:

view plaincopy to clipboardprint?

  1. <div id="news">
  2. <h3>News</h3>
  3. <ul>
  4. <li>Item 1</li>
  5. <li>Item 2</li>
  6. </ul>
  7. </div>

假设我们要给只有在id为news的div下的三级标题和列表元素应用相同的规则,那么下面这种写法就是错误

view plaincopy to clipboardprint?

  1. div#news h3, ul { 
  2. margin:0 2em; 

它会影响到div#news下的h3和ul元素,但是问题就在于它同样会影响到文档中所有ul元素,而不仅仅是div#news下的ul元素。
下面这种写法才是正确的分组选择符的写法:

view plaincopy to clipboardprint?

  1. div#news h3, 
  2. div#news ul { 
  3. margin:0, 2em; 

因此,在使用分组选择符时,一定要记住选择符书写完整。
属性选择符
属性选择符根据属性名称或者属性值来匹配元素。属性选择符有四种匹配模式:
[att]
    匹配所有拥有att属性的元素,与属性值无关
[att=val]
    匹配所有拥有att属性且属性值为val的元素
[att=~val]
    匹配所有拥有att属性的元素且val是其属性值由空白分隔开的一个完整单词。在这各情况下val中间没有空白。
[att|=val]
    匹配所有拥有att属性的元素,并且att的属性值是由连字符组成,val处于连字符的开始。它主要用于通过lang属性指定特定语言的情况中,例如:“en”、“en-us”,“en-gb”等等。
下面是一些例子。
匹配有title属性的p元素而不管它的值是多少:

view plaincopy to clipboardprint?

  1. p[title] { color:red; } 

下面的例子将匹配class属性等于error的div元素

view plaincopy to clipboardprint?

  1. div[class=error] { color:#f00; } 

要匹配headers属性中含有“col1”的td元素则可以使用下面的规则:

view plaincopy to clipboardprint?

  1. td[headers~=col1] {color:#f00} 

最后,下面的这条规则就匹配lang属性值中连字符前半部分以“eu”开始的p元素:

view plaincopy to clipboardprint?

  1. p[lang|=en] { color:#f00' } 

在同一个选择符中多个属性选择符可以同时使用。这样我们就可以用多个不同的属性值来区分相同的元素了。下面这个例子将会匹配到属性class值为quote且有cite属性(不管值是多少)的blockquote元素:

view plaincopy to clipboardprint?

  1. blocquote[class=quote][cite] { color:#f00; } 


这部分我们将着重研究伪类和伪元素。和第二部分中介绍的高级选择符一样,伪类和伪元素并没有得到所有主流浏览器的完全支持,因此一定要留意在缺乏浏览器支持时可能发生的情况。你一定不想让你网页的内容在不支持这些选择符的浏览器中变得无法让人阅读。
伪类和伪元素
伪类和伪元素通过文档中并没有声明的信息来选取元素的。例如,并没有元素代表段落中的第一行或者元素内文本的第一个字母。
伪类
伪类通过元素的特征而不是元素的名称、属性、内容来匹配元素的。
:FIRST-CHILD
它匹配作为父元素中第一个字元素的元素。假如你想为文章中的第一段设定一个特殊的样式,再假设文章被包含在一个class为article的div中,那么下面这段代码将会匹配每篇文章中的第一个p元素:

view plaincopy to clipboardprint?

  1. div.article p:first-child {  
  2. font-style:italic; 

要匹配所有元素中的第一个p元素,可以采用下面的规则:

view plaincopy to clipboardprint?

  1. p:first-child { 
  2. font-style:italic; 
  3.     } 

:LINK 和 :VISITED
linke伪类作用于访问过和未访问过的链接。这两种状态是相互排斥的:也就是说一个链接不可能同时既是访问过的又是未访问过的。
这些伪类只能应用于根据文档采用的语言类型定义的超级链接上。对于HTML来说,就是拥有href属性的元素。由于它们不会在其它元素上生效,因为下面的选择符写法是一样的:

view plaincopy to clipboardprint?

  1. a:link 
  2.     :link 

:HOVER,:ACTIVE和:FOCUS
动态伪类可以根据用户的选定动作的控制选定元素的表现等式。
:hover应用于当用户鼠标指针指向一个元素但并没有激活它时。最常见的就是用鼠标把指针移动到元素上方时。
:active应用于当元素被用户激活时。对于鼠标用户来说就是当鼠标被保持按下时状态,直到你松开前。
:focus应用于当元素获得焦点时,例如,用键盘输入信息时。
一个元素可以同时使用几个伪类。例如,下面的例子中一个元素同时有focus和hover两个状态:

view plaincopy to clipboardprint?

  1. input[type=text]:focus{ 
  2. color:#000; 
  3. background:#ffe; 
  4.     } 
  5.     input[type=text]:focus:hover{ 
  6. background:#fff; 
  7.     } 

第一第规则应用于当元素获得焦点时,第二第规则应用于被激活时的同一个元素。
:lang
语言伪类可以用于格式化内容指定了特定语言(人类可读语言,非标记语言)的元素。下面这条规则应于指定了瑞典语的引用元素:

view plaincopy to clipboardprint?

  1. q:lang(sv) { quotes:"\201D" "\201D" "\2019" "\2019"; } 

文档或元素中语言类型通常是通过HTML中的lang属性或者XHTML中xml:lang属性定义的。
伪元素
伪元素允许作者指定并修改文档树结构中没有声明的节点的样式。
:FIRST-LINE
:first-line伪元素作用于段落中文本的第一行。它只能用于块级元素、inline-block、表头(table-caption)或者表格内框(table-cell)。
显然,第一行的长度取决于很多因素,比如字体的大小、包含文本的元素的宽度等。
下面这条规则将会应用到段落中文本的第一行:

view plaincopy to clipboardprint?

  1. p:first-line { 
  2. font-weight:bold; 
  3. color:#600; 
  4.     } 

注意:伪元素:first-line中可能使用的属性是有限制的,具体参看《:first-line伪元素》中的说明。
:FIRST-LETTER
这个伪元素指向的是块级元素,列表、表格内框(table-cell)、表头(table-caption)、inline-block元素中的第一个字母或者数字。
下面的规则将应用到class为preamble元素中的第一个字符:

view plaincopy to clipboardprint?

  1. .preamble:first-letter { 
  2. font-size:1.5ed; 
  3. font-weight:bold; 
  4.     } 

和:first-line一样,:first-letter的中可以使用的属性也同样有一定的限制。请参照[url=http://www.w3.org/TR/CSS21/selector.html#first-letter]《:first-letter伪元素》。
:BEFORE和:AFTER
更多关于CSS特征的讨论都是围绕这两个伪元素展开的,:before和:after伪元素可能用于在指定元素前或后插入扩展内容。
下面是一个使用:before的例子(引自文章《用高级CSS功能制作边框》

view plaincopy to clipboardprint?

  1. .cbb:before{ 
  2. content:""; 
  3. display:block; 
  4. height:17px; 
  5. width:18px; 
  6. background:url(top.png) no-repeat 0 0; 
  7. margin:0 0 0 -18px; 
  8.     } 

使用:after在链接的文本后面插入一个URL:

view plaincopy to clipboardprint?

  1. a:link:after { 
  2. content:" (" attr(href) ") "; 
  3.     } 

Internet Explorer中的问题
在你开始使用所学的关于CSS选择符的知识前,到目前为止包括6.0在内Internet Explorer对CSS2.1选择符的支持并不完整。下面是IE不支持或者支持上存在问题的地方:

    子选择符
    相邻兄弟选择符
    属性选择符
    多类选择符
    :first-childe伪类
    语言伪类
    :before和:after伪类
    伪类:hover只在a元素中起作用
    不支持伪类:focus。对于a元素获得焦点时使用:active

幸运的是,在Internet Explorer 7中CSS2.1中规定的选择符都得到了支持。

Continue reading CSS2.1选择符

我的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比较

                  Pagination


                  Total views.

                  © 2013 - 2019. All rights reserved.

                  Powered by Hydejack v6.6.1