it-e-28 Dial Peer

A dial peer, also known as an addressable call endpoint, is a device that can originate or
receive a call in a telephone network. In voice over IP (VoIP), addressable call endpoints can be
categorized as either voice-network dial peers or POTS (plain old telephone service) dial peers.
Voice-network dial peers include VoIP-capable computers, routers, and gateways within a
network. POTS dial peers include traditional phone sets, cell phones, and fax machines.
The term dial peer is sometimes used in reference to a program that matches a specific
dialed sequence of digits to an addressable call endpoint. According to this definition, there is
one dial peer for each call leg (connection between two addressable call endpoints).
Dial peer hunting is a feature of voice over IP(VoIP) systems in which the device at the
originating router attempts to find an alternative addressable call endpoint if it cannot establish a
connection to the intended endpoint. For dial peer hunting to work, the originating router must be
configured with a list (sequence) of dial peers, all of which can route a call to the same endpoint,
but using different destination routers. If the originating router receives an invalid-number or
user-busy code from the destination router, the originating router proceeds to the next dial peer
in the sequence.

Continue reading it-e-28 Dial Peer

wicket,tapestry5,sopo 模板实现比较

1 Wicket实现

Wicket模板是html格式,示例:index.html

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

<html>

<head>

<title>Index.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=ISO-8859-1">

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

</head>

<body>

<a wicket:id="edit" href="UserEdit.html?uid=1" target="_blank" >edit form</a>

</body>

</html>

还要在后台page类Index 中手动添加进组件列表中。

public class Index extends WebPage

{

/**

* Constructor

*/

public Index()

{

PageLink link = new PageLink("edit",new IPageLink());

add(link);

}

}

add方法是继承自父类org.apache.wicket.MarkupContainer的方法,会将组件添加到其字段children中去.

模板由org.apache.wicket.markup.MarkupParser解析,遇到wicket:id属性的会转换为org.apache.wicket.markup.MarkupElement,

最终将html模板解析成MarkupElement列表,添加到org.apache.wicket.markup.Markup的List<MarkupElement> markupElements集合中,在组件绘制的时候,将其

包装成org.apache.wicket.markup.MarkupStream,会遍历MarkupElement列表,依据组件id获得组件,让每个组件进行绘制--调用方法

void org.apache.wicket.Component.render(MarkupStream markupStream).

具体的主要的解析实现是由org.apache.wicket.markup.parser.XmlPullParser完成的,通过过字符串操作来解析,详见其next方法,并没有使用第三方类库.

2 tapestry实现

tapestry5模板时xml格式,示例Index.tml

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"> <head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<h1>Address Book</h1>
<t:span c="d" >${fi}</t:span>
<ul>
<li>
<a t:type="pagelink" t:page="index" >Create new address</a>
</li>
</ul>
</body> </html>
因为已经在模板中指明了这个节点是什么类型的组件,所以,tapestry5就不需要再add组件了,它本身也不提供add方法。
public class Index

{

@Inject

private Logger logger;

private GridDataSource dss;

private int fi;

public Index()

{

super();

System.out.println("call ctor.");

}

public int getFi()

{

return fi;

}

public void setFi(int fi)

{

this.fi = fi;

}

}

tapastry5使用stAx实现的,这篇文章介绍了stax的用法,tapestry5通过注入的方式将org.apache.tapestry5.internal.services.TemplateParserImpl注入到

org.apache.tapestry5.internal.services.ComponentTemplateSourceImpl中的private final TemplateParser parser;字段中,TemplateParserImpl

实际使用的是org.apache.tapestry5.internal.services.StaxTemplateParser,在这里面会使用stax对模板进行解析。它通过节点是否有t:id,t:type属性来判断

是否是一个服务端组件。解析完模板会组建成一个节点列表,再在绘制页面的时候依据这个列表的顺序来调用相应的组件绘制。

逻辑主要在以下的类中
org.apache.tapestry5.internal.parser.ComponentTemplateImpl
org.apache.tapestry5.internal.structure.PageImpl
org.apache.tapestry5.internal.services.PageRenderRequestHandlerImpl

org.apache.tapestry5.internal.services.PageResponseRendererImpl

org.apache.tapestry5.internal.services.PageMarkupRendererImpl

org.apache.tapestry5.internal.services.PageRenderQueueImpl

Page org.apache.tapestry5.internal.pageload.PageLoaderImpl.loadPage(String logicalPageName, Locale locale)

