CSS布局及應(yīng)用

1、網(wǎng)頁設(shè)計與制作基于計算思維第8章 CSS布局及應(yīng)用網(wǎng)頁設(shè)計與制作基于計算思維主要內(nèi)容n 8.1 網(wǎng)頁整體布局n 8.2 網(wǎng)站中的導(dǎo)航n 8.3 首字下沉效果n 8.4 自定義符號列表n 8.5 圖文混排n 8.6 全圖排版n 8.7 Dreamweaver中的頁面組件網(wǎng)頁設(shè)計與制作基于計算思維8.1 網(wǎng)頁整體布局n 固定寬度布局：固定寬度布局的網(wǎng)頁大小不會隨用戶調(diào)整瀏覽器窗口大小而變化。隨著用戶計算機分辨率的提高，固定寬度布局的網(wǎng)頁的流行寬度也在不斷發(fā)生變化，如950像素、960像素、1000像素、1200像素等。這種布局方式一般通過像素來規(guī)劃各欄的寬度。n 流動布局：也稱為液態(tài)布局，網(wǎng)頁寬度

2、會隨著用戶調(diào)整瀏覽器窗口寬度而發(fā)生變化，這種布局能夠更好地適應(yīng)大屏幕。這種布局方式一般通過百分比來規(guī)劃各欄的寬度。n 彈性布局：列寬是以相對與文本大小的度量單位指定的，可以確保在字號增大時整個布局隨之擴大。網(wǎng)頁設(shè)計與制作基于計算思維8.1.1 固定寬度布局n 一列固定寬度居中通過把具有一定寬度的元素的左、右外邊距設(shè)置為auto，可以使得元素在瀏覽器中水平居中。網(wǎng)頁設(shè)計與制作基于計算思維一列固定寬度居中一列固定寬度居中 網(wǎng)頁設(shè)計與制作基于計算思維n header 的內(nèi)容n container 的內(nèi)容n footer 的內(nèi)容n #header , #container ,#footer margi

3、n:0 auto;網(wǎng)頁設(shè)計與制作基于計算思維n 兩列固定寬度居中使用一個居中的div元素作為容器，將兩列分欄的兩個div元素放置在容器中，從而實現(xiàn)兩列的水平居中顯示。header的內(nèi)容 sidebar的內(nèi)容 maincontent的內(nèi)容footer的內(nèi)容網(wǎng)頁設(shè)計與制作基于計算思維兩列固定寬度居中列固定寬度居中網(wǎng)頁設(shè)計與制作基于計算思維n #container height: 500px;width: 960px;margin:0 auto 10px;n #sidebar background-color: #0C3;height: 500px;width: 300px;float: left;

4、n #maincontent background-color: #FC3;height: 500px;width: 640px;float: right;網(wǎng)頁設(shè)計與制作基于計算思維n 三列固定寬度居中三列固定寬度居中可以通過浮動定位或絕對定位的方式來實現(xiàn)。網(wǎng)頁設(shè)計與制作基于計算思維三三列固定寬度居中列固定寬度居中網(wǎng)頁設(shè)計與制作基于計算思維n header的內(nèi)容n sidebar1的內(nèi)容 sidebar2的內(nèi)容 maincontent的內(nèi)容n n footer的內(nèi)容網(wǎng)頁設(shè)計與制作基于計算思維n #sidebar1 background-color: #0C3;height: 500px;wid

5、th: 200px;float: left;n #sidebar2 background-color: #0C3;height: 500px;width: 200px;float: right;n #maincontent background-color: #FC3;height: 500px;margin: 0 220px;網(wǎng)頁設(shè)計與制作基于計算思維8.1.2 流動布局n 一列流動居中通過百分比來設(shè)置每欄的寬度，而不是具體的像素，可以創(chuàng)建流動布局的網(wǎng)頁。把元素的左、右外邊距設(shè)置為auto，可以使得元素在瀏覽器中水平居中。 header 的內(nèi)容container 的內(nèi)容 footer 的內(nèi)容

6、#header , #container ,#footer width:80%;margin:0 auto;網(wǎng)頁設(shè)計與制作基于計算思維n 兩列流動居中與創(chuàng)建兩列固定寬度居中的網(wǎng)頁方式相同，只是在這種情況下，欄目的寬度是通過百分比來進行設(shè)置的。n n sidebar的內(nèi)容n maincontent的內(nèi)容n 網(wǎng)頁設(shè)計與制作基于計算思維n #sidebar background-color: #0C3;height: 500px;width:20%;float: left;n #maincontent width:80%;background-color: #FC3;height: 500px;fl

