網(wǎng)頁設計與制作項目式PPT模塊六_第1頁
網(wǎng)頁設計與制作項目式PPT模塊六_第2頁
網(wǎng)頁設計與制作項目式PPT模塊六_第3頁
網(wǎng)頁設計與制作項目式PPT模塊六_第4頁
網(wǎng)頁設計與制作項目式PPT模塊六_第5頁
已閱讀5頁，還剩60頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

模塊六

Div＋CSS

學習目標1、掌握CSS樣式的規(guī)則2、掌握使用樣式的方法3、掌握CSS的語法結(jié)構(gòu)4、掌握<div>和<span>標簽5、掌握盒子的定位原則6、掌握常見版型設計任務1CSS樣式入門

任務導入使用CSS控制頁面的整體屬性，包括背景圖像、頁邊距、文字行距、頁面標題等，效果如圖知識指導一.CSS樣式的優(yōu)點1.以前所未有的能力控制頁面布局2.制作體積更小3.同時更新許多網(wǎng)頁4.瀏覽器的顯示界面更加友好二.CSS樣式的規(guī)則語法：由選擇器與聲明組成選擇器是標識已設置格式元素的術(shù)語聲明則用于定義樣式元素，由兩部分組成：屬性和值p{

color:red;

font-size:18px;}三.使用樣式的方法1.行內(nèi)樣式：寫在HTML的行內(nèi)

<pstyle=“font-size：14pt；color：blue”>藍色14號文字</p>2.內(nèi)部樣式：放到<head>文檔中

<styletype=“text/css”>……</style>3.鏈接外部樣式：編輯好的CSS文檔保存成“.CSS”文件，在<head>中定義，一般是將文件鏈接進網(wǎng)頁文件

<head><linkrel=stylesheet

href=“style.css”>……</head>4.導入外部樣式表：與鏈接外部樣式表的功能，只是語法和操作方式上略有區(qū)別。使用@import，這樣作為文件的一部分，類似內(nèi)部樣式的效果四.CSS的語法結(jié)構(gòu)1.標簽選擇器

是直接將HTML標簽作為選擇器，用來定義這些標簽采用的CSS樣式。p{color:red;font-size:18px;}

2.類選擇器可以將同一類型HTML標簽定義出不同樣式。.red{color:red;font-size:18px;}.green{color:green;

font-size:16px;}<pclass="red">類選擇器1</p><pclass="green">

類選擇器2</p>3.ID選擇器和類選擇器的使用方法基本相同，不同之處在于ID選擇器只能在頁面中使用一次，因此其針對性更強。#red{font-size:18px;color:red;}#green{font-size:16px;color:green;}<pid="red">ID選擇器1</p><pid="green">ID選擇器2</p>4.復合選擇器是由兩個或以上的基本選擇器通過不同的連接方式構(gòu)成的（1）交集選擇器由兩個選擇器直接連接構(gòu)成的，其結(jié)合的結(jié)果是選中二者各自元素范圍的交集。p{color:red;}p.Special{color:blue;}.special{color:green;

}<p>普通段落文本（紅色）</p><pclass="special">指定了.special類別的段落文本（藍色）</p><h4class="special">指定了.special類別的標題文本（綠色）</h4>（2）并集選擇器是同時選中各個基本選擇器所選擇的范圍。h1,h2,h3,h4,h5{color:blue;

}<h1>示例文本h1</h1><h2>示例文本h2</h2><h3>示例文本h3</h3><h4>示例文本h4</h4><h5>示例文本h5</h5>（3）后代選擇器通過嵌套的方式對特殊位置的標簽進行聲明，當標簽發(fā)生嵌套時，內(nèi)層的標簽就成為外層標簽的后代pspan{color:red;text-decoration:underline;}span{color:blue;}<p>嵌套<span>使用css標簽（紅色下劃線）</span>的方法</p><span>嵌套之外的標簽不生效（藍色）</span>五.Div＋CSS1．繼承性的運用繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。body{ color:purple;}<p>CSS的<strong>層疊和繼承</strong>深入探討</p>

2.繼承的局限性

在CSS的規(guī)范中，每種CSS屬性都有一個默認的屬性值，有些屬性的默認值是“繼承”（inherit），這些屬性就會自動繼承父元素的屬性值。而另外的屬性的默認屬性值不是“繼承”（inherit），比如邊框?qū)挾鹊哪J屬性值為0，因此邊框?qū)挾葘傩跃筒痪哂凶詣拥睦^承性。

