《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊9 使用DIV+CSS布局頁(yè)面_第1頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊9 使用DIV+CSS布局頁(yè)面_第2頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊9 使用DIV+CSS布局頁(yè)面_第3頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊9 使用DIV+CSS布局頁(yè)面_第4頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊9 使用DIV+CSS布局頁(yè)面_第5頁(yè)
已閱讀5頁(yè)，還剩20頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

模塊九使用DIV+CSS布局頁(yè)面《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程》目錄任務(wù)一任務(wù)二任務(wù)三網(wǎng)頁(yè)中的圖文混排網(wǎng)頁(yè)中的全圖排版多行多列式布局本模塊任務(wù)安排：任務(wù)描述任務(wù)1網(wǎng)頁(yè)中的圖文混排在現(xiàn)代網(wǎng)頁(yè)中，純文字的網(wǎng)頁(yè)顯得過于單調(diào)，為吸引用戶瀏覽，通常在文字中會(huì)插入適當(dāng)?shù)南嚓P(guān)圖片，以更好地展現(xiàn)要表達(dá)的意思。在傳統(tǒng)的表格式布局中，往往通過插入一個(gè)表格，再在表格中插入圖片，并對(duì)表格應(yīng)用align屬性來控制圖片居中、居左還是居右來顯示。而本任務(wù)中利用塊狀元素的盒子模型特性，應(yīng)用CSS塊狀元素的更多屬性，實(shí)現(xiàn)更多圖文混排效果。任務(wù)1瀏覽效果如圖9-1所示。引入知識(shí)點(diǎn)任務(wù)1網(wǎng)頁(yè)中的圖文混排9.1CSS盒子模型9.2CSS浮動(dòng)與定位任務(wù)1網(wǎng)頁(yè)中的圖文混排9.1CSS盒模型任務(wù)1網(wǎng)頁(yè)中的圖文混排9.1CSS盒模型1．外邊框margin可以單獨(dú)改變?cè)氐纳?、下、左、右邊距（順時(shí)針）。也可以一次改變所有的屬性。外邊距設(shè)置屬性有margin、margin-top、margin-bottom、margin-right、margin-left。2．邊框元素外邊距內(nèi)就是元素的邊框（border）,每個(gè)邊框有3個(gè)方面：寬度、樣式，以及顏色。常用的邊框?qū)傩杂?項(xiàng):border-top（上邊框）、border-right（有邊框）、border-bottom（下邊框）、border-left（左邊框）、border-width（邊框?qū)挾龋?、border-color（邊框顏色）、border-style（邊框樣式）。其中border-width可以一次性設(shè)置所有的邊框?qū)挾?，border-color同時(shí)設(shè)置四面邊框的顏色時(shí)，可以連續(xù)寫上4種顏色，并用空格分隔。上述連續(xù)設(shè)置的邊框都是按border-top、border-right、border-bottom、border-left的順序（順時(shí)針）。任務(wù)1網(wǎng)頁(yè)中的圖文混排9.1CSS盒模型3．內(nèi)邊距元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間為paddingpadding屬性與外邊距類似，格式也大致相同，可以單獨(dú)設(shè)置四內(nèi)邊距，也可使用padding一次性設(shè)置4．CSS3圓角在CSS3之前，要實(shí)現(xiàn)圓角的效果主要通過圖片輔助實(shí)現(xiàn)，實(shí)現(xiàn)起來不是很方便，使用CSS3的border-radius很方便實(shí)現(xiàn)圓角邊框，但要注意部分舊版本的瀏覽器不直接CSS3的屬性border-radius和前面介紹的border的參數(shù)個(gè)數(shù)和用法基本相同任務(wù)1網(wǎng)頁(yè)中的圖文混排9.2CSS浮動(dòng)與定位float是CSS樣式中的布局屬性，float屬性的left和right值分別能夠讓元素向左和向右浮動(dòng)。比如當(dāng)元素向左浮動(dòng)之后，對(duì)象的右側(cè)將清空出一塊區(qū)域，以便讓剩下的文檔元素能夠貼在右側(cè)。利用這個(gè)特性可以方便地設(shè)計(jì)出需要的塊狀元素排版布局效果。元素浮動(dòng)之后，周圍的元素會(huì)重新排列，為了避免這種情況，使用clear屬性。clear屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素，主要有三個(gè)屬性值：both、left、right，分別表示清除兩邊的浮動(dòng)、清除元素左邊的浮動(dòng)、清除元素右邊的浮動(dòng)。

