欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

div css布局解決瀏覽器兼容及優(yōu)化等實(shí)用技巧

  發(fā)布時(shí)間：2012-12-19 10:36:40   作者：佚名   我要評(píng)論
本文整理了一些在div+css 布局過程中的一些經(jīng)驗(yàn)技巧如：瀏覽器兼容、規(guī)范寫法、簡(jiǎn)寫等一系列，需要的朋友可以參考下
DIV 上下居中用 line-height
Html代碼

復(fù)制代碼
代碼如下:

<style type="text/css">
div.v-align {line-height: 200px;height: 200px;border: 1px solid red;}
</style>
<div class="v-align">垂直居中</div>

清除瀏覽器默認(rèn)樣式
1.用其他有名的庫(kù)來(lái)清除（如：YUI)
2.自已清除 如：
* {padding: 0;margin:0;}

讓A支持所有瀏覽器
Html代碼

復(fù)制代碼
代碼如下:

<style type="text/css">
a.agideo:link, a.agideo:visited {font-weight: bold;text-decoration: none;color: green;}
a.agideo:hover, a.agideo:active {font-weight: bold;text-decoration: none;color: red;}
</style>
<a class="agideo">捷道數(shù)碼</a>
<style type="text/css">
a.google:hover, a.google:active {font-weight: bold;text-decoration: none;color: red;}
a.google:link, a.google:visited {font-weight: bold;text-decoration: none;color: green;}
</style>
<a class="google">Google</a>

A 偽類定義順序記憶法
LoVe:HAte(愛恨)
IMG vertical-align
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
baseline :默認(rèn)值。將支持 valign 特性的對(duì)象的內(nèi)容與基線對(duì)齊
sub 垂直對(duì)齊文本的下標(biāo)
super 垂直對(duì)齊文本的上標(biāo)
top : 將支持 valign 特性的對(duì)象的內(nèi)容對(duì)象頂端對(duì)齊
text-top : 將支持 valign 特性的對(duì)象的文本與對(duì)象頂端對(duì)齊
middle : 將支持 valign 特性的對(duì)象的內(nèi)容與對(duì)象中部對(duì)齊
bottom : 將支持 valign 特性的對(duì)象的內(nèi)容與對(duì)象底端對(duì)齊
text-bottom : 將支持 valign 特性的對(duì)象的文本與對(duì)象頂端對(duì)齊
length : 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)。可為負(fù)數(shù)。定義由基線算起的偏移量。基線對(duì)于數(shù)值來(lái)說(shuō)為0，對(duì)于百分?jǐn)?shù)來(lái)說(shuō)就是0%。請(qǐng)參閱 長(zhǎng)度單位。目前IE尚未實(shí)現(xiàn)此參數(shù)
Html代碼　

復(fù)制代碼
代碼如下:

<style type="text/css">
div.v-align {border: 1px solid red;line-height: 40px;float: left;font-size: 11px;height: 40px;}
div.v-align img.only-img {float:left;}
div.v-align.has-img {padding-top: 10px;height: 30px;}
div.v-align.has-img-and-text img.has-text {
vertical-align: -4px !important;vertical-align: middle;margin-top: -3px !important;margin-top: 0px;}
div.v-align.has-img-and-text {
padding-top: 0px !important;padding-top: 10px;height: 40px !important;height: 30px;}
</style>
<div class="v-align">正常</div>
<div class="v-align has-img"><img src="http://dl.iteye.com/upload/attachment/162320/1f89f269-580c-304b-975a-e6004b9893ce.png" class="only-img" /></div>
<div class="v-align has-img-and-text"><img src="./accept.png" align="absmiddle" class="has-text" />有圖片有字</div>

垂直Margin 疊加
Html代碼

復(fù)制代碼
代碼如下:

<style tyep="text/css">
body, div {padding:0;margin:0;}
div, span {padding: 10px;margin: 10px;border: 10px solid #000;}
#div1 {background-color: red;}
#div2 {background-color: green;}
#div3 {background-color: blue;}
</style>
<div id="div1"><div>div1</div></div>
<div id="div2"><div>div2</div></div>
<div id="div3"><span>span1</span><span>span2</span></div>

Background position
Html代碼

復(fù)制代碼
代碼如下:

<style tyep="text/css">
body, div {padding:0;margin:0;}
div {border:1px solid #ccc;height: 200px;width: 300px;}
#div1 {background: url(http://dl.iteye.com/upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20px 20px;}
#div2 {background: urlhttp://dl.iteye.com/upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20% 20%;}
#div3 {background: url(http://dl.iteye.com/upload/attachment/162318/8be0e495-2d0a-3ec2-9f5f-7465eb8c23ae.jpg) no-repeat 20% 20%;}
</style>
<div id="div1">20px</div><br/>
<div id="div2">20%</div><br/>
<div id="div3">20%</div>

Float 占地問題
1.父子TAG都Float以父能包含子
Html代碼

復(fù)制代碼
代碼如下:

<style type="text/css">
div.parent {border: 1px solid red;width: 600px;float: left; }
div.child {border: 1px solid green;float: left;}
</style>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>

Html代碼

復(fù)制代碼
代碼如下:

<style type="text/css">
div.parent {border: 1px solid red;width: 600px;float: left; }
div.child {border: 1px solid green;float: left;}
</style>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>

2.最后一個(gè)子TAG后加一clear的無(wú)語(yǔ)義tag
Html代碼

復(fù)制代碼
代碼如下:

<style type="text/css">
div.parent {border: 1px solid red;width: 600px;}
div.child {border: 1px solid green;float: left;}
div.clear {clear: both;}
</style>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="clear"></div>
</div>

例子7:
Html代碼

復(fù)制代碼
代碼如下:

<style type="text/css">
div.parent {border: 1px solid red;width: 600px;}
div.child {border: 1px solid green;float: left;}
div.clear {clear: both;}
</style>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="clear"></div>
</div>

相關(guān)文章

最新評(píng)論