最使用CSS+DIV學習合集 從零開始

開始學習，因為剛開始不懂，是以先拿别人的Div+Css頁面看，當初我選擇的是網頁設計師這個站，上邊有有很多執行個體

大家可以從這看起 執行個體 當看到 “第12天:校驗及常見錯誤”時你

會對Div+Css有一定的了解

現在咱先來看一些比較常用屬性

font 字型

color 顔色

font-size 字型大小

text-align 文本位置

background 背景

margin 外更新檔

padding 内更新檔

border 邊框

float 布局

這些在蘇昱的Css手冊（這是HTML版）裡邊都可以找到，可以具體看看。

------------------------------------------------------------------------------------------------------------------------------------------------

下邊是執行個體

CSS布局常用的方法：float:none|left|right

取值：

none:預設值。對象不飄浮

left:文本流向對象的右邊

right:文本流向對象的左邊

它是怎樣工作的，看個一行兩列的例子

xhtml代碼：

<div id="wrap">

<div id="column1">這裡是第一列</div>

<div id="column2">這裡是第二列</div>

<div class="clear"></div>

</div>

CSS代碼：

#wrap{width:100;height:auto;}

#column1{float:left;width:40;}

#column2{float:right;width:60;}

.clear{clear:both;}

position:static|absolute|fixed|relative

取值：

static:預設值。無特殊定位，對象遵循HTML定位規則

absolute:将對象從文檔流中拖出，使用left，right，top，bottom等屬性相對于其最接近的一個最有定位設定的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義

fixed:未支援。對象定位遵從絕對(absolute)方式。但是要遵守一些規範

relative:對象不可層疊，但将依據left，right，top，bottom等屬性在正常文檔流中偏移位置

它來實作一行兩列的例子

xhtml代碼：

<div id="wrap">

<div id="column1">這裡是第一列</div>

<div id="column2">這裡是第二列</div>

</div>

CSS代碼：

#wrap{position:relative;width:770px;}

#column1{position:absolute;top:0;left:0;width:300px;}

#column2{position:absolute;top:0;right:0;width:470px;}

他們的差別在哪?

顯然，float是相對定位的，會随着浏覽器的大小和分辨率的變化而改變，而position就不行了，是以一般情況下還是float布局！

CSS常用布局執行個體

單行一列

body{margin:0px;padding:0px;text-align:center;}

#content{margin-left:auto;margin-right:auto;width:400px;}

兩行一列

body{margin:0px;padding:0px;text-align:center;}

#content-top{margin-left:auto;margin-right:auto;width:400px;}

#content-end{margin-left:auto;margin-right:auto;width:400px;}

三行一列

body{margin:0px;padding:0px;text-align:center;}

#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}

#content-mid{margin-left:auto;margin-right:auto;width:400px;}

#content-end{margin-left:auto;margin-right:auto;width:400px;}

單行兩列

#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

#bodycenter#dv1{float:left;width:280px;}

#bodycenter#dv2{float:right;width:420px;}

兩行兩列

#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

#bodycenter#dv1{float:left;width:280px;}

#bodycenter#dv2{float:right;width:420px;}

三行兩列

#header{width:700px;margin-right:auto;margin-left:auto;}

#bodycenter{width:700px;margin-right:auto;margin-left:auto;}

#bodycenter#dv1{float:left;width:280px;}

#bodycenter#dv2{float:right;width:420px;}

#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}

單行三列

絕對定位

#left{position:absolute;top:0px;left:0px;width:120px;}

#middle{margin:0px190px0px190px;}

#right{position:absolute;top:0px;right:0px;width:120px;}

float定位

xhtml代碼：

<div id="wrap">

<div id="column">

<div id="column1">這裡是第一列</div>

<div id="column2">這裡是第二列</div>

<div class="clear"></div>

</div>

<divid="column3">這裡是第三列</div>

<divclass="clear"></div>

</div>

CSS代碼：

#wrap{width:100;height:auto;}

#column{float:left;width:60;}

#column1{float:left;width:30;}

#column2{float:right;width:30;}

#column3{float:right;width:40;}

.clear{clear:both;}

float定位二

xhtml代碼：

<div id="center"class="column">

<h1>Thisisthemaincontent.</h1>

</div>

<div id="left"class="column">

