csgo开箱_(wafotl.cn)茄子推荐的开箱子网站

企業(yè)官網(wǎng)建設(shè) 營銷型網(wǎng)站 微信分銷系統(tǒng) 微信小程序 企業(yè)郵局

DIV+CSS

布局之基礎(chǔ)篇

DIV+CSS的布局方法簡單來說就是使用div標(biāo)簽作為容器,使用css技術(shù)排布標(biāo)簽的布局方法。

DIV+CSS布局


專題摘要

在對css基礎(chǔ)知識有了一定的掌握后就可以開始學(xué)習(xí)div+css的布局方法了。DIV+CSS的布局方法簡單來說就是使用div標(biāo)簽作為容器,使用css技術(shù)排布標(biāo)簽的布局方法。常用的css布局方式有浮動、定位等。

初識DIV+CSS布局流程

下面舉例來說明一下網(wǎng)站主頁的排版方式。如圖:左側(cè)為實(shí)景圖,右側(cè)為整體的結(jié)構(gòu)圖。 結(jié)構(gòu)圖中網(wǎng)頁分為三大部分:第一部分為網(wǎng)頁的頭部,用于放置企業(yè)的logo和宣傳的flash動畫;第二部分為中間部分,內(nèi)容是網(wǎng)站需要重點(diǎn)展示的部分;第三部分是網(wǎng)頁的頁腳。

DIV+CSS布局流程7.jpg


了解盒模型

盒模型是div+css布局的基礎(chǔ),要實(shí)現(xiàn)div+css布局必須了解盒模型的原理。頁面上的每個元素都能看做是一個容器。這個容器就是一個盒子。例如,p標(biāo)簽是一個能裝文字的容器,它的高度就是所承載文字的高度。使用div+css布局,div標(biāo)簽就是布局中所用到的容器。大部分人認(rèn)為只有div標(biāo)簽?zāi)茏鳛槿萜鞯陌才挪季?。其?shí)不然,在XHTML頁面中幾乎所用的標(biāo)簽都能被當(dāng)做容器使用。頁面上的每個容器均占用一定的位置。有一定的大小,都會影響其他容器的排布,它們互相作用,從而形成一個頁面的布局。


1、div標(biāo)簽的盒模型舉例
在XHTML中插入一對div標(biāo)簽,運(yùn)行后在不同瀏覽器顯示的效果不同,因?yàn)闉g覽器所設(shè)置的margin和padding的初始值不同。所以在設(shè)置頁面時,建議把頁面的整體邊距和補(bǔ)白設(shè)置初始值為0。
2、基本盒模型
下圖為基本盒模型,在頁面中的所有元素都遵循該模型的設(shè)置方式。

基本盒模型

