div+css教程(入門到精通)詳細(xì)講解綜合文庫

1/1div+css教程(入門到精通)詳細(xì)講解-綜合文庫

div＋css教程(入門到精通）

名目：

一、div＋css教程(入門到精通）具體講解

二、DIV+CSS網(wǎng)頁布局常用基礎(chǔ)學(xué)問

三、div＋css常用布局入門

四、div＋css網(wǎng)站首頁布局實(shí)例教程

一、div＋css教程(入門到精通）具體講解

CSS高度_cssheight

DIVCSS高度基礎(chǔ)學(xué)問

這里的CSS高度是指通過CSS來掌握設(shè)置對象的高度。使用CSS屬性單詞height。單位可以使用PX，em等常用使用PX（像素）為單位。

實(shí)例：

.yangshi{height:300px;}即設(shè)置了yangshi選擇器對象高度為300px。

CSS高度單詞：height

CSS最大高度：max-height(IE7及以上版本掃瞄器支持)

CSS最小高度：min-height(IE7及以上版本掃瞄器支持)

CSS上下居中：line-height

以上可跟值為數(shù)字加單位。

Html初始高度與DIV+CSS高度對比

以前html直接設(shè)置高度width="300"這種方式嵌入表格標(biāo)簽內(nèi)，而且無需帶單位，默認(rèn)以px（像素）為單位。

實(shí)例：

我的高度為100px

我高度為50px

分別設(shè)置了高度為100px和50px的兩行表格

接下來我們講解CSS高度使用方法及技巧

1、CSS自適應(yīng)高度

一般我們需要讓寬度肯定時(shí)高度隨內(nèi)容增加而增高。此時(shí)我們將無需設(shè)置高度即可實(shí)現(xiàn)此效果。同時(shí)也無需使用height:auto來實(shí)現(xiàn)高度自適應(yīng)。通常默認(rèn)狀況下不設(shè)置高度，對象高度即是自適應(yīng)高度。

2、固定高度及隱蔽超出固定高度的內(nèi)容

許多時(shí)候我需要設(shè)置對象固定高度同時(shí)讓多余的內(nèi)容不顯示出來。

解決方法：設(shè)置固定高度值，和設(shè)置內(nèi)容不被溢出（隱蔽超出內(nèi)容）

如設(shè)置一個(gè)高度為50px；寬度為50px，并禁止內(nèi)容超出此高度寬度，為了觀看效果同時(shí)設(shè)置對象為1px黑色邊框演示，

CSS代碼：

.yangshi{height:50px;width:50px;overflow:hidden;border:1pxsolid#666;}

Htmlbody內(nèi)代碼：

d0fa3e1aa2161479171128c9演示，內(nèi)容

測試內(nèi)容高度超出演示實(shí)例，divcss5實(shí)例

CSS固定高度效果截圖：

3、

說明觀看此上圖，看出設(shè)置固定高度寬度并設(shè)置1px的黑色邊框，并且實(shí)現(xiàn)內(nèi)容未超出設(shè)置高度寬度。

禁止溢出設(shè)置CSS高度、CSS寬度的CSS屬性單詞及值overflow:hidden;。

3、設(shè)置最小高度

使用CSS單詞：min-height

為什么要設(shè)置最小高度？

有時(shí)特殊是在文章頁面里由于文章內(nèi)容多少參差不齊，所以我們可以使用最小高

度設(shè)置讓左右結(jié)構(gòu)的布局對齊，感覺飽和一點(diǎn)，但是我們又不能設(shè)置固定高度，由于內(nèi)容可能多可能少，當(dāng)多的時(shí)候自然設(shè)置固定高度就不會顯示完整內(nèi)容。

這里有個(gè)問題就是IE6不支持最小高度設(shè)置（min-height），解決方法使用csshack方法來解決，大家知道區(qū)分不同掃瞄器時(shí)候用的csshack中IE6可以使用“_”來區(qū)分其它掃瞄器。

最小高度運(yùn)用：

.yangshi{min-height:50px;_height:50px;}這樣就可以解決此問題，說明這里

就不能再使用overflow:hidden;-CSSoverflow設(shè)置隱蔽超出內(nèi)容溢出。

完整CSShtml最小高度實(shí)例代碼：

這里設(shè)置了table背景顏色為#996600，然后設(shè)置了td的背景圖片為

d0fa3e1aa2161479171128c9/img/css-logo.gif

背景顏色

假如是給table設(shè)置背景顏色可以使用bgcolor="顏色值"即可設(shè)置對象背景顏色。

假如是CSS背景顏色，可使用background-color:顏色值;或background:顏色值設(shè)置對象背景顏色。

CSS背景顏色設(shè)置DIV+CSS演示圖：

以上截圖分別使用background-color和background來設(shè)置對象背景顏色

CSS圖片背景

這里說的是以圖片作為背景圖片-CSS背景圖片具體介紹：

d0fa3e1aa2161479171128c9/jiqiao/j80

CSS可以使用background或background-image直接引用圖片地址來設(shè)置圖片作為對象背景。

background:url(d0fa3e1aa2161479171128c9/img/logo.gif);設(shè)置DIVCSS5的LOGO圖片作為背景

或

background-image:url(d0fa3e1aa2161479171128c9/img/logo.gif);具有相同效果。這樣設(shè)置圖片作為背景有個(gè)缺陷就是圖片會上下左右的重復(fù)，接下來我們只需看以下圖例教程即可把握CSSbackground

圖片背景樣式（固定、滾動）

實(shí)現(xiàn)這個(gè)效果使用CSS單詞是background-attachment當(dāng)然通常狀況下背景默認(rèn)是固定的假如是自己使用CSSbackground簡寫則如上圖。

background-attachment使用解析：

background-attachment:fixed；背景固定

background-attachment:scroll背景圖像是隨對象內(nèi)容滾動

DIVCSS背景居中

CSS背景分為左右居中和上下居中，詳細(xì)左右居中方法見上圖。

背景圖像上下居中，可以使用計(jì)算上下高度然后平分設(shè)置，如上下高度距離為500px，那就設(shè)置圖片居頂部多少PX可以讓圖片實(shí)現(xiàn)上下居中。

CSSbackground（背景）總結(jié)：

使用圖片作為背景在一個(gè)網(wǎng)頁布局中經(jīng)常會遇到，盼望大家能在實(shí)際中把握其學(xué)問。一般設(shè)置對象圖片作為背景屬性實(shí)例background:#666url(圖片地址)

no-repeatcentertop;（解釋首先設(shè)置背景顏色緊跟設(shè)置圖片作背景緊跟圖片是否重復(fù)然后跟圖片在對象位置。前面的背景顏色可以不用設(shè)同時(shí)不是必需，一般使用圖片作為對象背景假如要設(shè)置圖片是否重復(fù)顯示距離位置將設(shè)置圖片位置）

1、設(shè)置圖片作為背景假如圖片設(shè)置圖片在X坐標(biāo)方向重復(fù)，假如再設(shè)置圖片在對象位置的左或右位置時(shí)將無效，可設(shè)置在對象上或下位置開頭顯示。

2、設(shè)置圖片作為背景假如圖片設(shè)置圖片在Y坐標(biāo)方向重復(fù)，假如再設(shè)置圖片在對象位置的上或下位置時(shí)將無效，可設(shè)置圖片在對象左或右位置開頭顯示。

3、假如設(shè)置背景完全重復(fù)顯示，那設(shè)置圖片在對象上下左右位置開頭顯示將無線。

盼望大家好好理解有不懂的地方可以進(jìn)入CSS研教室爭論區(qū)發(fā)表問題，我們將盡力答復(fù)您。

div+css中float熟悉及cssfloat用法

float是什么意思？

float是浮動，翻譯成中文也是浮動意思。進(jìn)入對應(yīng)css手冊中float手冊了解float基本信息。

float的作用

通過css定義float（浮動）讓div樣式層塊，向左或向右（靠）浮動。

float語法：

float:none|left|right

參數(shù)值：

none:對象不浮動

left:對象浮在左邊

right:對象浮在右邊

接下來我們來通過一個(gè)div+css實(shí)例講解float使用技巧。

DIVCSS試驗(yàn)一

Css樣式實(shí)例內(nèi)容，我們讓文字和圖片在一個(gè)固定寬度div層內(nèi)，讓藍(lán)色背景文字內(nèi)容居右，小圖片居左。

d0fa3e1aa2161479171128c9CSS案例演示最終效果圖如下

1、首先我們設(shè)置一個(gè)最外層的寬度為300px，高度為200px的css命名為box的css選擇器代碼如下（學(xué)問點(diǎn)px是什么意思）

.box{width:300px;height:200px;}

2、設(shè)置box內(nèi)的文字內(nèi)容部分css樣式命名為yangshi，并設(shè)置背景為藍(lán)色，寬度為120px，居右浮動

.yangshi{width:120px;float:right;background:#0066FF;}

3、設(shè)置圖片居左浮動div+css樣式

img{float:left;}

4、body內(nèi)的div布局，代碼如下

我是d0fa3e1aa2161479171128c9網(wǎng)站，測試內(nèi)容

說明：這里img標(biāo)簽是鏈接外部圖片，圖片名為demo.gif

最終演示結(jié)果截圖

CSS試驗(yàn)二

接下來我們演示使用div+css讓這里小圖片居右（上個(gè)例子是居左），藍(lán)色背景文字內(nèi)容區(qū)居左（上個(gè)例子是居右）(擴(kuò)展css居中)。這里我們只需要轉(zhuǎn)變yangshi的float:right;為float:left和圖片css樣式img{float:left;}為img{float:right;}

CSS代碼如下：

.box{width:300px;height:200px;}

.yangshi{width:120px;float:right;background:#0066FF;}

img{float:left;}

html中的css代碼和內(nèi)容不變

最終演示結(jié)果截圖如下：

盼望通過以上兩個(gè)css實(shí)例對你熟悉float有關(guān)心。盼望大家多少實(shí)際操作實(shí)踐試試！

cssfont_css文字

DIV+Css開發(fā)中設(shè)置字體常用css屬性單詞英文cssfont-可進(jìn)入CSS手冊查看更具體CSS文字學(xué)問

font、font-family(字體)、font-size（字大?。?、font-style（字樣式）、font-weight（加粗）、text-decoration（下劃線）、font-variant（字母大小寫）、text-transform（英文大小寫）、letter-spacing（間隔）

接下來，我們一一實(shí)例講解通過css文字掌握方法

1、字體大小使用到font-size，實(shí)例如下TOP

首先設(shè)置了font-size的值為36px,則下面結(jié)果顯示字體比較大。

2、文字的顏色使用css中color顏色屬性通過color更樣式值設(shè)置文字樣式的顏色為紅色TOP

TOP3、Css來掌握文字的下劃線方法cssfont，用到text-decoration可以進(jìn)css手冊了解對應(yīng)值，你還可能還盼望了解css鏈接，css超鏈接樣式、css下

劃線

TOP4、文字的間隔-進(jìn)入具體的CSS字間距了解

TOP5、文字的字體-用到css樣式屬性font-family，字體設(shè)置圖例如下

一般font-family字體可以跟常見的“宋體”，“新宋體”，“黑體”，留意的是不能自己設(shè)置不參與的字體樣式，雖然在自己電腦上可能自己設(shè)置字體能表現(xiàn)出了，但是一般電腦用戶都沒有添加字體的，所以在這里字體只能設(shè)置常見，系統(tǒng)自帶的字體，而不能設(shè)置自己安裝的字體。

電腦自帶字體，和常設(shè)