7、oat: right;網(wǎng)頁設(shè)計與制作基于計算思維8.2 網(wǎng)站中的導(dǎo)航n 垂直導(dǎo)航利用無序列表從上到下的排列方式形成垂直排列的形式。例8：首頁新聞國內(nèi)網(wǎng)頁設(shè)計與制作基于計算思維#nav width:200px;font-family:Arial;#nav ul list-style-type:none; /* 不顯示項目符號 */#nav li border-bottom:1px solid #ED9F9F; 網(wǎng)頁設(shè)計與制作基于計算思維#nav li a:linkdisplay:block; padding:5px ;text-decoration:none;background-color:#

8、c11136;color:#FFFFFF;#nav li a:hoverbackground-color:#990020; color:#ffff00; 網(wǎng)頁設(shè)計與制作基于計算思維例9：#nav a:link background-color:#36F;border-left: 15px solid #666666;#nav a:hover border-left: 15px solid #F90;網(wǎng)頁設(shè)計與制作基于計算思維n 水平導(dǎo)航利用float: left屬性把列表項浮動起來，從而形成水平導(dǎo)航。首頁新聞國內(nèi)網(wǎng)頁設(shè)計與制作基于計算思維n ul,limargin:0; padding:0;n

9、 #nav ul list-style-type:none; /* 不顯示項目符號 */ 網(wǎng)頁設(shè)計與制作基于計算思維n #nav width:960px;margin:0 auto;n #nav li float:left;網(wǎng)頁設(shè)計與制作基于計算思維n #nav li a:linkndisplay:block; /* 區(qū)塊顯示 */nwidth:119px;npadding-top:5px ;npadding-bottom:5px;nmargin-right:1px;ntext-decoration:none;nbackground-color:#c11136;ncolor:#FFFFFF;n

10、text-align:center;n網(wǎng)頁設(shè)計與制作基于計算思維#nav li a:hover /* 鼠標經(jīng)過時 */background-color:#990020; /* 改變背景色 */color:#ffff00; /* 改變文字顏色 */網(wǎng)頁設(shè)計與制作基于計算思維n 橫向?qū)Ш?變換背景顏色 11.html首頁新聞國內(nèi)網(wǎng)頁設(shè)計與制作基于計算思維n #nav ul list-style-type:none;n #nav li float:left;網(wǎng)頁設(shè)計與制作基于計算思維n #nav li a:link, #nav a:visited color:#000;display:block;t

11、ext-align:center;width:120px;padding-top:5px ;padding-bottom:5px;text-decoration: none;border-bottom: 4px solid #DEDEDE; 網(wǎng)頁設(shè)計與制作基于計算思維n #nav li a:hover n border-bottom: 4px solid #6184A6;color: #336699;n text-decoration: none;網(wǎng)頁設(shè)計與制作基于計算思維n 例12n #nav ul list-style-type:none;n #nav lifloat:left;n #na

12、v a:link,#nav a:visitednwidth:120px; height:45px;nline-height:45px; /* 垂直居中對齊 */ntext-decoration:none;ndisplay:block; color:#FFF;ntext-align:center;nbackground-image: url(images/nav01.gif);n n #nav a:hoverbackground-image:url(images/nav02.gif);網(wǎng)頁設(shè)計與制作基于計算思維固定高度的DIV，垂直居中n .v40height:40px; background:

13、#060 n n .v40height:40px; background: #0F0; line-height:40px;網(wǎng)頁設(shè)計與制作基于計算思維n 下拉菜單；例13：n n 首頁n 電影新上映華語歐美日韓電影排行榜n網(wǎng)頁設(shè)計與制作基于計算思維n #navwidth:960px;margin:0 auto;n ul,limargin:0; padding:0;n ul list-style: none; /*去掉列表符號*/n ul lifloat:left; /*水平排列*/position:relative;網(wǎng)頁設(shè)計與制作基于計算思維n ul li ulposition:absolute