3 sopo的实现方法

Sopo是可由每个page类来指明模板内容,只要是html格式就可以,示例:

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

<html>

<head>

<title>test.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=ISO-8859-1">

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

<script type="text/javascript" src="js/hello.js" ></script>

<script type="text/javascript">

function $(id){

return document.getElementById(id);

}

function test()

{

$('rst').innerHTML=reg.test($('d').value);

}

var reg = new RegExp("^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$");

//var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/i;

</script>

</head>

<body>

  h--------

<!-- hahah  -->

<![CDATA[jkjkjk]]>

<form action="">

<label stype="s:Label" id="lab1" >Hello World1<label stype="s:Label" id="lab2" >Hello World3</label></label>

<input type="password" />

<label stype="s:Label" id="lab3" >Hello World2</label>

<input stype="s:Checkbox" id="chk" name="chk" >sss</input>

<select stype="s:Select" id="sel" name="sel" width="20px" >

<option stype="s:Option" text="1" ></option>

<option stype="s:Option" text="2" selected="selected" ></option>

<option stype="s:Option" text="3" ></option>

</select>

<input id="d" type="text" /><button onclick="test();">Test</button>

<span id="rst">true</span>

<input type="radio" name="1" >1</input>

<input type="radio" name="1" >2</input>

<input type="radio" name="1" onclick="alert(this.value);" >3</input>3

</form>

</body>

</html>

它和tapestry有些像,因为模板里面指明了组件类型,所以就不需要再添加了.

public class Index extends Page

{

@Override

public String getTemplate()

{

try

{

return FileUtils.readFileToString(new File(getSession().getServletContext().getRealPath("Index.html")));

}

catch (IOException e)

{

throw new RuntimeException(e);

}

}

@Override

public void onLoad()

{

Label lab = (Label)getRoot().findComponent("lab3");

lab.addComponent(new Literal("<a href=\"#\">hi i am dynamic!!</a>"));

Integer count = (Integer)getViewSate().get("count");

if (null == count)

{

count = 0;

}

count ++;

getViewSate().put("count", count);

Button btn = new Button("Ok" + count);

lab.addComponent(btn);

}

}

Sopo则是由neko解析模板,生成页面的组件树,web.sopo.template这个包下面包含了所有的模板解析类。每个page都有一个根组件

ComponentRoot web.sopo.page.Page.getRoot(),当开始绘制的时候则会从跟组件开始绘制。它的特点是可以在程序逻辑阶段动态的改变组件树的构造,上面的例子可以看到动态的加了个链接和按钮。使用了它的viewstate特性—存贮页面级变量,这和asp.net很像。

比较

这三种都支持模板(包括页面模板和组件模板),共同特点是模板是html格式,美工可以直接编辑模板,没有讨厌的jsp标签.wicket取经于tapestry,tapestry取经于asp.net,而sopo也是学asp.net并且和它最像。Wicket需要后台add对应模板的组件,通过匹配,这样做虽然可以动态的决定绘制组件的类型但是也比较繁琐,它类似于swing的方式,但是Mode这个概念入侵很大,通过session来保持状态。tapestry通过模板和组件的绘制来展示页面,不允许你new 一个组件,并且和prototype, scriptaculous集成了,它的performance是这三个中最快的,虽然page和组件都是pojo,但是有注入依赖,到底这个特性有没有用那是见仁见智了。Sopo则是比较灵活,可以动态的修改组件树,和asp.net非常接近,写组件和tapestry一样非常清晰,概念和实现都很单,缺点是它的性能只适用于中小型应用。

Continue reading wicket,tapestry5,sopo 模板实现比较

google doc api-python试验

本来想做个google document的客户端,但是发现:
python的支持版本还是1.0,而其它已经到3.0beta了
google doc本质是想作为web应用,它是REST的,所以做这个也没什么用
api里面获得文件夹列表就比较困难,我得不到顶层目录的entryid(不知道怎么找)
我找不到指定目录下面的子目录列表,category形式的查询会以文件夹名来找,那么
q/b/c
c
这样的结构,查找c会将q/b/c和c两个文件夹里面的都找出来
---放弃

Continue reading google doc api-python试验

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之后导致的外部容器不能撑开的问题

                  Pagination


                  Total views.

                  © 2013 - 2019. All rights reserved.

                  Powered by Hydejack v6.6.1