css控制div置頂置底的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta http-equiv="Content-Language" content="zh-cn" />

<title>why?</title>

<meta name="robots" content="index, follow" />
http://www.w3css.com/allnews.asp?id=990

<meta name="googlebot" content="index, follow" />

<style type="text/css" media="screen">

<!--

* {margin:0;padding:0;}

body {margin:0 auto;font:12px/20px tahoma Simsun Arial;color:#fff;background-color:#FFF;text-align:center;}

.aaa{ width:150px; background:Blue;position:absolute;left:0;top:0; }

.bbb{ width:150px; background:Blue;position:absolute;right:0;top:0; }

.ccc{ width:150px; position:absolute; top:100%;left:0; margin-top:-20px; background:Blue;}

.ddd{ width:150px; position:absolute; top:100%;right:0; margin-top:-20px; background:Blue;}

.aa{ width:50px; position:fixed; background:Black; _position:absolute;_top:expression(eval(document.documentElement.scrollTop));z-index:1000;left:0;top:0; }

.bb{ width:50px; position:fixed; background:Black; _position:absolute;_top:expression(eval(document.documentElement.scrollTop));z-index:1000;right:0;top:0; }

.a{ color:#000; }

-->

</style>

</head>

<body>

<div class="aaa">AAA</div>

<div class="bbb">BBB</div>

<div class="aa">A</div>

<div class="bb">B</div>

<div class="a">

<br /><br /><br /><br />

<br />

A層和B層會隨滾動條移動永久置頂

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>

<div class="ccc">CCC</div>

<div class="ddd">DDD</div>

</body>

</html>

解決用CSS控制DIV居中失效的問題
  有朋友使用DIV居中,但是卻發現DIV居中失靈了,是怎麽回事呢?下面給大家解決一下問題,呵呵!   1、一般情況下DIV居中失效是因爲沒寫DTD語句   在頁面的最上方加上:   <!DOCTYPE html PUBLIC "-//W3C//...查看完整版>>解決用CSS控制DIV居中失效的問題
 
解決用CSS控制DIV居中失效的問題-css設計
  有朋友使用DIV居中,但是卻發現DIV居中失靈了,是怎麽回事呢?下面給大家解決一下問題,呵呵!  1、一般情況下DIV居中失效是因爲沒寫DTD語句  在頁面的最上方加上:  <!DOCTYPE html PUBLIC "-//W3C//DTD...查看完整版>>解決用CSS控制DIV居中失效的問題-css設計
 
table建站,XHTML建站和DIV建站不同-css設計
最近有客戶問到“table建站、DIV建站以及XHTML建站的區別”,其實這也是國內網站建設逐步走向成熟的標志。網站建設,簡單的來說,就是“這個人長的怎麽樣”和“這個人內心怎麽樣”。一部分是外觀所展示出來的“視覺效...查看完整版>>table建站,XHTML建站和DIV建站不同-css設計
 
CSS教程:DIV元素與SPAN元素的區別-css設計
首先講兩個概念,一個是行內元素,一個是塊級元素。行業元素是指該元素標記的內容不不會對現在的結構造成影響,屬于應用樣式,輔助應用樣式表等作 用;而塊級元素爲一個塊狀,單獨占據一行,相當于在一個該元素前後各...查看完整版>>CSS教程:DIV元素與SPAN元素的區別-css設計
 
CSS:再論清除浮動的空DIV方法-css設計
CSS 使用浮動會造成布局的混亂,通常清除浮動的方法是,利用一個如下樣式的空 Div:...查看完整版>>CSS:再論清除浮動的空DIV方法-css設計
 
Table建站,XHTML和DIV建站的不同-css設計
最近有客戶問到“table建站、DIV建站以及XHTML建站的區別”,其實這也是國內網站建設逐步走向成熟的標志。網站建設,簡單的來說,就是“這個人長的怎麽樣”和“這個人內心怎麽樣”。一部分是外觀所展示出來的“視覺效...查看完整版>>Table建站,XHTML和DIV建站的不同-css設計
 
CSS:IE6下CSS定義DIV高度的問題-css設計
IE6下默認的字體尺寸大致在 12 – 14px 之間,當你試圖定義一個高度小于這個默認值的 div 的時候, IE 會固執的認爲這個層的高度不應該小于字體的行高。所以即使你用 height:4px; 來定義了一個 div 的高度,實際在 I...查看完整版>>CSS:IE6下CSS定義DIV高度的問題-css設計
 
CSS:HTML5語義化標記抛棄DIV標記-css設計
曾經,設計師們經常會跟頻繁使用基于table的沒有任何語義的布局。不過最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者,聰明的設計師們慢慢的接受了相對更語義化的<div>布局替代了table布局,並且開...查看完整版>>CSS:HTML5語義化標記抛棄DIV標記-css設計
 
css教程:DIV布局網頁的常見錯誤-css設計
1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。2. 檢查CSS是否正確檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用Cl...查看完整版>>css教程:DIV布局網頁的常見錯誤-css設計
 
 
回到王朝網路移動版首頁