14、;display:none;left:0;n ul li:hover uldisplay:block;網(wǎng)頁設(shè)計與制作基于計算思維n a:link,a:visitedwidth:191px;display:block;padding:10px 0;text-decoration:none;background-color:#c11136;margin-right:1px;color: #FFF;text-align:center;n a:hoverbackground-color:#F00;網(wǎng)頁設(shè)計與制作基于計算思維8.3 首字下沉效果n 在CSS布局中，通過設(shè)置首字的大小并向左浮動，從而使得首

15、字與其他字符區(qū)別；通過右邊距控制首字與其他字符的距離。網(wǎng)頁設(shè)計與制作基于計算思維首字下沉實現(xiàn)方法一#firstfont-size:3em;font-weight:bold; float:left;margin-right:20px;1em=16px 云計算例14網(wǎng)頁設(shè)計與制作基于計算思維首字下沉實現(xiàn)方法二：通過偽類設(shè)置首字樣式n #containerwidth:900px;margin:0 auto;n #container p:first-letternfont-size:3em;nfont-weight:bold;nfloat:left;nmargin-right:20px;n n n 云

16、計算n 網(wǎng)頁設(shè)計與制作基于計算思維8.4 自定義符號列表n 默認的無序列表或有序列表的符號較為單一，通過CSS可以形成豐富的自定義符號的列表內(nèi)容。例16、：網(wǎng)頁設(shè)計與制作基于計算思維n n n 基于2013-07-15n n n #newslist width:400px; 網(wǎng)頁設(shè)計與制作基于計算思維n #newslist a float:left; n #newslist spannfont-size:12px;ncolor:#999;nfloat:right;n 網(wǎng)頁設(shè)計與制作基于計算思維n #newslist a:linkcolor:#000; text-decoration:none;

17、 n #newslist linlist-style-type:none;nheight:28px;nline-height:28px;nbackground-image: url(images/arrow.jpg);nbackground-repeat: no-repeat;npadding-left:30px;nmargin-bottom:2px;n 網(wǎng)頁設(shè)計與制作基于計算思維8.5 圖文混排n 在CSS布局中，圖文混排的實現(xiàn)原理與首字下沉的實現(xiàn)原理相同，通過設(shè)置圖像向左或向右浮動，使得文字環(huán)繞在圖像周圍。網(wǎng)頁設(shè)計與制作基于計算思維n 例18：n 故宮n n 悉尼n 網(wǎng)頁設(shè)計與制作基于計算

18、思維n .buildingnborder-bottom:1px dashed #666;n n .building imgnborder:1px solid #CCC;npadding:10px;n 網(wǎng)頁設(shè)計與制作基于計算思維n .flnfloat:left;nmargin-right:10px;n n .frnfloat:right;nmargin-left:10px;n 網(wǎng)頁設(shè)計與制作基于計算思維n pntext-indent:2em;nfont-size:20px;nline-height:30px;n 網(wǎng)頁設(shè)計與制作基于計算思維8.6 全圖排版n 通過設(shè)置圖像區(qū)塊的內(nèi)邊距、邊框、外邊距

19、，并使得圖像區(qū)塊浮動起來，形成圖像的并排效果。當浮動的圖像整體寬度達到外圍容器區(qū)塊的寬度時，下一圖像區(qū)塊將在另一排中顯示。網(wǎng)頁設(shè)計與制作基于計算思維n 例19：n 網(wǎng)頁設(shè)計與制作基于計算思維n #containernwidth:960px;nmargin:0 auto;nbackground-color:#F3F2F3;n n .pic imgnfloat: left;nheight: 208px;nwidth: 208px;npadding: 10px;nborder: 1px solid #B2B2B2;n margin: 0 5px 5px;nbackground-color:#FFF;

20、n 網(wǎng)頁設(shè)計與制作基于計算思維在一行顯示n 例20：.pic img:hoverborder: 1px solid #0F0;background-color:#0F0;網(wǎng)頁設(shè)計與制作基于計算思維改進 網(wǎng)頁設(shè)計與制作基于計算思維n #containernwidth:960px;nmargin:0 auto;nbackground-color:#F3F2F3;n n #container imgnfloat: left;nheight: 208px;nwidth: 208px;npadding: 10px;nborder: 1px solid #B2B2B2;n margin: 0 5px 5px;nbackground-color:#FFF;n n #containernwidth:960px;nmargin:0 auto;nbackground-color:#F3F2F3;n n .pic imgnfloat: left;nheight: 208px;nwidth: 208px;npadding: 10px;nborder: 1px solid #B2B2B2;n margin: 0 5px 5px;nbackground-