CSS浮动属性Float详解

来源
http://paranimage.com/css-float-attribute/

什么是CSS Float？

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

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

#sidebar { float: right; }

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

Float的用处

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

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

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

清除Float

清除(clear)是浮动(float)的相关属性.一个设置了清除Float的元素不会如浮动所设置的一样，向上移动到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 属性不是为了清除浮动而定义的。要小心不要覆盖住内容或者触发了不需要的滚动条。

			.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)代替。

posted @ 2012-07-20 14:29 一堣而安 阅读(196) | 评论 (0) | 编辑 收藏

Oracle截取字符串和查找字符串

oracle 截取字符(substr)，检索字符位置(instr) case when then else end语句使用 收藏

常用函数：substr和instr
1.SUBSTR（string,start_position,[length]）   
求子字符串，返回字符串
解释：string 元字符串
       start_position   开始位置（从0开始）
      
length 可选项，子字符串的个数
For example:
substr("ABCDEFG", 0); //返回：ABCDEFG，截取所有字符

substr("ABCDEFG", 2); //返回：CDEFG，截取从C开始之后所有字符
substr("ABCDEFG", 0, 3);
//返回：ABC，截取从A开始3个字符
substr("ABCDEFG", 0, 100);
//返回：ABCDEFG，100虽然超出预处理的字符串最长度，但不会影响返回结果，系统按预处理字符串最大数量返回。
substr("ABCDEFG",
0, -3); //返回：EFG，注意参数-3，为负值时表示从尾部开始算起，字符串排列位置不变。

2.INSTR（string,subString,position,ocurrence）查找字符串位置
解释：string：源字符串
     
subString：要查找的子字符串
      position：查找的开始位置
     
ocurrence：源字符串中第几次出现的子字符串
For example:
INSTR('CORPORATE FLOOR','OR', 3,
2)中，源字符串为'CORPORATE FLOOR', 目标字符串为'OR'，起始位置为3，取第2个匹配项的位置；返回结果为 14 '

posted @ 2012-07-11 16:32 一堣而安 阅读(284) | 评论 (0) | 编辑 收藏

jquery中对 iframe的操作

来源：

http://www.cr173.com/html/13126_1.html

jquery中对 iframe的操作

posted @ 2012-07-11 16:31 一堣而安 阅读(4136) | 评论 (0) | 编辑 收藏

CSS定义字体行间距

CSS定义字体行间距 line-height:xxpx;

CSS定义字体间距

下面我们讲述一下CSS的文本属性，还是先来看一下文本属性的详细列表：

我们可以从表中看到在这里可以定义文本的文字间距、字母间距、装饰、对齐方式、缩进方式和行高等属性。

举个例子来看看吧：

CODE:

<p style="letter-spacing:5px;text-align:justify;text-indent: 4em;line-height：17pt">我们看到经过文本属性处理的文本字与字之间多了间距，行与行之间多了行高，对齐方式变成了两端对齐，并且段首又多缩进了两格。</p>

letter-spacing设置了字间距为5px，其中5px为一个长度单位；text-align设置了对齐方式为两端对齐；indent设置了缩进格为4em；line-height设置了行高为17pt

从上面的例子，我们可以看出利用CSS的文本属性可以方便的对页面中的文本进行排版。

posted @ 2012-07-07 10:25 一堣而安 阅读(590) | 评论 (0) | 编辑 收藏

HTML小技巧将table边框改为细线

<table>     <tr>         <th>table head (row1, col1)</th>         <th>table head (row1, col2)</th>         <th>table head (row1, col3)</th>     </tr>     <tr>         <td>table data (row1, col1)</td>         <td>table data (row1, col2)</td>         <td>table data (row1, col3)</td>     </tr>     <tr>         <td>table data (row2, col1)</td>         <td>table data (row2, col2)</td>         <td>table data (row2, col3)</td>     </tr>
</table>

table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}

posted @ 2012-07-05 16:53 一堣而安 阅读(2423) | 评论 (0) | 编辑 收藏

css排版时出现：里面的div设置margin-top值时外面div会向下移动相应距离这是为什么

<body>
<div class="logon">
      <div  class="log_bk">

      </div>
</div>
</body>

body { margin:0 auto; padding:0px; background:#0A76B0;}
#logon{ background:url(../images/logon-bk.jpg) no-repeat left top; 
            height:865px; width:1251px;}
.log_bk{ background:url(../images/01.png) no-repeat left top; height:380px; 
              height:270px; margin:300px 0 180px 460px;}

因为背景是图案所以要设置高度，我把#logon的背景定位在顶部也不行。