給一個元素設(shè)置了高度和寬度后,它就在頁面中占有這樣的高度和寬度。css提供的width屬性用于設(shè)置元素的寬度。
3、邊距
邊距用于設(shè)置頁面元素與其他元素的距離。Css的margin屬性就是用于設(shè)置邊距的。 其語法:Margin:length
其中l(wèi)ength的值可以用長度單位定義,也可以用百分比定義,還可以使用關(guān)鍵字auto定義。margin屬性的值可以有四種表示方法。但無論使用哪種方法設(shè)置margin值都能設(shè)置元素四周的邊距。
設(shè)置四個值: Margin:10px 20px 30px 40px;分別是:上邊距、右邊距、下邊距、左邊距。
設(shè)置三個值: Margin:10px 20px 30px;分別是:上邊距、左右邊距、下邊距。
設(shè)置兩個值: Margin:10px 20px;分別是:上下邊距、左右邊距。
設(shè)置一個值: Margin:10px,當(dāng)要設(shè)置的上下左右邊距一致時,就應(yīng)使用設(shè)置一個值的方法。對于border和padding兩個屬性的值也有與上述一樣的縮寫方法。
單邊距值: 若要設(shè)置一個元素的上邊距為10像素,其他邊距都為0像素,可以應(yīng)用以下方法:margin:10px 0 0;每個邊距都有對應(yīng)的css屬性,可以單獨(dú)設(shè)置某個邊距的屬性,設(shè)置單邊的屬性為margin-top,margin-bottom,margin-left,margin-right.對于border和padding也有單獨(dú)設(shè)置某一邊的屬性。
邊距重疊: 對垂直排列的塊級元素應(yīng)用了邊距后,可能會發(fā)生邊距重疊的現(xiàn)象。
4、補(bǔ)白
補(bǔ)白用于增加頁面元素與內(nèi)容之間的空間。Css的padding屬性是用于設(shè)置補(bǔ)白的。
Paddin:length
其中l(wèi)ength的值可以用長度單位定義,也可以使用百分比定義,還可以使用關(guān)鍵字auto定義。
使用長度單位設(shè)定paddng值。
使用長度單位設(shè)定頁面元素的padding值,常使用像素或者em
5、邊框
邊框是頁面元素可視范圍的最外圈。邊框包含的范圍包括頁面元素的補(bǔ)白和內(nèi)容。Css提供了設(shè)置邊框的屬性。
border-width:設(shè)置邊框?qū)挾?br>css提供的border-width屬性用于改變邊框的寬度,其語法:border-width:width
其中width值可以使用長度單位和關(guān)鍵字進(jìn)行設(shè)置。通常使用px或者em作為長度單位。而關(guān)鍵字thin、medium、和thick。在設(shè)置邊框?qū)挾戎?,必須先指定邊框的樣式?br>border-color:設(shè)置邊框顏色
css提供的border-color屬性用于改變邊框的顏色,其語法:border-color:color,其中color值與其他設(shè)置顏色的方法是一樣的。border-color是border-top,border-bottom,border-left,border-right的縮寫。分別是設(shè)置四周的邊框樣式。border-color所縮寫的順序也是順時針,與設(shè)置邊距補(bǔ)白一樣。
border-style:設(shè)置邊框樣式

常用邊框樣式


屬性值

樣式

none

無邊框

hidden

隱藏邊框

dotted

點(diǎn)線

dashed

虛線

solid

實(shí)線邊框

double

雙線邊框,兩條單線與其間隔的和等于指定的border-width值

groove

根據(jù)border-color的值畫3D凹槽

ridge

根據(jù)border-color的值畫菱形邊框

inset

根據(jù)border-color的值畫3D凸邊

outset

根據(jù)border-color的值畫3D凹邊

頁面元素布局

在了解基本盒模型后,就要開始進(jìn)入頁面元素布局的學(xué)習(xí),細(xì)心理解每個示例能夠深入了解頁面元素布局的基本原則。頁面元素布局的核心是定位和浮動的基本原理以及塊級元素與行內(nèi)元素的區(qū)別。


1、塊級元素與行內(nèi)元素
所有的XHTML頁面元素只有兩種,一是塊級元素,二是行內(nèi)元素。

常用塊級元素和行內(nèi)元素

塊級元素

行內(nèi)元素

blockquote

a

dir

b

div

span

fieldset

cite

form

em

H1-h6

i

hr

img

dl

input

ol

label

ul

select

p

br

pre

strong

?

textarea

當(dāng)以上這些元素單獨(dú)出現(xiàn)在XHTML頁面時,它們會按照自己本身的語義表現(xiàn)樣式。

塊級元素和行內(nèi)元素的區(qū)別

?

排列方式

可控屬性

寬度

塊級元素

垂直排列

高度、行高以及上下邊距都可控制。

其寬度默認(rèn)情況下與其父級元素寬度一致??梢栽O(shè)置width屬性改變其寬度。

行內(nèi)元素

水平排列

高度及上下邊距都不可控制。

寬度就是其包含的文字或者圖片的寬度,設(shè)置width屬性不生效。