多數(shù)邊框類屬性，比如Padding（填充），Margin（邊界），背景和邊框等都是不能繼承的。3.繼承中的問題

子元素繼承最高級元素所擁有的屬性，如：body設置文本顏色為藍色，子元素諸如p，td，ul，ol，li等都應該以藍色顯示文本。

實際上，有些瀏覽器并沒有使表格內(nèi)的文本繼承。

為了解決這一問題通常CSS寫為：body,table,th,td{color:blue;}4.多重樣式混合應用中的沖突

有了繼承性，那么在CSS的應用上可能會存在多個樣式同時應用到一個對象上的情形。body{ color:purple;}p{color:green;}.red{color:red;}.purple{color:purple;}#p3p4{color:blue;}<p>示例文本p1（綠色）</p><pclass="red">示例文本p2（紅色）</p><!--類別選擇器的優(yōu)先級高于標簽選擇器--><pid＝"p3"class="red">示例文本p3（紅色）</p><!--ID選擇器的優(yōu)先級高于類別選擇器。--><pid="p4"style="color:orange;">示例文本p4（橙色）</p><!--行內(nèi)樣式的優(yōu)先級高于ID選擇器--><pclass="redpurple">示例文本p5（紫色）</p><!--顯示聲明在后面的CSS-->任務2在DW中使用CSS樣式任務導入使用CSS控制版面布局。以介紹川菜為題材，充分利用CSS圖文混排的方法，實現(xiàn)如圖6-13所示的頁面效果知識指導一．CSS樣式面板

執(zhí)行“窗口”→“CSS樣式”命令；

按快捷鍵【Shift】+【F11】，可打開“CSS樣式”面板。二.創(chuàng)建新的CSS樣式（操作步驟）①單擊“CSS樣式”面板右下角的“新建CSS樣式”按鈕，將打開“新建CSS規(guī)則”對話框；②在“選擇器類型”選項中，選擇所創(chuàng)建樣式的類型（CSS的語法結(jié)構(gòu)中的四種）；③在“選擇器名稱”下拉列表框中，輸入或選擇樣式名稱；④在“規(guī)則定義”選項中，選擇樣式定義的位置；新建樣式表文件僅限該文檔⑤單擊“確定”按鈕后，將打開“CSS規(guī)則定義”對話框，進行設置。三.管理CSS樣式1．應用CSS樣式“ID”“標簽”“復合內(nèi)容”類自動應用1.在網(wǎng)頁的編輯窗口中，選擇要應用樣式的元素；2.在“屬性”面板中，從“類”下拉列表中選擇類樣式。2．編輯或刪除樣式編輯CSS樣式在CSS面板中，選擇需要編輯的樣式后，在面板的下部列出了該樣式的屬性，根據(jù)需要修改屬性值或“添加屬性”。單擊位于CSS面板下部的編輯樣式按鈕，系統(tǒng)將打開CSS樣式定義對話框，對樣式進行修改。刪除樣式可在“CSS樣式”面板中選擇樣式后，單擊“刪除CSS樣式”按鈕。3．鏈接或?qū)胪獠繕邮奖砦募賳螕簟癈SS樣式”面板右下方的“附加樣式表”按鈕，打開“鏈接外部樣式表”對話框。②在“文件／URL”下拉列表框中輸入該外部CSS樣式表的地址和文件名，或單擊“瀏覽”按鈕在磁盤上選擇樣式表文件。③在“添加為”選區(qū)中選擇是要鏈接外部樣式表還是要導入外部樣式表。導入：使用@import導入一個外部樣式表文件鏈接：用<link>標簽鏈接到一個樣式表文件④設置完成后，單擊“確定”按鈕。注意：若樣式表文件不在當前站點的根目錄，則系統(tǒng)會提示用戶將該樣式表文件拷貝到當前站點的根目錄中，否則在發(fā)布站點時會不能被訪問。四．豐富的CSS樣式1．類型設置2．背景設置3．區(qū)塊設置4．方框設置5．邊框設置

6．列表設置

7．定位設置8．擴展功能任務3CSS布局網(wǎng)頁

任務導入使用Div＋CSS制作如圖6-44的頁面。知識指導一．盒子模型

頁面中的所有元素都可以看作是一個盒子，一個頁面就是由很多的盒子組成，這些盒子之間能夠相互影響。

在CSS中，一個獨立的盒子模型就是由content（內(nèi)容）、border（邊框）、padding（填充）和margin（邊界）4部分組成。