满意回答 
设置logon的padding: 1px
因为logon和log_bk垂直方向的margin合并了，如果设置了logon的padding为1px就可以避免margin合并。
追问
好了，刚才把padding值加到里面的div了，不过两个div的margin值为什么会合并呢？
 
回答
恩，刚才我写错了，写成里面的了。。
这个是css标准规定的，垂直方向的margin会合并。
比如你有很多段落，margin是10px，其实第一段上面的margin和最后一段下面的margin是10px，且段与段之间的margin也是10px，css标准就是为了保持这个margin一致才规定垂直方向margin要合并。
margin合并时会取最大的那个margin，所以合并后logon的margin-top也成了300px了。
 

posted @ 2012-07-05 16:52 一堣而安 阅读(2633) | 评论 (0) | 编辑 收藏

CSS实现垂直居中的5种方法

<div id="wrapper">
<div id="cell">
<div class="content">
		Content goes here</div>
</div>
</div>

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

<div class="content">
	Content goes here</div>

#content {
	position:absolute;
	top:50%;
	height:240px;
	margin-top:-120px; /* negative half of the height */
}

<div id="floater"></div>
<div id="content">
	Content here
</div>

#floater	{float:left; height:50%; margin-bottom:-120px;}
#content	{clear:both; height:240px; position:relative;}

<div id="content">
	Content here</div>

#content {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	height:240px;
	width:70%;
}

<div id="content">
	Content here</div>

#content {height:100px; line-height:100px;}

<div id="top">
<h1>Title</h1>
</div>
<div id="content">
	Content Here</div>

#floater	{float:left; height:50%; margin-bottom:-120px;}
#top		{float:right; width:100%; text-align:center;}
#content	{clear:both; height:240px; position:relative;}

#floater/*把 content 置中*/
#contred/*centre 盒*/
#side
#logo
#nav/*无序列表*/
#content
#bottom/*放置版权等*/

A Centred Company
<div id="centered">
<div id="side">
<div id="logo">
			<strong><span>A</span> Company</strong></div>
<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">Products</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">About</a></li>
</ul>
</div>
<div id="content">
<h1>Page Title</h1>
Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing.
			Energistically simplify impactful niche markets via enabled imperatives.
			Holisticly predominate premium innovation after compelling scenarios.
			Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products.
			Distinctively syndicate standards compliant schemas before robust vortals.
			Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.
<h2>Heading 2</h2>
Efficiently embrace customized web-readiness rather than customer directed processes.
			Assertively grow cross-platform imperatives vis-a-vis proactive technologies.
			Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces.
			Conveniently streamline competitive strategic theme areas with focused e-markets.
			Phosfluorescently syndicate world-class communities vis-a-vis value-added markets.
			Appropriately reinvent holistic services before robust e-services.</div>
</div>
<div id="bottom">
	Copyright notice goes here</div>

html, body {
	margin:0; padding:0;
	height:100%;
}
 
body {
	background:url('page_bg.jpg') 50% 50% no-repeat #FC3;
	font-family:Georgia, Times, serifs;
}
 
#floater {
	position:relative; float:left;
	height:50%;	margin-bottom:-200px;
	width:1px;
}
 
#centered {
	position:relative; clear:left;
	height:400px; width:80%; max-width:800px; min-width:400px;
	margin:0 auto;
	background:#fff;
	border:4px solid #666;
}
 
#bottom {
	position:absolute;
	bottom:0; right:0;
}
 
#nav {
	position:absolute; left:0; top:0; bottom:0; right:70%;
	padding:20px; margin:10px;
}
 
#content {
	position:absolute; left:30%; right:0; top:0; bottom:0;
	overflow:auto; height:340px;
	padding:20px; margin:10px;
}

#nav ul {
	list-style:none;
	padding:0; margin:20px 0 0 0; text-indent:0;
}
 
#nav li {
	padding:0; margin:3px;
}
 
#nav li a {
	display:block; background-color:#e8e8e8;
	padding:7px; margin:0;
	text-decoration:none; color:#000;
	border-bottom:1px solid #bbb;
	text-align:right;
}
 
#nav li a::after {
	content:'»'; color:#aaa; font-weight:bold;
	display:inline; float:right;
	margin:0 2px 0 5px;
}
 
#nav li a:hover, #nav li a:focus {
	background:#f8f8f8;
	border-bottom-color:#777;
}
 
#nav li a:hover::after {
	margin:0 0 0 7px; color:#f93;
}
 
#nav li a:active {
	padding:8px 7px 6px 7px;
}

