基于ASPNET的Web應(yīng)用開發(fā)單元2網(wǎng)頁設(shè)計與制作基礎(chǔ)(html+css+js)(4)課件

1、WEB 應(yīng) 用 開 發(fā)單元2：網(wǎng)站的規(guī)劃與設(shè)計任務(wù)2：網(wǎng)頁設(shè)計與制作基礎(chǔ)（html+css+js）(3)主要內(nèi)容標(biāo)準(zhǔn)流布局與浮動布局1盒子的定位方式2網(wǎng)頁布局方法3學(xué)習(xí)目標(biāo)知識目標(biāo)：CSS樣式的核心原理：浮動與定位能力目標(biāo)：能夠使用CSS樣式布局網(wǎng)頁技術(shù)應(yīng)用的背景在HTML文檔里使用CSS樣式可以美化頁面的外觀，改變頁面的布局。使用外部樣式可以解決網(wǎng)站內(nèi)容與表現(xiàn)分離的問題，另外外部樣式表可以極大提高工作效率，能輕松的為網(wǎng)頁進行改版或維護。一、標(biāo)準(zhǔn)流布局與浮動布局1. CSS布局方式：標(biāo)準(zhǔn)流CSS有三種基本的布局方式，分別是標(biāo)準(zhǔn)流、浮動和定位。所謂標(biāo)準(zhǔn)流是指頁面元素按照所在XHTML文檔的位置順

2、序排列的布局方式。在沒有添加其他布局方式的情況下，頁面遵循標(biāo)準(zhǔn)流的布局方式。（1）標(biāo)準(zhǔn)流布局方式下行內(nèi)元素的間距行內(nèi)元素之間的左右距離 左元素的右邊距+右元素的左邊距一、標(biāo)準(zhǔn)流布局與浮動布局（續(xù)）一、標(biāo)準(zhǔn)流布局與浮動布局（續(xù)）（2）標(biāo)準(zhǔn)流布局方式下塊元素的上下間距兩塊之間的上下間距 max 上一個塊元素的下邊距，下一個塊元素的上邊距 一、標(biāo)準(zhǔn)流布局與浮動布局（續(xù)）（3）標(biāo)準(zhǔn)流布局方式下嵌套塊元素的邊界子塊元素是以父元素為基準(zhǔn)定位的。一、標(biāo)準(zhǔn)流布局與浮動布局（續(xù)）2. CSS布局方式：浮動使用浮動布局是目前網(wǎng)頁制作中最為常用的方式。應(yīng)用了浮動的元素全部都會成為塊級元素，并且脫離原來的常規(guī)流模式。

3、應(yīng)用了浮動的元素可以向頁面的左邊或者右邊移動，直到其邊緣接觸到其父元素的邊框或者另外一個浮動元素的邊框。一、標(biāo)準(zhǔn)流布局與浮動布局（續(xù)）盒子的浮動屬性盒子擁有一個float屬性，可以設(shè)置為向左或向右浮動要點：float屬性讓盒子浮動起來，自動貼靠于其父元素的左或右邊緣。設(shè)置了float屬性的盒子自身寬度由其內(nèi)部保持標(biāo)準(zhǔn)流布局的元素寬度決定。一、標(biāo)準(zhǔn)流布局與浮動布局（續(xù)）盒子的浮動屬性（續(xù)）Box-2的左邊框標(biāo)準(zhǔn)流效果將Box-1左浮動后的效果一、標(biāo)準(zhǔn)流布局與浮動布局（續(xù)）盒子的浮動屬性（續(xù)）標(biāo)準(zhǔn)流效果將Box-1、 Box-2左浮動后的效果Box-1和Box-2之間的空白是由二者的margin構(gòu)

4、成的一、標(biāo)準(zhǔn)流布局與浮動布局（續(xù)）盒子的浮動屬性（續(xù)）標(biāo)準(zhǔn)流效果將Box-1、 Box-2 、 Box-3左浮動后的效果一、標(biāo)準(zhǔn)流布局與浮動布局（續(xù)）盒子的浮動屬性（續(xù)）清除段落左浮動后的效果將Box-1、 Box-2 、 Box-3左浮動后的效果二、盒子的定位方式1. 元素的定位問題主要影響網(wǎng)頁布局的是塊元素。塊元素有兩種主要的顯示方式：標(biāo)準(zhǔn)流式布局與浮動布局標(biāo)準(zhǔn)流式布局比較簡單：塊元素分行顯示行內(nèi)元素在同一行內(nèi)顯示，一行顯示不下則折行對于浮動布局，情況就復(fù)雜得多，盒子模型中定義了一個position屬性用于指定元素的布局方式。二、盒子的定位方式（續(xù)）1. 元素的定位問題主要影響網(wǎng)頁布局的是

5、塊元素。塊元素有兩種主要的顯示方式：標(biāo)準(zhǔn)流式布局與浮動布局標(biāo)準(zhǔn)流式布局比較簡單：塊元素分行顯示行內(nèi)元素在同一行內(nèi)顯示，一行顯示不下則折行對于浮動布局，情況就復(fù)雜得多，盒子模型中定義了一個position屬性用于指定元素的布局方式。二、盒子的定位方式（續(xù)）（1）靜態(tài)定位方式position=static這是默認(rèn)的屬性值，表明盒子中的元素按照標(biāo)準(zhǔn)流方式進行定位，“該在哪就在哪”。二、盒子的定位方式（續(xù)）（2）相對定位方式position=relative要點：使用相對定位方式的盒子，會相對于它原本的位置有一個偏移，到達一個新位置。使用相對定位方式的盒子仍在標(biāo)準(zhǔn)流中，因此會影響其后繼元素的定位關(guān)鍵：

6、弄清楚以什么為基準(zhǔn)定位二、盒子的定位方式（續(xù)）（2）相對定位方式（續(xù)）#block1 position:relative; bottom:30px; right:30px; #block2position:relative;top:30px;left:30px;二、盒子的定位方式（續(xù)）（3）絕對定位方式position=absolute要點：使用絕對定位的盒子以它“最近”的一個已經(jīng)定位的父元素為基準(zhǔn)進行定位，如果沒有這樣的元素，則以瀏覽器窗口為基準(zhǔn)。絕對定位的盒子從標(biāo)準(zhǔn)流中脫離，它們對其后元素的定位沒有影響。注意：“已經(jīng)定位”指position屬性被設(shè)置為除static以外的所有值之一。二、盒

7、子的定位方式（續(xù)）（3）絕對定位方式（續(xù)）#block2 position:absolute; top:0px; right:0px; 二、盒子的定位方式（續(xù)）#father position:relative;#block2 position:absolute; top:0px; right:0px; （3）絕對定位方式（續(xù)）二、盒子的定位方式（續(xù)）(4) 固定定位position=fixed要點：采用固定定位方式的盒子以瀏覽器窗口為基準(zhǔn)定位；采用固定定位方式的盒子脫離了原來的標(biāo)準(zhǔn)流，它的兄弟盒子定位時將其視為“不存在”。采用固定定位的盒子不理會父盒子的定位方式。三、網(wǎng)頁布局網(wǎng)頁布局要點：在設(shè)計前要分析并確定網(wǎng)頁的邏輯結(jié)構(gòu)，用div進行界定然后通過CSS規(guī)則定義出基本塊（block）的顯示效果使用定義好的基本塊布局網(wǎng)頁，在具體