<h2>Thisistheleftsidebar.</h2>

</div>

<div id="right"class="column">

<h2>Thisistherightsidebar.</h2>

</div>

CSS代碼：

body{

margin:0;

padding-left:200px;

padding-right:190px;

min-width:200px;

}

.column{

position:relative;

float:left;

}

#center{

width:100;

}

#left{

width:200px;

right:200px;

margin-left:-100;

}

#right{

width:190px;

margin-right:-100;

}

這些網上baidu一下都應該可以搜到

當你能看懂這些時不妨自己動手親自寫一些比較簡單的，這些應該多去實踐才會真正的掌握

我寫的這個

xhtml代碼：

<div id="enter"><a href="http://www.ziuo.cn/lbs" target="_blank" rel="external nofollow" >The story of the Worm</a></div>

<div id="ziuotext">時光一逝永不回,往事隻能回味.<br />憶童年時竹馬青梅,兩小無猜日夜相随.<br />春風又吹紅了花蕊,你已經也添了新歲.<br />你就要變心像時光難倒回,我隻有在夢裡想依偎.</div>

<div id="copyright">

owered By <a href="/" target="_blank" rel="external nofollow" >ZiUo.Cn</a> CopyRight 2005-2007 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="external nofollow" target="_blank">豫ICP備05026732号</a></div>

CSS代碼：

body {background-color:#FFFFFF;margin: 0px;text-align:center;line-height:150%;font-size:12px;color:#AA0000;font-family:'宋體'}

#enter{;font-size:20px;font-family:Impact;margin-top:100px;}

#enter a{font-size:36px;color:#AA0000; text-decoration:none}

#enter a:hover{color:#FFFFFF; background:#AA0000; padding:2px;}

#ziuotext{margin-top:30px;}

#copyright{margin-top:50px;}

a{color:#AA0000; text-decoration:none}

a:hover{color:#FFFFFF; background:#AA0000; padding:2px;}

平時網絡收集一些效果，并非完全Div

http://www.ziuo.cn/box/2008奧運官方動畫效果

http://www.ziuo.cn/box/CSS+JS控制圖檔展示

http://www.ziuo.cn/box/yahoo标簽

http://www.ziuo.cn/box/換皮膚程式

http://www.ziuo.cn/box/滑鼠移上去顯示大圖

http://www.ziuo.cn/box/圖檔顯示效果

http://www.ziuo.cn/box/網站公告牌

http://www.ziuo.cn/box/無限級CSS樹形菜單

http://www.ziuo.cn/box/新浪的圖檔新聞效果

http://www.ziuo.cn/box/新浪滑門技術

http://www.ziuo.cn/box/一個不錯的JS折疊效果

http://www.ziuo.cn/box/一個相冊的效果

http://www.ziuo.cn/box/Bmail聯系人飛來飛去效果.html

http://www.ziuo.cn/box/Css+Div寫的房子一.html

http://www.ziuo.cn/box/Css+Div寫的房子二.html

http://www.ziuo.cn/box/css菜單示範.html

http://www.ziuo.cn/box/Css實作背景漸變效果.html

http://www.ziuo.cn/box/DIV寫的QQ菜單.html

http://www.ziuo.cn/box/比較BT的JS+CSS角型效果.html

http://www.ziuo.cn/box/純CSS平行四邊形菜單.html

http://www.ziuo.cn/box/仿chinaren拖動效果.html

http://www.ziuo.cn/box/仿flash菜單.html

http://www.ziuo.cn/box/仿Google和Windows Live的拖拽.html

http://www.ziuo.cn/box/感覺很好的菜單.html

http://www.ziuo.cn/box/滾動播放效果.html

http://www.ziuo.cn/box/很實用的頁籤效果.html

http://www.ziuo.cn/box/絕對定位的DIV寬度自動适應的一個方法.html

http://www.ziuo.cn/box/利用CSS的Clip屬性來創造多彩文字.html

http://www.ziuo.cn/box/三列高度自适應js控制.html

http://www.ziuo.cn/box/伸縮菜單.html

http://www.ziuo.cn/box/頁籤JS效果.html

http://www.ziuo.cn/box/一個用CSS制作的圓角層.html

http://www.ziuo.cn/box/用CSS實作表單form布局.html

http://www.ziuo.cn/box/遮照效果.html