posted @ 2012-07-05 16:42 一堣而安 阅读(222) | 评论 (0) | 编辑 收藏

html文字滚动代码

来源：http://www.cnblogs.com/yangzhixiao/archive/2011/07/22/2113731.html

代码如下<MARQUEE>滚动文字</MARQUEE>

<marquee style="WIDTH: 388px; HEIGHT:  200px" scrollamount="2" direction="up" >
< div align="left" ><br />
< /div >
< center ><font face="黑体"  color="#008000" size="4" ></font ></center >
< div align="left" ><br />
< /div >
< center >
< p ><font color="#ff6600" size="4"  >滚动文字</font ></p >
< p ><font color="#ff4500" size="4"  >滚动文字</font ></p >
< p ><font color="#ff3300" size="4"  >滚动文字</font ><br />
< br />
< /p >
< /marquee >

marquee 参数：
BGColor：滚动文本框的背景颜色。
Direction：滚动方向设置，可选择Left、Right、up和down。
scrolldelay：每轮滚动之间的延迟时间，越大越慢。
scrollamount：一次滚动总的时间量，数字越小滚动越慢。
Behaviour：滚动的方式设置，三种取值：Scroll（循环滚动）  lide（单次滚动）、Alternate（来回滚动）。
Align：文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width：滚动文本框的宽度，输入一个数值后从后面的单选框选择in  Pixels(按像素)或是in Percent(按百分比)。
Height：滚动文本框的高度，输入一个数值后从后面的单选框选择in  Pixels(按像素)或是in Percent(按百分比)。
loop：滚动次数。默认为infinite
hspace、vspace：前后、上下的空行。

       滚动字幕会让很多人感到兴奋，特别是第一次使用滚动字幕时，会爱不释手。滚动字幕我也做得不少了，对它也不会兴奋了，所以现在也用得不多了。有不少朋友常 问到这是怎么做的，现在做一个详细的专题，让你更全面地了解一下。
滚动字幕在FrontPage的组件里有，但是FrontPage这个软件只能支持单行文字，一出现多行文字它就无能为力了，而且它只能支持一行滚动！ (如果出现只能滚动一行的情况，解决办法是把这段代码嵌入到JavaScript的document.write里面，请看下面例d的详细说  明)Dreamweaver也只能用编写HTML代码的方法。所以强烈建议用记事本打开网页源代码来编辑。

1.建立第一个滚动字幕。代码：
<marquee scrollAmount=2  width=300>靓丽风景线</marquee>
效果如： 靓丽风景线

2.各参数详解：
a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。
b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。
c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up 表示↑，down表示↓。
d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止 滚动)

3.实例：
a)如何给滚动字幕加超链接？这跟平时的超链接是完全一样的。只要在文字外面加上<a   href=***>和</a>就可以了。如下效果，代码是<marquee scrollAmount=2   width=300><a   href=http://www.cctv.com>中央电视台</a></marquee>，点击中央电视台就可以进入 了：
中央电视台

b)如何制作当鼠标停留在文字上，文字停止滚动？
代码如：
<marquee scrollAmount=2 width=300  onmouseover=stop() onmouseout=start()>文字内容</marquee>
效果如：
文字内容

c)交替效果。代码如：
<marquee scrollAmount=2 width=99  behavior=alternate>文字内容</marquee>
效果如：
文字内容

d)多行文本向上滚动。代码如：
<marquee scrollAmount=2 width=300 height=160   direction=up>·早晨好啊！<br>·空气好清新啊<br>·你还好吗<p>·<a   href=http://www.cctv.com>靓丽风景线</a></marquee>
效果如：
·早晨好啊！
·空气好清新啊
·你还好吗
·靓丽风景线

·注意：如果你的网页经过了FrontPage编辑，保存之后，只能滚动一行，这时候你发现你原 来的代码顺序已经变了，My  god！解决的办法是，找出原来的代码，把它嵌入到JavaScript的document.write中即可，上述代码写为：
<script>document.write('<marquee  scrollAmount=2 width=300  height=160  direction=up>·早晨好啊！<br>·空气好清新啊<br>·你还好吗 <p>·<a   href=http://www.cctv.com>靓丽风景线</a></marquee>')<  /script>

e)改变滚动字幕的颜色？可以用样式表来控制。如下效果，代码是<marquee  scrollAmount=2  width=300><a   style=color:CC6600>你还好吗</a></marquee>。
你还好吗

图片滚动
用<img  src=相对路径/文件名>的语句。并且要注意图片名不要中文，要注意区分英文大小写。