采用position:absolute;之后，對(duì)象便開始進(jìn)行絕對(duì)定位，絕對(duì)定位主要通過設(shè)置對(duì)象的top、right、bottom和left四個(gè)方向的邊距值來實(shí)現(xiàn)。一旦對(duì)象被設(shè)置絕對(duì)定位，它就完全脫離了文檔流與浮動(dòng)模型，獨(dú)立于其他對(duì)象而存在

使用position:relative;進(jìn)行相對(duì)定位，通過left和top來設(shè)置偏離原來位置左側(cè)和上側(cè)的距離。任務(wù)1網(wǎng)頁(yè)中的圖文混排任務(wù)實(shí)現(xiàn)（1）創(chuàng)建一個(gè)HTML5頁(yè)面，使用合適的標(biāo)記對(duì)網(wǎng)站內(nèi)容進(jìn)行結(jié)構(gòu)定義；（2）根據(jù)CSS盒子模型原理對(duì)網(wǎng)頁(yè)進(jìn)行布局設(shè)置，對(duì)圖片進(jìn)行合適的定位，在編寫CSS代碼之前先將需要用到的圖片保存于網(wǎng)站目錄中的images文件文件夾中，本項(xiàng)目主要采用類選擇器、后代選擇器（也可使用子元素選擇器）編寫出CSS代碼；（3）使用內(nèi)部樣式表的形式將所寫CSS應(yīng)用于該網(wǎng)頁(yè)。任務(wù)描述任務(wù)2網(wǎng)頁(yè)中的全圖排版網(wǎng)頁(yè)中全是圖片的排版布局也不少見，圖片排版常被用在相冊(cè)類、產(chǎn)品展示類的網(wǎng)頁(yè)中，這類頁(yè)面往往有大量的圖片在同一頁(yè)中進(jìn)行展示，使用CSS布局進(jìn)行全圖排版的核心在于，對(duì)浮動(dòng)定位的控制，并且具有較好的靈活性。對(duì)于具有相同尺寸的圖片進(jìn)行排版，用CSS進(jìn)行浮動(dòng)定位是比較好控制的，若對(duì)于各個(gè)圖片的尺寸規(guī)格不相同的圖片進(jìn)行直接排版，也可以采用流式布局，使圖片錯(cuò)落排列。網(wǎng)站的圖片新聞，采用了相同大小的圖片，此時(shí)只需要設(shè)置好一張圖片的樣式，其他圖片用相同的元素進(jìn)行設(shè)置并產(chǎn)生浮動(dòng)即可，外層元素的整體寬度也很容易通過盒模型計(jì)算得知。引入知識(shí)點(diǎn)任務(wù)2網(wǎng)頁(yè)中的全圖排版9.3CSS背景控制任務(wù)2網(wǎng)頁(yè)中的全圖排版9.3CSS背景控制任務(wù)2網(wǎng)頁(yè)中的全圖排版9.3CSS背景控制background:#f09url(bg.png)repeat-xfixed20px40px;任務(wù)2網(wǎng)頁(yè)中的全圖排版任務(wù)實(shí)現(xiàn)（1）在DreamweaverCC中創(chuàng)建一個(gè)空白HTML5頁(yè)面，在標(biāo)題處輸入“校園風(fēng)光”，保存為index.html。選用<div>標(biāo)記對(duì)頁(yè)面進(jìn)行整理布局，給<div>標(biāo)記設(shè)置一個(gè)類layout，選用無序列表ul對(duì)圖片進(jìn)行結(jié)構(gòu)定義，每一個(gè)列表項(xiàng)中包含圖片和段落文字，HTML代碼如下：<divclass="layout"> <h2>美麗校園</h2> <ul> <li><imgsrc="images/hu.png"/><p>湖相依、樓相伴</p></li> <li><imgsrc="images/huguang.jpg"/><p>湖光倒影</p></li> <li><imgsrc="images/biyezhao.jpg"/><p>畢業(yè)照</p></li> <li><imgsrc="images/kongzi.png"/><p>孔子像</p></li> <li><imgsrc="images/menlou.png"/><p>學(xué)校正門門樓</p></li> <li><imgsrc="images/qiao.png"/><p>創(chuàng)新橋</p></li> <li><imgsrc="images/shiguang.jpg"/><p>快樂時(shí)光</p></li> <li><imgsrc="images/xiaoyuan.jpg"/><p>美麗校園</p></li> <li><imgsrc="images/yundonghui.jpg"/><p>運(yùn)動(dòng)會(huì)</p></li> </ul></div>任務(wù)2網(wǎng)頁(yè)中的全圖排版任務(wù)實(shí)現(xiàn)（2）為顯示更加直觀，本任務(wù)選用內(nèi)部樣式表的方式編寫CSS代碼，直接在<head>中寫入<style>標(biāo)記來編寫CSS，首先編寫CSSReset可以清除一些標(biāo)記的特性，如ul、li的邊距等，然后編寫布局元素layout類，主要是給它固定寬度，水平方向居中對(duì)齊。注意：根據(jù)之前介紹的盒模型原理，此時(shí)layout的寬度應(yīng)該等于一個(gè)li占據(jù)的寬度，再乘以3即可，layout的width=(圖片寬度270px+左右外邊距20px+li左右邊框2px)*3=876px。（3）給圖片固定大小為，寬度為270px，高度為160px。并給li標(biāo)記進(jìn)行向左浮動(dòng)，即可讓元素共處同一行，當(dāng)每顯示完3個(gè)li元素后，剩余的沒有空間顯示，自動(dòng)會(huì)進(jìn)入下一行顯示。（4）給<h2>標(biāo)題內(nèi)容設(shè)置圖標(biāo)進(jìn)行視覺美化。因此時(shí)的圖片并不是網(wǎng)頁(yè)的內(nèi)容，只是顯示效果的輔助，因此此時(shí)給<h2>設(shè)置背景圖像為宜，并且不平鋪，加入背景后要讓背景顯示在文字的左側(cè)，此時(shí)應(yīng)給<h2>標(biāo)記添加一些填充留白，以為背景讓出擺放的位置。然后給背景圖片進(jìn)行適當(dāng)?shù)亩ㄎ唬怪@示到合適的位置。最后給元素添加一些邊框、字體等屬性，CSS代碼如下：任務(wù)2網(wǎng)頁(yè)中的全圖排版任務(wù)實(shí)現(xiàn)<style> ul,li{ margin:0;padding:0;list-style:none; } .layout{ width:876px; margin:20pxauto; } .layouth2{ background:url(images/titlebj.jpg)no-repeatleftcenter; line-height:2em; padding-left:66px; font-family:MicrosoftYahei; border-bottom:solid#31C4F91px; letter-spacing:0.8em; } .layoutli{ float:left; border:solid1px#DEF4FC; margin:10px; text-align:center; } .layoutliimg{ width:270px; height:160px; }任務(wù)2網(wǎng)頁(yè)中的全圖排版最終效果任務(wù)描述任務(wù)3多行多列式布局PC上的網(wǎng)站元素越來越多，為使各元素美觀大方的呈現(xiàn)出來，通過需要對(duì)頁(yè)面進(jìn)行排版。通常采用多行或多列的方式去復(fù)雜頁(yè)面進(jìn)行整體布局，從而使內(nèi)容井然有序。本任務(wù)通過實(shí)現(xiàn)如圖9-11所示的多行多列排版布局效果，來學(xué)習(xí)CSS的背景定位、圖標(biāo)管理及代碼優(yōu)化等知識(shí)。引入知識(shí)點(diǎn)任務(wù)3多行多列式布局9.4CSS代碼優(yōu)化任務(wù)3多行多列式布局9.4CSS代碼優(yōu)化1、網(wǎng)頁(yè)中的小圖標(biāo)管理網(wǎng)頁(yè)中的小圖標(biāo)通常是UI設(shè)計(jì)師為提升網(wǎng)頁(yè)美觀度而添加的網(wǎng)頁(yè)元素，通常是一種視覺設(shè)計(jì)上的美化，一般設(shè)計(jì)得比較小巧精細(xì)，完成此部分的網(wǎng)頁(yè)效果時(shí)，通常使用背景圖片進(jìn)行背景定位來輔助完成。通常會(huì)將這些小圖標(biāo)收集起來，用圖像處理工具添加在一張圖片上，并有明確的尺寸，需要用到各個(gè)小圖標(biāo)時(shí)，再進(jìn)行精確定位即可定位到指定的圖標(biāo)了。任務(wù)3多行多列式布局9.4CSS代碼優(yōu)化2、增加CSS代碼重用率主要的代碼的改進(jìn)方法是使用群組選擇器，將大部分的公共代碼進(jìn)行集合在群組中，同時(shí)也可以使用CSS覆蓋，得到代碼的重用3、容器高度不擴(kuò)展的問題在制作CSS網(wǎng)頁(yè)過程中，在默認(rèn)情況下，容器的高度默認(rèn)情況下，會(huì)隨著容器的內(nèi)容進(jìn)行自動(dòng)擴(kuò)展，但在CSS布局中常常會(huì)碰到容器不擴(kuò)展的問題?？梢栽谧尤萜鞯淖钅┨幪砑恿艘粋€(gè)清除浮動(dòng)的div容器<divclass="clear"></div>任務(wù)3多行多列式布局任務(wù)實(shí)現(xiàn)（1）創(chuàng)建HTML文件，添加一個(gè)固定寬度、頁(yè)面居中的主容器<div>標(biāo)記，作為全頁(yè)的框架，其class為content。（2）仔細(xì)觀察任務(wù)效果圖，最外層的主容器是固定寬度的，再確定容器中整體的布局結(jié)構(gòu)。本任務(wù)可采用兩種不同的方式布局，第一種可以采用三列式、固定寬度的布局，再在每一列中分成多行；第二種可以采用右側(cè)方塊固定，左側(cè)4個(gè)方塊固定寬度并自由浮動(dòng)的布局。（3）在content所在div中，添加5個(gè)<div>標(biāo)記，并分別設(shè)置類名稱為service、about、info、resource、news，為優(yōu)化代碼，將5個(gè)方塊的公共代碼抽出來，放入box類中，主要包括邊框、浮動(dòng)等屬性，完成div布局元素的HTML代碼（4）創(chuàng)建CSS樣式表，為類選擇器設(shè)置相關(guān)布局屬性進(jìn)行定位，其CSS樣式代碼如下：.content{width:990px;margin:0auto;padding:10px025px0;background:#fff;}.box{float:left;border:solid1px#e9e9e9;}.service{width:238px;height:233px;}.about{width:488px;height:233px;margin:010px;}.news{width:238px;height:428px;float:right;}.info{width:238px;height:183px;margin:10px010px0;}.resource{width:488px;height:183px;margin:10px;}任務(wù)3多行多列式布局任務(wù)實(shí)現(xiàn)（5）接下來完成每個(gè)盒子公共部分的效果，主要體現(xiàn)在標(biāo)題欄基本相同，此處采用圖標(biāo)管理，將圖標(biāo)放在一張圖片上，設(shè)置相同的背景圖片，主要的CSS代碼如下：/*每個(gè)盒子公共部分的CSS*/.box{float:left;border:solid1px#e9e9e9;}.box.top{height:32px;position:relative;border-bottom:solid1px#9ab1b8;}.box.toph2{width:70px;height:15px;margin:10px000;padding:00035px;border-right:solid1px#7c

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論