塊級元素一般用作其他頁面元素的容器,塊元素一般都從新行開始,它可以容納行內(nèi)元素和塊元素。Form標(biāo)簽這一塊級元素比較特殊,它只能用來容納其他塊級元素。行內(nèi)元素只能容納文本或者其他行內(nèi)元素。使用css的display屬性能使塊級元素和行內(nèi)元素互相轉(zhuǎn)換。Display屬性中的block和inline,分別代表塊級元素和行內(nèi)元素。
2、css布局方式-常規(guī)流
css有三種基本的布局方式,分別是常規(guī)流、浮動和定位。常規(guī)流(normal flow)是指頁面元素按照所在XHTML文檔的位置排列的布局方式。在沒有添加其他方面布局方式的情況下,頁面遵循常規(guī)流的布局方式。
css布局方式-浮動

使用浮動布局是目前網(wǎng)頁制作中最為常用的方式。應(yīng)用了浮動的元素全部都會成為塊元素,并且脫離原來的常規(guī)流模式。應(yīng)用了浮動的元素可以向頁面的左邊或者右邊移動。直到其邊緣接觸到其父元素的邊框或者另外一個浮動元素的邊框。

css提供的float屬性用于設(shè)置元素的浮動,它包含三個值,分別是left(左)、right(右)、none(無)。

使用浮動布局是比較復(fù)雜的,影響浮動的布局因素很多。例如,一個父元素中有三個div標(biāo)簽,若對其中一個div標(biāo)簽應(yīng)用浮動,在不同瀏覽器中的結(jié)果表現(xiàn)不同,若對兩個或者三個div標(biāo)簽應(yīng)用浮動,產(chǎn)生結(jié)果也不相同,若對父元素應(yīng)用浮動,子元素的浮動效果也會不同。


1、兩個元素的浮動應(yīng)用
在頁面布局中,很多時候會使用來年兩個元素的浮動應(yīng)用。例如,頁面為兩欄的結(jié)構(gòu),圖文混排都應(yīng)用了兩個元素的浮動。

< !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" >?

< head >?

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

< title >兩個元素的浮動應(yīng)用< / title >?

< style > *{ margin:0; padding:0; font-size:14px; }?

div.father{ width:300px; height:300px; /*設(shè)置父元素的高度和寬度都為300像素*/ border:1px solid black; margin:10px;}/*設(shè)置父元素的邊框?yàn)?像素黑色實(shí)線,邊距為四周10像素*/?