图片做超链接
用<a   href=>和</a>把<img>包围，并且img必须设border=0，否则图片会出现蓝框。正确的例子如：&amp; lt;a href=http://www.webshu.com><img src=http://www.cnblogs.com/j/01.jpg   border=0></a>
其中a  href=表示超链接，这是最常用的。练习的方法也很简单，就是平时用FP或DW做网页的时候，要多查看源代码。

多张图片排列滚动
通常图片和图片之间用<br>(回行)或<p  style=margin-top:9>(精确调整图片间的距离)来链接。也可以把你的图片先用表格排版，然后把这个表格的所有语句也加入到 marquee中，让这个表格来滚动。 

代码<script>document.write('<marquee  scrollAmount=2 width=340 height=160 direction=up onmouseover=stop()  onmouseout=start()><a href=http://www.webshu.com><img  src=http://www.cnblogs.com/j/01.jpg   border=0></a></marquee>')</script>

posted @ 2012-07-05 11:52 一堣而安 阅读(474) | 评论 (0) | 编辑 收藏

后台json传递

json除了可以用于前台传递，还可用于后台之间传递。它可以传递List,Map,Bean等类型的数据。

例如： User u1=new User();

传递的json格式为：
{"message":"111","users":[{"password":"123","username":"zy"},{"password":"456","username":"msl"}]}

在接收端的java文件中取：

returnJson是从输入流中得到的json格式的字符串。输出为：

{"message":"111","users":[{"password":"123","username":"zy"},
{"password":"456","username":"msl"}]}

if(returnJson !=null&& returnJson !=""){

更多信息请查看 java进阶网http://www.javady.com

posted @ 2012-06-29 19:54 一堣而安 阅读(153) | 评论 (0) | 编辑 收藏

jquery动态添加删除div--事件绑定,对象克隆

功能：点击增加，自动添加一个iptdiv 点击 iptdiv后的 X 自动删除当前div

<script type="text/javascript" src="jquery.js"></script>
<body>
<form action="" method="post" enctype="multipart/form-data">
<label>请选择上传的图片</label>
<a href="javascript:addimg()" >增加图片</a>
<div id="mdiv">
<div >
<input type="file" name="img[]" /><a href="#" name="rmlink">X</a>
</div>
</div>
<input type="submit" name="submit" value="上传图片" />
</form>
<script type="text/javascript" >
$(document).ready(function(){
$("a[name=rmlink]").click(function(){
$(this).parent().remove();
})
})
function addimg(){
$("#mdiv").append('<div ><input type="file" name="img[]" /><a href="#" name="rmlink">X</a></div>');
}
</script>

用jquery方法的绑定侦听和销毁来解决动态div的增加删除：

正确代码：

<script type="text/javascript" >
$(document).ready(function(){
 bindListener();
})

function addimg(){
 $("#mdiv").append('<div ><input type="file" name="img[]" /><a href="#" name="rmlink">X</a></div>');

 // 为新元素节点添加事件侦听器
  bindListener();
}

// 用来绑定事件(使用unbind避免重复绑定)
function bindListener(){
 $("a[name=rmlink]").unbind().click(function(){
  $(this).parent().remove();
    })
}
</script>

这中间就是存在一个事件绑定的过程，如果没有的话通过js加进来的div内不事件并不会被执行，添加了侦听事件功能后才能正确运行

用jquery的clone方法来解决动态div的增加删除:

这里还有更好的写法，我做了些许的修改，也许弄巧成拙了。但是功能实现了，更多的请参考phpchina论坛的帮助：http://bbs.phpchina.com/viewthread.php?tid=180911&extra=&page=1

<body>
<div style="display:none;">
<!--clone div start-->
    <div >
        <input type="file" name="img[]" /><a href="#" name="rmlink">X</a>
    </div>
</div>
<!--clone div end-->

<form action="dowater.php" method="post" enctype="multipart/form-data">
<label>请选择上传的图片</label>
<a href="#" id="addimg" >增加图片</a>
<div id="mdiv">
    <div >
    <input type="file" name="img[]" /><a href="#" name="rmlink">X</a>
    </div>
</div>
<input type="submit" name="submit" value="上传图片"  />
</form>
<script type="text/javascript" >
var temp; 
$(document).ready(function(){        
 temp = $(".iptdiv:first");
 $("a[name=rmlink]").click(function(){
  $(this).parent().remove();
    })
 $("#addimg").click(function(){
  temp.clone(true).appendTo($("#mdiv"));
 })
})
</script>
</body>

posted @ 2012-06-29 19:53 一堣而安 阅读(3986) | 评论 (0) | 编辑 收藏