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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

使用position:relative;進行相對定位，通過left和top來設置偏離原來位置左側和上側的距離。任務1網頁中的圖文混排任務實現（1）創建一個HTML5頁面，使用合適的標記對網站內容進行結構定義；（2）根據CSS盒子模型原理對網頁進行布局設置，對圖片進行合適的定位，在編寫CSS代碼之前先將需要用到的圖片保存于網站目錄中的images文件文件夾中，本項目主要采用類選擇器、后代選擇器（也可使用子元素選擇器）編寫出CSS代碼；（3）使用內部樣式表的形式將所寫CSS應用于該網頁。任務描述任務2網頁中的全圖排版網頁中全是圖片的排版布局也不少見，圖片排版常被用在相冊類、產品展示類的網頁中，這類頁面往往有大量的圖片在同一頁中進行展示，使用CSS布局進行全圖排版的核心在于，對浮動定位的控制，并且具有較好的靈活性。對于具有相同尺寸的圖片進行排版，用CSS進行浮動定位是比較好控制的，若對于各個圖片的尺寸規格不相同的圖片進行直接排版，也可以采用流式布局，使圖片錯落排列。網站的圖片新聞，采用了相同大小的圖片，此時只需要設置好一張圖片的樣式，其他圖片用相同的元素進行設置并產生浮動即可，外層元素的整體寬度也很容易通過盒模型計算得知。引入知識點任務2網頁中的全圖排版9.3CSS背景控制任務2網頁中的全圖排版9.3CSS背景控制任務2網頁中的全圖排版9.3CSS背景控制background:#f09url(bg.png)repeat-xfixed20px40px;任務2網頁中的全圖排版任務實現（1）在DreamweaverCC中創建一個空白HTML5頁面，在標題處輸入“校園風光”，保存為index.html。選用<div>標記對頁面進行整理布局，給<div>標記設置一個類layout，選用無序列表ul對圖片進行結構定義，每一個列表項中包含圖片和段落文字，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>畢業照</p></li> <li><imgsrc="images/kongzi.png"/><p>孔子像</p></li> <li><imgsrc="images/menlou.png"/><p>學校正門門樓</p></li> <li><imgsrc="images/qiao.png"/><p>創新橋</p></li> <li><imgsrc="images/shiguang.jpg"/><p>快樂時光</p></li> <li><imgsrc="images/xiaoyuan.jpg"/><p>美麗校園</p></li> <li><imgsrc="images/yundonghui.jpg"/><p>運動會</p></li> </ul></div>任務2網頁中的全圖排版任務實現（2）為顯示更加直觀，本任務選用內部樣式表的方式編寫CSS代碼，直接在<head>中寫入<style>標記來編寫CSS，首先編寫CSSReset可以清除一些標記的特性，如ul、li的邊距等，然后編寫布局元素layout類，主要是給它固定寬度，水平方向居中對齊。注意：根據之前介紹的盒模型原理，此時layout的寬度應該等于一個li占據的寬度，再乘以3即可，layout的width=(圖片寬度270px+左右外邊距20px+li左右邊框2px)*3=876px。（3）給圖片固定大小為，寬度為270px，高度為160px。并給li標記進行向左浮動，即可讓元素共處同一行，當每顯示完3個li元素后，剩余的沒有空間顯示，自動會進入下一行顯示。（4）給<h2>標題內容設置圖標進行視覺美化。因此時的圖片并不是網頁的內容，只是顯示效果的輔助，因此此時給<h2>設置背景圖像為宜，并且不平鋪，加入背景后要讓背景顯示在文字的左側，此時應給<h2>標記添加一些填充留白，以為背景讓出擺放的位置。然后給背景圖片進行適當的定位，使之顯示到合適的位置。最后給元素添加一些邊框、字體等屬性，CSS代碼如下：任務2網頁中的全圖排版任務實現<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; }任務2網頁中的全圖排版最終效果任務描述任務3多行多列式布局PC上的網站元素越來越多，為使各元素美觀大方的呈現出來，通過需要對頁面進行排版。通常采用多行或多列的方式去復雜頁面進行整體布局，從而使內容井然有序。本任務通過實現如圖9-11所示的多行多列排版布局效果，來學習CSS的背景定位、圖標管理及代碼優化等知識。引入知識點任務3多行多列式布局9.4CSS代碼優化任務3多行多列式布局9.4CSS代碼優化1、網頁中的小圖標管理網頁中的小圖標通常是UI設計師為提升網頁美觀度而添加的網頁元素，通常是一種視覺設計上的美化，一般設計得比較小巧精細，完成此部分的網頁效果時，通常使用背景圖片進行背景定位來輔助完成。通常會將這些小圖標收集起來，用圖像處理工具添加在一張圖片上，并有明確的尺寸，需要用到各個小圖標時，再進行精確定位即可定位到指定的圖標了。任務3多行多列式布局9.4CSS代碼優化2、增加CSS代碼重用率主要的代碼的改進方法是使用群組選擇器，將大部分的公共代碼進行集合在群組中，同時也可以使用CSS覆蓋，得到代碼的重用3、容器高度不擴展的問題在制作CSS網頁過程中，在默認情況下，容器的高度默認情況下，會隨著容器的內容進行自動擴展，但在CSS布局中常常會碰到容器不擴展的問題。可以在子容器的最末處添加了一個清除浮動的div容器<divclass="clear"></div>任務3多行多列式布局任務實現（1）創建HTML文件，添加一個固定寬度、頁面居中的主容器<div>標記，作為全頁的框架，其class為content。（2）仔細觀察任務效果圖，最外層的主容器是固定寬度的，再確定容器中整體的布局結構。本任務可采用兩種不同的方式布局，第一種可以采用三列式、固定寬度的布局，再在每一列中分成多行；第二種可以采用右側方塊固定，左側4個方塊固定寬度并自由浮動的布局。（3）在content所在div中，添加5個<div>標記，并分別設置類名稱為service、about、info、resource、news，為優化代碼，將5個方塊的公共代碼抽出來，放入box類中，主要包括邊框、浮動等屬性，完成div布局元素的HTML代碼（4）創建CSS樣式表，為類選擇器設置相關布局屬性進行定位，其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;}任務3多行多列式布局任務實現（5）接下來完成每個盒子公共部分的效果，主要體現在標題欄基本相同，此處采用圖標管理，將圖標放在一張圖片上，設置相同的背景圖片，主要的CSS代碼如下：/*每個盒子公共部分的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等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論