div.one{ width:100px; height:100px;/*設(shè)置第一個div標(biāo)簽的高度和寬度都為100像素*/ background-color:#999;/*設(shè)置第一個div標(biāo)簽的背景色為灰色*/ float:left; margin:10px;}/*設(shè)置第一個div標(biāo)簽為左浮動,四周邊距為10像素*/?

div.two{ width:100px; height:100px;/*設(shè)置第二個div標(biāo)簽的高度和寬度為100像素*/ background-color:#999; /*設(shè)置第二個div標(biāo)簽的背景色為淺灰色*/ float:left; margin:10px;}/*設(shè)置第二個div標(biāo)簽為左浮動,四周邊距為10像素*/?

< / style >?

< / head >?

< body >?

< div class="father" >?

< div class="one" >第一個div標(biāo)簽< / div >?

< div class="two" >第二個div標(biāo)簽< / div >?

< / div >?

< / body >?

< / html >

2、多個元素的浮動應(yīng)用
在頁面布局中,多個元素的浮動常用于相冊、列表排版等。

< !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" >?

< head >?

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

< title >三個元素的浮動應(yīng)用< / title >?

< style >?

?*{ margin:0; padding:0; font-size:14px;}?

div.father{ width:300px; height:300px;/*設(shè)置父元素的高度和寬度都為300像素*/ border:1px solid #000; margin:10px;}/*設(shè)置父元素的邊框?yàn)?像素黑色實(shí)線,四周邊距10像素*/?

div.one,div.two,div.three{ background-color:#ccc;/*設(shè)置三個div標(biāo)簽的背景色為淺灰色*/ float:left;/*設(shè)置三個div標(biāo)簽為左浮動*/ width:100px; height:100px;/*設(shè)置三個div標(biāo)簽高度和寬度都為100像素*/ margin:10px;/*設(shè)置三個div標(biāo)簽四周邊距10像素*/ display:inline;}/*設(shè)置三個div標(biāo)簽的顯示屬性為inline*/?

< / style >?

< / head >?

< body >?

< div class="father" >?

< div class="one" >第一個div標(biāo)簽< /div >?

< div class="two" >第二個div標(biāo)簽< /div >?

< div class="three" >第三個div標(biāo)簽< /div >?

< /div >?

< /body >?

< /html >

3、清除浮動
使用浮動后,常產(chǎn)生很多意外的結(jié)果,因?yàn)楦拥脑貢撾x原來的常規(guī)流。浮動元素可能會覆蓋一些非浮動的元素,這是需要使用css的clear屬性來清除浮動。Clear屬性有四個值,分別是none、left、right、both。
None:允許兩邊都可以有浮動對象
Both:不允許有浮動對象
Left:不允許左邊有浮動對象
Right:不允許右邊有浮動對象
css布局方式-相對定位

除了使用浮動布局外,常用的布局方式還有定位。Css提供了position屬性用于定位。使用position定位可以定義元素相對其父元素或者其他元素的精確位置。position屬性共有四個關(guān)鍵字值。分別是static、absolute、relative和fixed。其中static為默認(rèn)值,表示塊保持在原來的位置上。absolute代表絕對定位,relative代表相對定位,這兩種定位方式是最常用的。


1、單個元素的相對定位
使用相對定位,就是子元素相對于自身偏移的位置。要確定子元素相對于自身偏移了多少,就要使用top、bottom、left、right屬性來確定。這四個屬性能使用長度單位或者關(guān)鍵字auto設(shè)置。例如,設(shè)定子元素的position屬性為relative,然后設(shè)置top為10像素,那么子元素就會相對于自身的頂部邊界下移10像素。

< !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" >?

< head>?

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

< title>單個元素的相對定位< /title >?

< style >?

*{ margin:0; padding:0; font-size:14px;}?

div.father{ width:300px; height:300px;/*設(shè)置父元素的高度和寬度都是300像素*/ border:1px solid #000;/*設(shè)置父元素的邊框1像素黑色實(shí)線*/ margin:10px;}/*設(shè)置父元素四周邊距為10像素*/?

div.one{ background-color:#666;/*設(shè)置第一個div標(biāo)簽的背景色為淺灰色*/ width:100px; height:100px;/*設(shè)置第一個div標(biāo)簽的高度和寬度都為100像素*/ position:relative;/*設(shè)置第一個div標(biāo)簽為相對定位*/ top:10px;}/*設(shè)置第一個div標(biāo)簽從上往下偏移10像素*/?

< /style >?

< /head >?

< body >?

< div class="father" >?

< div class="one" >< /div >?

< /div >?

< /body >?

< /html >

2、兩個元素的相對定位
當(dāng)子元素增加到兩個的時候,使用相對定位的情況就變得較為復(fù)雜。

< !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" >?

< head >?

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

< title >兩個元素的相對定位< /title >?

< style >?

*{ margin:0; padding:0; font-size:14px;}?

div.father{ width:300px; height:300px;/*設(shè)置父元素的高度和寬度為300像素*/ border:1px solid #000;/*設(shè)置父元素的邊框?yàn)?像素黑色實(shí)線*/ margin:10px;}/*社會組父元素四周邊距為10像素*/?

div.one{ width:100px; height:100px;/*設(shè)置第一個div標(biāo)簽的高度和寬度為100像素*/ position:relative;/*設(shè)置第一個div標(biāo)簽為相對定位*/ top:10px;}/*設(shè)置第一個div標(biāo)簽從上往下偏移10像素*/?

div.two{ background-color:#999;/*設(shè)置第二個標(biāo)簽背景色為淺灰色*/ width:100px; height:100px}/*設(shè)置第二個div標(biāo)簽高度和寬度都是100像素*/?

< /style >?

< / head >?

< body >?

< div class="father" >?

< div class="one" >第一個div標(biāo)簽< /div >?

< div class="two" >第二個div標(biāo)簽< /div >?

< /div >?

< /body >?

< / html >

css布局方式-絕對定位

使用絕對定位的子元素,其移動是相對于已經(jīng)定位的父級元素。若其父元素并未定位,那么使用絕對定位的子元素就會相對最初的包含塊來定位。通常這個最初的包含快是html標(biāo)簽。


1、單個元素的絕對定位
使用絕對定位同樣有top、bottom、left、right四個用于移動的屬性。

< !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" >?

< head >?

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

< title >單個元素的絕對定位< / title >?

< style >?

*{ margin:0; padding:0; font-size:14px;}?

div.father{ width:300px; height:300px;/*設(shè)置父元素的高度和寬度都是300像素*/ border:1px solid #000;/*設(shè)置父元素的邊框?yàn)?像素黑色實(shí)線*/ margin:10px;}/*設(shè)置父元素四周邊距為10像素*/?

div.one{ background-color:#333; /*設(shè)置第一個div標(biāo)簽的背景色為灰色*/ width:100px; height:300px;/*設(shè)置第一個div標(biāo)簽的高度和寬度都是100像素*/ position:absolute;/*設(shè)置第一個div標(biāo)簽為絕對定位*/ top:10px;}/*設(shè)置第一個div標(biāo)簽從上往下偏移5像素*/?

< / style >?

< /head >?

< body >?

< div class="father" >?

< div class="one" >< /div >?

< /div >?

< /body >?

< /html >

2、兩個元素的絕對定位
當(dāng)子元素增加到兩個的時候,使用絕對定位的情況就變得較為復(fù)雜。使用絕對定位的元素會脫離原來的常規(guī)流,位置停留在父元素的左上角。

< !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" >?

< head >?

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

< title >兩個元素的絕對定位< / title >?

< style >?

*{ margin:0; padding:0; font-size:14px;}?

div .father { width:300px; height:340px; /*設(shè)置父級元素的高度和寬度都為300像素*/ border:1px solid #000;/*設(shè)置父級元素的邊框?yàn)?像素黑色實(shí)線*/ margin:10px;/*設(shè)置父元素四周邊距為10像素*/ position:relative/*設(shè)置父元素為相對定位*/ }?

div.one{ background-color:#ccc;/*設(shè)置第一個div標(biāo)簽的背景色為淺灰色*/ width:100px; height:100px;/*設(shè)置第一個div標(biāo)簽的高度和寬度為100像素*/ position:absolute;/*設(shè)置第一個div標(biāo)簽為絕對定位*/ }?

div.two{ background-color:#999999; /*設(shè)置第二個div標(biāo)簽的背景色為淺灰色*/ width:100px; height:100px;/*設(shè)置第二個div標(biāo)簽的高度和寬度都是100像素*/ position:absolute;}/*設(shè)置第二個div標(biāo)簽為絕對定位*/?

< / style >

< body >?

< div class="father" >< /div >?

< div class="one" >< /div >?

< div class="two" >< /div >?

< /body >?

< /html >

相關(guān)專題
css控制樣式
了解css技術(shù)基礎(chǔ)之 用css控制樣式

CSS有助于實(shí)現(xiàn)負(fù)責(zé)任的Web設(shè)計,CSS能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網(wǎng)頁對象和模型樣式編輯的能力。

css設(shè)置背景
了解css技術(shù)基礎(chǔ)之css設(shè)置背景

CSS提供了控制背景顏色和背景圖片的多個屬性,用于產(chǎn)生表現(xiàn)豐富的網(wǎng)頁背景。這樣能使單調(diào)的頁面變得豐富多彩。

css設(shè)置圖片的樣式
了解css技術(shù)基礎(chǔ)之css設(shè)置圖片的樣式

圖片在網(wǎng)頁設(shè)計中占據(jù)相當(dāng)重要的位置。使用css樣式可以設(shè)置圖片的大小和邊框等屬性。恰當(dāng)?shù)氖褂胏ss其他屬性和配合頁面排布也能創(chuàng)造出很精美的圖片效果。


新聞中心

聯(lián)系我們
CONTACT
01.png
電話

024-83959235

02.png
傳真

024-83953630

03.png
微信公眾號

05.png
地址

沈陽市和平區(qū)青年大街322號 昌鑫大廈F座14層