1．盒子模型的背景是指盒子模型邊框以內(nèi)區(qū)域的背景，邊框以外的邊界區(qū)域是透明的，它所呈現(xiàn)的是父元素的背景。2．盒子模型的寬和高CSS屬性中的width（寬度）和height（高度）不是指整個盒子的寬度和高度，而是指盒子中內(nèi)容區(qū)域的寬度和高度。一個盒子實際所占有的寬度（或高度）是由“內(nèi)容＋內(nèi)邊距＋邊框＋外邊界距”組成。二．塊元素和內(nèi)嵌元素1．塊元素CSS代碼：#block1{ background-color:#666; }#block2{ background-color:#CCC;

height:40px; width:100px;}HTML代碼：<divid="block1">塊元素1</div><divid="block2">塊元素2</div>對于塊元素的特征，可以歸納如下：塊元素默認總是在新行左側(cè)開始，即換行排列并左對齊。塊元素的默認寬度是與父元素的內(nèi)容區(qū)域等寬，高度是自適應，如上例中block1。塊元素的寬、高、margin和padding等均可控，即可以任意設置，如上例中block2。常見的塊元素很多，例如：div、p、table、tr、td、form、ul、ol、li和h1等元素。2．內(nèi)嵌元素

內(nèi)嵌元素的默認排列方式是同行排列，在寬度超出包含它的容器時自動換行。CSS代碼：.inline1{ background-color:#666; height:40px; width:100px;}HTML代碼：測試<spanclass="inline1">內(nèi)嵌元素</span>特征：內(nèi)嵌元素可與其他元素在同一行上；內(nèi)嵌元素的寬度、高度不可控制。3．塊元素和內(nèi)嵌元素的混合排列

當塊元素和內(nèi)嵌元素混合排列時，必須要滿足塊元素的換行特性，因此當2種元素混排時，將換行排列HTML代碼：測試<span>內(nèi)嵌元素</span><div>塊元素</div>

4．塊元素與內(nèi)嵌元素的相互轉(zhuǎn)化通過定義CSS的display屬性值可以相互轉(zhuǎn)化，當display屬性值為block時，表示設置為塊元素；為inline時，表示設置為內(nèi)嵌元素。轉(zhuǎn)換注意：希望控制內(nèi)嵌元素的寬度和高度，此時需要將內(nèi)嵌元素轉(zhuǎn)換為塊元素。這在制作導航條、頁面菜單時比較常見。希望內(nèi)嵌元素從新行上開始，此時也需要將內(nèi)嵌元素轉(zhuǎn)換為塊元素。希望塊元素的寬度和高度由其內(nèi)容決定或者希望同行顯示，此時需要將塊元素轉(zhuǎn)換為內(nèi)嵌元素。三．盒子的定位原則1．行內(nèi)元素之間的水平marginCSS代碼：span{ font-size:12px; background-color:#999; text-align:center;padding:10px;}#left{ margin-right:30px;}#right{ margin-left:20px;}HTML代碼：<spanid=left>行內(nèi)元素1</span><spanid=right>行內(nèi)元素2</span>2．塊元素間的豎直margin

兩個塊元素之間的距離不是margin-bottom與margin-top的總和，而是二者中較大的，這種現(xiàn)象被稱為margin的“塌陷”現(xiàn)象CSS代碼：div{background-color:#999; padding:10px; width:100px; text-align:center;}HTML代碼：<divstyle="margin-bottom:40px;">塊元素1</div><divstyle="margin-top:20px;">塊元素2</div>3．嵌套盒子之間的margin

一個塊級元素的盒子水平方向的寬度會自動延伸，直至上一級盒子的限制位置CSS代碼：

#father{ background-color:#CCC; text-align:center; padding:10px;border:1pxsolid#030;}#father#son{ background-color:#999; margin-top:30px;padding:15px;}HTML代碼：<divid="father">父塊

<divid="son">子塊</div></div>

嵌套的寬度和高度外層盒子的寬度會自動延伸，直到瀏覽器窗口的邊界為止，而里面的子盒子的寬度也可以自動延伸，它以父元素的內(nèi)容部分為限。對于高度而言，div都是以里面內(nèi)容的高度來確定的，也就是會自動收縮到能夠完全包容內(nèi)容的最小高度。綜上所述，div在沒有設定width和height屬性的情況下，寬度方向是自動延伸，高度方向是自動收縮。CSS代碼：#father{ background-color:#CCC; text-align:center; padding:10px; border:1pxsolid#030 height:50px;}#father#son{ background-color:#999; margin-top:30px; padding:15px;}HTML代碼：<divid="father">父塊

<divid="son">子塊</div></div>不同的瀏覽器顯示效果不同4．margin可以設置為負值通過這種設置可以產(chǎn)生特殊的排版效果CSS代碼：#father{ background-color:#CCC; text-align:center; padding:10px; border:1pxsolid#030; margin-left:40px;}#father#son{ background-color:#999; margin-top:30px; padding:15px; margin-left:-30px;}HTML代碼：<divid="father">父塊

<divid="son">子塊</div></div>四．CSS布局

CSS布局的重點不再放在table元素的設計中，取而代之的是HTML中的另一個元素DIV。在設計時，頁面首先在整體上進行<div>標簽的分塊，然后對各個塊進行CSS定位，最后再在各個塊中添加相應的內(nèi)容。通過CSS排版的頁面，更新十分容易。五．將頁面用div分塊<divid="container">此處顯示id"container"的內(nèi)容

<divid="header">此處顯示id"header"的內(nèi)容</div><divid="pagebody">此處顯示id"pagebody"的內(nèi)容

<divid="sidebar">此處顯示id"sidebar"的內(nèi)容</div><divid="content">此處顯示id"content"的內(nèi)容</div></div><divid="footer">此處顯示id"footer"的內(nèi)容</div></div>六．CSS布局方式1．居中的布局設計（1）使用自動空白邊 margin:0auto;（2）使用定位和負值空白邊width:720px;position:relative;left:50%;margin-left:-360px;2．浮動的布局設計（1）兩列固定寬度布局CSS代碼：#left{ width:200px; height:150px; background-color:#CCC; border:1pxsolid#999;float:left;}#right{ width:200px; height:150px; background-color:#CCC; border:1pxsolid#999;float:left;}頁面結(jié)構(gòu)代碼：<divid=”left”>左列</div><divid=”right”>右列</div>（2）兩列固定寬度居中布局這種布局可以適用div的嵌套來完成，用一個居中的div作為容器，將兩列分欄的兩個div放置在容器中，從而實現(xiàn)兩列的居中顯示。（3）兩列寬度自適應布局#left{ width:20%; height:150px; background-color:#CCC; border:1pxsolid#999;float:left;}#right{ width:80%; height:150px; background-color:#CCC; border:1pxsolid#999;float:left;}（4）兩列右列寬度自適應布局#left{ width:200px; height:150px; background-color:#CCC; border:1pxsolid#999;float:left;}#right{ height:150px; background-color:#CCC; border:1pxsolid#999;}（5）三列浮動中間列寬度自動適應HTML代碼如下：<divid="left">左列</div> <divid="right">右列</div><divid="main">中列</div>CSS代碼：#left{ width:200px; height:150px; background-color:#CCC; border:1pxsolid#999;float:left;}#right{ width:200px;height:150px; background-color:#CCC; border:1pxsolid#999;

float:right;}#main{height:150px;background-color:#CCC; border:1pxsolid#999;}HTML代碼如下：<divid="left">左列</div> <divid="main">中列</div><divid="right">右列</div>CSS代碼：*{ margin:0px;}#left{ width:200px; height:150px; background-color:#CCC; border:1pxsolid#999;position:absolute;top:0px;left:0px;}#right{ width:200px;height:150px; background-color:#CCC; border:1pxsolid#999;position:absolute;top:0px;right:0px;}#main{height:150px;background-color:#CCC; border:1pxsolid#999; margin:0px202px0px202px;}3．高度自適應 高度值同樣可以適用百分比進行設置，不過直接使用“height:100%”是不會顯示出效果的，這與瀏覽器的解析方式有一定關(guān)系。CSS代碼：html,body{ margin:0px; height:100%;}#left{ width:200px; height:100%;background-color:#CCC;float:left;}七．常見版型設計1．“匡”字型網(wǎng)頁<body> <!—網(wǎng)頁主體--><divid="container"> <!--頁面層容器-->

<divid="header"> <!--頁面頭部-->

</div>

<divid="pagebody"> <!--頁面主體-->

<divid="sidebar"> <!--側(cè)邊欄-->

</div>

<divid="content"> <!--主體內(nèi)容-->

</div>

</div>

<divid="footer"><!--頁面底部-->

</div><

溫馨提示

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

評論

0/150

提交評論