第1講網頁設計基礎1網頁相關概念2HTML5概述3HTML基礎一、網頁相關概念網頁（Web頁面）：用HTML語言編寫的文件，是由各種信息元素組成的頁面，是構成網站的基本單位，是網站信息發布和表現的主要形式。1、網站和網頁的關系網站：是有獨立域名、獨立存放空間的內容集合，通常包括主頁和其他具有超鏈接文件的頁面。兩者關系：網站是由多個網頁組成的

2、瀏覽器和服務器的那點事一、網頁相關概念3、網頁的基本元素圖像音頻視頻動畫文本表單超鏈接導航欄一、網頁相關概念Web標準是由w3c(萬維網聯盟）組織來制定的制作網頁要遵循的規范。Web標準分類：結構標準（HTML）：頁面內容和結構描述表現標準（CSS）：美化頁面外觀行為標準（JavaScript）：頁面的動態和交互4、Web標準骨架皮肉神經一、網頁相關概念直面web標準：二、HTML5概述

HTML（HypertextMarkupLanguage，超文本標記語言）不是編程語言，而是一種描述性的標記語言，用于描述超文本中內容的顯示方式。1、什么是HTMLHTML1.0HTML2.0HTML3.2HTML4.0HTML4.01XHTMLHTML52、發展3、HTML5支持的瀏覽器2025/4/168這是目前常用的開發工具我們使用DreamweaverCS64、HTML5網頁的開發工具三、HTML基礎（結構）1、HTML5基本結構：根標記主體標記頁面標題標記聲明標記頭部標記實例1：制作一個顯示“世界，你好”的網頁，網頁標題顯示“World”標記也可讀做標簽頁面元信息標記定義了字符編碼網頁中的每個元素都是利用HTML標記(標簽)完成的。基本語法：雙標記<標記>內容</標記>

單標記<標記/>所有標記都要用尖括號<>括起來；標記名不區分大小寫，但建議使用小寫；標記中的屬性值可以省略引號，但建議使用雙引號或單引號；注釋標記<!--注釋-->。2、HTML5標記(標簽）3、HTML的書寫規范實例2：春夜喜雨

部分文本控制標簽雙標簽描述<h1></h1>一號標題標簽<p></p>段落標簽<font>字體單標簽描述<hr>水平線標簽<br>換行標簽本講小結作業分析（溫故知新）我們用到了哪些基礎標記？第2講文本、圖像和列表1文本控制標記2圖像標記文字、圖像、列表是制作網頁時最基本和經常使用的HTML元素。3列表元素一、

文本控制標記標題通過<h1>～<h6>等標記進行定義。1、標題和段落標記段落通過<p></p>進行定義。水平線通過單標記<hr>進行定義。對齊方式粗細顏色寬度換行通過單標記<br>進行定義。2、文本格式化標記標記描述<b></b>和<strong></strong>粗體<i></i>和<em></em>斜體<s></s>和<del></del>刪除線<u></u>和<ins></ins>下劃線3、特殊字符標記空格

版權號?©注冊商標?®小于(<)<大于(>)>實例1：從你的全世界路過二、圖像標記圖像是制作網頁不可缺少的元素。主要圖像格式有：GIF格式:支持動態圖,但支持的顏色少，常用于logo、動態小圖標等；PNG格式：支持透明，圖片質量高，常用于小圖標；JPEG(JPG)格式：常用于商品圖片、人像或實物圖片等1、圖像類型基本格式及屬性：2、圖像標記<img>路徑(位置)替代文本運行上述代碼，觀看效果寬度鼠標懸停時顯示內容高度對齊方式邊框垂直邊距水平邊距二、圖像標記絕對路徑：書寫完整的路徑，系統按照整個路徑查找文件。例：d:/images/zzcc.png（HTML不推薦使用）相對路徑：圖像文件相對于當前html文件的路徑。3、路徑相對路徑描

述src=“zzcc.jpg"圖像和網頁在同一目錄src="image/zzcc.jpg"圖像在網頁下一層目錄src="../zzcc.jpg"圖像在網頁上一層目錄src的值取決于圖像和網頁的位置關系。二、圖像標記實例2：飛馳人生三、列表元素列表的分類A無序列表<ul>C定義列表<dl>有序列表<ol>B1、ul列表（無序）代

碼效

果<ul><li>咖啡</li><li>牛奶</li><li>奶茶</li></ul><ul>的type屬性：設置列表符號，具體取值disc（）circle（）square（）2、ol列表（有序）代碼效

果<ol><li>咖啡</li><li>牛奶</li><li>奶茶</li></ol><ol>屬性：start：設置序號起始值，默認從1開始type：設置序號類型，默認數字。type="a"小寫

type="A"大寫reversed：表示是否反向排序。

3、dl列表（自定義）代

碼效

果<dl><dt>vivox30</dt><dd>5G雙模</dd><dd>潛望式超遠攝</dd><dd>發現更多美</dd></dl>實例1：多級列表（列表的嵌套）本講小結第3講超鏈接和表格1超鏈接標記2音頻和視頻元素3表格元素一、超鏈接標記超鏈接由源端點和目標端點兩部分組成

源端點：設置了鏈接的一端，可以是文本或圖像

目標端點：跳轉到的頁面或對象HTML超鏈接主要由標簽對<a></a>和屬性href構成<ahref=“跳轉目標"target="窗口打開方式">源端點</a>2、超鏈接格式1、超鏈接基礎目標地址鏈接頁面的打開方式文本或圖像href屬性target屬性類型描

述target="_blank"target="_self"相對路徑描

述href="#"href="e2.html"href="page/e2.html"href="../e2.html"不確定目標，空鏈接目標網頁和源網頁在同一目錄目標網頁在源網頁下一層目錄目標網頁在源網頁上一層目錄在新窗口中打開鏈接的網頁在當前窗口打開鏈接的網頁經此一疫·面對實例1二、音頻和視頻元素1、video元素的使用（視頻）屬性描

述src視頻路徑height，width高度，寬度autoplay自動播放controls控制條2、audio元素的使用（音頻））你我生而平凡實例2三、表格元素1、表格基礎表格在網頁中不僅可以有序地排列數據，還可以精確定位網頁元素，是網頁排版布局的重要工具。<table>

<caption>表格標題</caption><tr>

<th>…</th>

<th>…</th>

</tr>

<tr>

<td>…</td>

<td>…</td>

</tr>

</table>

表格的主體標記<table>2、表格的基本語法格式表格的行標記<tr>表頭單元格標記<th>單元格標記<td>不是必須3、<table>表格標記的常用屬性邊框寬度對齊方式寬度高度邊框顏色單元格內容與邊框的距離邊框寬度各單元格之間的距離4、<tr>行標記的常用屬性屬性名作用align該行內容的水平對齊方式valign該行內容的垂直對齊方式bgcolor本行的背景顏色5、<td>單元格標記的常用屬性屬性名作用align該單元格的水平對齊方式colspan單元格所跨列數rowspan單元格所跨行數菜單實例1本講小結第4講頁面元素1

結構元素2分組元素3

頁面交互元素一、結構元素HTML5為了使文檔的結構更加清晰明確，增加了一些與文檔結構關聯的結構元素。主要有：（連線）headerfooternavarticleasidesection導航側邊欄文章頁眉分塊頁腳大學遺憾排行榜-時光不老，我們不散1、頁眉header元素<header>

頁面頂部內容</header>2、頁腳footer元素<footer>

頁面底部內容</footer>header和footer也可嵌套在article元素中一、結構元素3、導航nav元素<nav><ul> <li><ahref="#">首頁</a></li> <li><ahref="#">公司概況</a></li> <li><ahref="#">聯系我們</a></li></ul></nav>一、結構元素nav導航可做：傳統導航側邊欄導航頁面導航翻頁操作分解任務1：頁眉、頁腳及導航4、文章article元素<article><header> <h1>文章標題</h1></header><p>正文…</p><footer>

文章頁腳</footer></article>article元素代表文檔、頁面或者應用程序中的獨立部分，經常被用于定義一篇日志、一條新聞等。一、結構元素分解任務2：文章5、分塊section元素<section> <h1>標題</h1> <p>內容</p></section>

section元素用于對頁面上的內容進行分塊，一個section元素通常由內容和標題組成。6、aside元素

aside元素用來定義當前頁面或者文章的附屬信息部分，包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等。<aside>相關內容</aside>一、結構元素分解任務3：分塊和側邊欄二、分組元素figure元素用于定義獨立的流內容（圖像、圖表等）figcaption元素用于為figure元素組添加標題1、figure和figcaption元素基本格式：<figure> <figcaption>標題</figcaption>

獨立的流內容</figure>分解任務42、hgroup元素hgroup元素用于將多個標題組成一個標題組。<header><hgroup><h1>我的個人網站</h1><h2>我的個人作品</h2></hgroup></header>二、分組元素主要的頁面交互元素有：details和summary元素progress元素meter元素三、頁面交互元素details元素用于描述文檔的細節。summary元素定義標題，是details元素的第一個子元素。當用戶點擊標題時，會顯示或隱藏其他內容。1、details和summary元素基本格式:<details><summary>顯示列表</summary><ul><li>列表1</li><li>列表2</li></ul></details>三、頁面交互元素實例1歌曲列表展示①progress元素用于表示一個任務的完成進度。②常用屬性：value：已經完成的工作量max：總共有多少工作量③基本格式：

<progressmax="100"value="50"></progress>2、progress元素

三、頁面交互元素實例2讀書計劃小A、小B和小C三人計劃在假期讀20本書，目前小A已讀5本，小B已讀8本，小C已讀10本，請用progress元素制作出三個人的讀書計劃進展情況。meter元素用于表示已知范圍內的數值，例顯示硬盤容量或者投票人數占投票總人數的比例等?；靖袷剑?lt;meter>可添加文本</meter>

3、meter元素

屬性說明high位于哪個點被界定為高的值low位于哪個點被界定為低的值max最大值，默認值是1min最小值，默認值是0optimum什么樣的度量值是最佳的值value度量值三、頁面交互元素實例3少年本講小結溫故和作業分析1、progress元素常用的兩個屬性是：（）

A.min和maxB.low和high

C.value和minD.value和max2、meter元素的（）屬性用于定義范圍內的最佳值

A.optimum

B.value

C.low

D.high12345溫故和作業分析第5講CSS入門1

CSS3簡介2

基礎選擇器CSS核心基礎3一、CSS3簡介①CSS(CascadingStyleSheets):層疊樣式表②用于設置HTML頁面中的文本表現、圖片的外形以及版面的布局等外觀顯示樣式。1、CSS概述2、CSS發展CSS1CSS2CSS2.1CSS33、CSS和HTML關系HTML結構層 負責從語義的角度搭建頁面結構CSS樣式層 負責從審美的角度美化頁面選擇器{屬性1：屬性值1;屬性2：屬性值2;……}1、CSS3樣式規則h1{ font-size:12px; color:#F00;}二、CSS3核心基礎選擇器屬性值屬性之間用;號隔開屬性與值之間用：隔開2、引入CSS樣式表（三種方式）行內式：嵌入到標記內，基本格式：<標記名style="屬性1:屬性值1;……">內容</標記名><h2style="font-size:20px;color:blue;">首頁</h2><pstyle="text-align:center;">正文</p><hrstyle="width:1000px;">二、CSS3核心基礎內嵌式：將CSS代碼集中寫在HTML文檔的<head>頭部標記中基本格式：

<head>

<styletype="text/css">選擇器{屬性1：屬性值1;屬性2：屬性值2;……}</style></head>二、CSS3核心基礎<styletype="text/css">h1{ font-size:12px; color:#F00;}</style>鏈入式：將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過<link/>標記將外部樣式表文件鏈接到HTML文檔中，基本格式：<head><linkhref="CSS文件路徑"type="text/css"rel="stylesheet"></head>href：被鏈接的CSS文件位置被鏈接的文件類型：CSS樣式表文檔關系：被鏈接的是樣式表文件二、CSS3核心基礎學習歷史是為了更好走向未來（三種方式實現）1.標記選擇器2.類選擇器3.id選擇器4.通配符選擇器5.標簽指定式選擇器6.后代選擇器7.并集選擇器三、CSS基本選擇器基本選擇器復合選擇器1、標記選擇器格式：標記名{屬性1:屬性值1;……}標記名作為選擇器;使同一標記的元素具有相同的樣式。p{font-size:16px;color:#666;}如夢令1:三、CSS基本選擇器2、類選擇器（使用最多）格式：.類名{屬性1:屬性值1;……}類名為html元素的class屬性值(字母開頭，小寫，見名知意）；可使不同的標記元素具備相同樣式，相同的標記元素具備不同樣式。如夢令2.red{color:red;}三、CSS基本選擇器3、id選擇器（目前較少用，主要為js準備）格式：#id名{屬性1:屬性值1;……}id名為html元素的id屬性值(自定義）。與類選擇器相似，但一個網頁只能用一次。4、通配符選擇器格式：*{屬性1:屬性值1;……}匹配頁面所有元素，范圍最廣。#p1{font-size:16px;color:#666}三、CSS基本選擇器谷歌（注意span標記：行內塊）本講小結第6講CSS文本樣式1

CSS復合選擇器2

文本樣式屬性1.標記選擇器2.類選擇器3.id選擇器4.通配符選擇器5.標簽指定式選擇器6.后代選擇器7.并集選擇器一、CSS復合選擇器基本選擇器復合選擇器1、標簽指定式選擇器（交集選擇器）格式：標記名.類名{屬性1:屬性值1;……}由兩個選擇器構成，第一個為標記選擇器，第二個為class選擇器或id選擇器，之間無空格。h1{color:red;}.s{color:blue;}h1.s{color:green;}<h1>交集選擇器</h1><h1class="s">交集選擇器</h1><pclass="s">交集選擇器</p>問題1:顏色判斷一、CSS復合選擇器2、后代選擇器格式：標記名

標記名{屬性1:屬性值1;……}外層標記寫在前面，內層標記寫在后面，中間用空格分隔。strong{color:red;}pstrong{color:blue;}p{color:yellow;}<h1><strong>后代選擇器</strong></h1><p><strong>后代選擇器</strong></p><p>后代選擇器</p>一、CSS復合選擇器問題2:顏色判斷3、并集選擇器格式：選擇器1,選擇器2,…{屬性1:屬性值1;……}各個選擇器（標記選擇器、class類選擇器、id選擇器等）通過逗號連接。h3,.s,#one{text-align:center;color:blue;}h1,h3,p{color:red;}<p>并集選擇器</p><h3>并集選擇器</h3><pclass="s">并集選擇器</p><h1id="one">并集選擇器</h1>一、CSS復合選擇器問題3:顏色和對齊判斷行內樣式優先；根據權重確定優先級，權重越高，優先級越大，Id選擇器權重為100>類選擇器權重為10>標記選擇器權重為1；相同權重，遵循就近原則。4.CSS優先級的結論一、CSS復合選擇器<pclass="blue"id="red"style="color:green">優先級</p>#red{color:red;}.blue{color:blue;}p{color:yellow;}問題4:顏色判斷1、字體樣式屬性字體：font-family字號：font-size斜體：font-style粗細：font-weightnormal

正常

italic

斜體

Oblique

傾斜

normal

正常

bold

粗體

bolder

加粗體

lighter

細體

100-900

二、文本樣式屬性h1{font-family:"微軟雅黑";font-size:28px;}綜合設置字體樣式：fontp{font-family:"宋體";font-size:30px;

font-style:italic;

font-weight:bold;}p{font:italicbold30px"宋體";}各屬性順序任意固定順序：斜體、粗細、字號、字體二、文本樣式屬性服務器字體：@font-face可以使用計算機沒有安裝的字體?；靖袷剑篅font-face{ font-family:字體名稱;

src:字體路徑;}倩女幽魂二、文本樣式屬性2、文本外觀屬性顏色：color字間距：letter-spacing單詞間距：word-spacing行間距：line-height一棵開花的樹二、文本樣式屬性文本轉換：text-transform文本裝飾：text-decoration水平對齊方式：text-alignnone

正常

capitalize

首字母大寫

uppercase

大寫

lowercase小寫

首行縮進：text-indent

建議使用em為單位none

正常

underline

下劃線

overline

上劃線

line-through刪除線

二、文本樣式屬性空白符處理：white-spacenormal空格空行無效，遇邊界自動換行。pre

保留空格空行原樣顯示。nowrap

空格空行無效，遇邊界也不換行。陰影效果：text-shadow基本格式：選擇器{text-shadow:h-shadowv-shadowblurcolor}水平陰影距離垂直陰影距離模糊半徑顏色二、文本樣式屬性一棵開花的樹本講小結第7講背景、超鏈接、列表和圖像樣式1背景的CSS樣式2

超鏈接偽類3

列表的CSS樣式4

圖片的CSS樣式一、背景的CSS樣式1、背景顏色2、背景圖像3、背景重復4、背景位置6、背景圖像的固定和滾動background-colorbackground-image:url(圖像地址)background-repeatbackground-positionbackground-attachment背景給網頁設置任意顏色背景；設置背景圖片，圖片不重復，居于網頁中上，固定。5、背景圖像的大小background-size例：

background-color:yellow;

background-image:url(image/caodi.png);

background-repeat:repeat-x;

background-position:leftbottom;

background-attachment:fixed;background:yellow

url(image/caodi.png)repeat-xleftbottomfixed;7、綜合設置背景屬性：background二、超鏈接偽類訪問前：藍色訪問后：紫色圖片超鏈接后出現邊框無超鏈接設置鏈接后的默認樣式1、超鏈接標記回顧<ahref=“#”target=“_self”>明星小時候</a>2、超鏈接偽類樣式偽類用來為某些選擇器添加特殊效果。基本格式:標記名:偽類名{屬性1:值1;……}偽類名稱含義a:link未單擊訪問時超鏈接樣式a:visited單擊訪問后超鏈接樣式a:hover鼠標懸浮其上的超鏈接樣式a:active鼠標單擊不動時的超鏈接樣式偽類的順序：a:linka:visiteda:hovera:active二、超鏈接偽類圖片超鏈接沒有邊框訪問前：黑色，無下劃線訪問后：紅色鼠標懸停：藍色、有下劃線明星小時候鼠標單擊不動：黃色實例7-1三、列表的CSS樣式值說明none無標記符號disc實心圓，默認類型circle空心圓square實心正方形decimal數字<ul><li>奶茶</li><li>咖啡</li><li>果茶</li></ul>1、列表項標記類型：list-style-typeul{

list-style-image:url(image/yinfu.png);

list-style-position:outside;}ul{list-style:outsideurl(image/yinfu.png);}2、圖像替代列表項標記：list-style-image3、列表項標記位置：list-style-position:inside|outside4、綜合設置列表：list-style三、列表的CSS樣式字號16px縮進1字符行距30px背景#518700背景圖像淺綠色背景#f3f4df，字號12px，行距25px列表項圖標暢銷書排行懸停時：加下劃線，紅色實例7-2四、圖片的CSS樣式（1）設置寬和高

寬：width高：height（2）設置邊框

border-width:thin|thick|medium或像素值;

border-style:solid|dotted|dashed|double|none;

border-color

border:5pxsolidred;

border-top

border-bottom

border-left

border-right

邊框寬度邊框線型邊框顏色綜合設置上邊框下邊框左邊框右邊框四、圖片的CSS樣式（3）設置外邊距

marginmargin-topmargin-bottommargin-leftmargin-right外邊距：上右下左上邊距下邊距左邊距右邊距（4）設置浮動

float:left|right;設置圖片浮動方向。父與子實例7-3本講小結第8講

表格樣式1創建表格（回顧）2

表格的CSS樣式<table>

<caption>表格標題</caption><tr>

<th>…</th>

<th>…</th>

</tr>

<tr>

<td>…</td>

<td>…</td>

</tr>

</table>

表格的主體標簽<table>1、創建表格表格的行標簽<tr>表頭單元格標簽<th>單元格標簽<td>一、創建表格（回顧）表格課堂案例樣式任務需求：1、表格分組2、表格寬度

3、背景4、邊框和邊距

5、活動態<thead>***</thead>表頭部分<tbody>***</tbody>表格主體<tfoot>***</tfoot>表尾部分寬width高height二、表格的CSS樣式1、分組2、寬高border-widthborder-styleborder-color邊框寬度邊框線型邊框顏色border:5pxsolidred;border-collapse:collapse|separate;設置邊框重合或分離綜合設置邊框3、邊框邊距外邊距margin內邊距padding4、邊距5、活動態表格樣式中的活動態一般指鼠標懸浮時樣式的變化。本講小結第9講表單1認識表單2輸入標記<input>文本域標記34下拉菜單標記5表單樣式一、認識表單一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成。1、表單概述提示信息表單域（容器）表單控件2、創建表單（表單標記）action：指定接收并處理表單數據的服務器程序的

url地址。method：用于設置表單數據的提交方式。

get(速度較快，保密性不好，默認值）

post(保密性好，可提交大量數據，速度稍慢）name：表單名稱。<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form>一、認識表單二、輸入標記<input><inputtype="表單元素類型"value="表單元素的值">1、<input>基本格式其中設置type屬性可以得到不同類型的表單元素，如按鈕、復選框、文本框等。2、<input>的type屬性單行文本輸入框text密碼輸入框password單選按鈕radio復選框checkbox日期框date電子郵箱輸入框email文件域file提交按鈕submit重置按鈕reset二、輸入標記<input><textarea></textarea>標記是文本域標記，它相當于一個多行的文本框，可以讓用戶輸入大量數據。1、作用三、文本域標記2、基本格式<textareacols="每行中的字符數"rows="顯示行數">

文本內容</textarea>淘寶網注冊input控件的新屬性：placeholder:描述輸入框所期待的值。required:輸入框不能為空。autofocus:自動獲取焦點。四、下拉菜單標記2、下拉菜單標記<select>的基本格式<selectsize="number"><option>選項1</option><option>選項2</option><option>選項3</option></select>1、下拉菜單的表現形式size：顯示列表項數默認為1實例2下拉菜單選擇鄭州健康返校打卡

使用CSS可以改變表單的文字、背景、某些輸入框的樣式等，對表單的修飾大致分為：修飾邊框樣式、修飾背景和活動態樣式。五、表單的CSS樣式本講小結

第9講

表單第10講盒子模型概述及屬性1

盒子模型概述2

盒子模型屬性一、盒子模型概述1、盒子模型的概念（BoxModel）

盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。

每個矩形由元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成。填充部分紙殼外圍間隙紙殼盒內物品2、<div>標記區塊容器標記,可以容納各種HTML元素；通用的塊級元素，無邏輯語義；便于網頁布局。邊框border元素內容content外邊距margin內邊距padding一、盒子模型概述3、盒子尺寸一般瀏覽器：width屬性指內容content的寬度。盒子實際寬度=width+左右內邊距+左右邊框寬度+左右外邊距一、盒子模型概述IE6：width屬性指內容+邊框寬度+內邊距(怪異模式）一、盒子模型概述3、盒子尺寸一個盒子設置寬度width為200px,文字距離盒子內左右邊距離40px,邊框為3px,左右外邊距為10px，當前盒子實際的寬度是多大？文字距離盒子內左右邊距離40px,邊框為3px,左右外邊距為10px，當前盒子寬度怎么設置最后能保證盒子最終寬度200px?

思考1、邊框（border）border-widthborder-styleborder-colorborder:5pxsolidred;border-radius:參數1/參數2二、盒子模型的相關屬性以上

遵循順時針值復制原則：順時針：上右下左值復制：一個值為四邊，兩個值為上下/左右

三個值為上/左右/下。邊框寬度邊框樣式邊框顏色圓角邊框綜合設置邊框2、內邊距（padding）

padding-top上

padding-right右

padding-bottom

下

padding-left

左

padding:上右下左綜合padding:10px;padding:10px5px;padding:30px8px10px;padding:20px5px8px10px;4個方向均為10px上下10px左右5px上30px左右8px下10px上20px右5px下8px左10px思考：分析以下代碼對應的內邊距二、盒子模型的相關屬性3、外邊距（margin）：與內邊距類似margin-top上

margin-right右

margin-bottom

下

margin-left

左

margin:上右下左綜合二、盒子模型的相關屬性課堂案例本講小結第10講第11講浮動1元素的浮動2overflow屬性引例（標準文檔流）對于標準文檔流，塊級元素會從上到下依次排列。一、元素的浮動浮動屬性被頻繁地應用在網頁布局、圖文環繞中;元素的浮動是指設置了浮動屬性的元素脫離標準文檔流的控制，移動到其父元素中相應位置的過程?；菊Z法格式：1、元素的浮動屬性float選擇器{float:屬性值;}屬性值描述left向左浮動right向右浮動none不浮動（默認值）

浮動修改1：第一個子盒子左浮動注意1：浮動的盒子不再伸展，寬度為容納內容的最小寬度

浮動修改2：前兩個子盒子左浮動

浮動修改3：三個子盒子左浮動為了避免左浮動或右浮動對元素的影響,往往需要在該元素中清除浮動。clear屬性用于清除浮動,基本語法格式:2、清除浮動選擇器{clear:屬性值;}屬性值描述left清除左側浮動的影響right清除右側浮動的影響both同時清除左右兩側浮動的影響（1）清除左右浮動一、元素的浮動

清除浮動對段落的影響（2）清除特殊浮動注意2：子元素和父元素為嵌套關系，不存在左右位置，所以使用clear屬性并不能清除子元素浮動對父元素的影響。特殊浮動：去掉案例中的段落,盒子變成了一條線2、清除浮動一、元素的浮動使用空標記清除浮動

在父元素之內，浮動元素之后添加空標記，并對該標記應用“clear:both”樣式。清除特殊浮動運用overflow屬性清除浮動給父元素增加屬性overflow：hidden,可以取消子元素浮動帶來的影響.清除特殊浮動的方法使用after偽對象清除浮動該方法只適用于IE8及以上和其他非IE瀏覽器。為需要清除浮動的元素偽對象設置“height:0;”必須在偽對象中設置content屬性，屬性值可以為空清除特殊浮動的方法

當盒子內的元素超出盒子自身的大小時，內容就會溢出，使用overflow屬性可以規范溢出內容的顯示方式，基本語法格式：屬性值描述visiblehiddenautoscroll二、overflow屬性選擇器{overflow:屬性值;}溢出內容會被修剪，且會始終顯示滾動條在需要時產生滾動條，即自適應顯示的內容溢出內容會被修剪，被修剪的內容不可見內容不會被修剪，會呈現在元素框之外

布局案例本講小結第12講作業分析第12講定位1元素的定位屬性2靜態定位static3相對定位relative4絕對定位absolute5固定定位fixed6z-index層疊等級屬性一、元素的定位屬性廣義的定位：某個元素放在某個位置;狹義的定位:position屬性用于定義元素的定位模式;基本語法格式：1、定位模式選擇器{position:屬性值;}值描述static靜態定位relative相對定位absolute絕對定位fixed固定定位一、元素的定位屬性通過邊偏移屬性,來精確定義定位元素的位置,其取值為數值或百分比。2、邊偏移屬性描述top頂端偏移量bottom底部偏移量left左側偏移量right右側偏移量1、靜態定位position:static是元素的默認定位方式,可以將元素按標準流定位;2、靜態定位下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。二、靜態定位static對如圖引例添加靜態定位，觀看效果1、相對定位position:relative,可以將元素相對它自身原來位置進行定位;2、相對定位下，可通過邊偏移屬性（top、bottom、left或right）來改變元素的位置;3、相對定位的元素還在標準流中。三、相對定位relative改為相對定位，實現如圖效果1、絕對定位position:absolute,將元素依據最近的已經定位的父元素進行定位,若所有父元素都沒有定位,則依據body根元素（瀏覽器窗口）進行定位;2、絕對定位下，可通過邊偏移屬性（top、bottom、left或right）來改變元素的位置;3、絕對定位的元素脫離標準流。四、絕對定位absolute父元素沒有定位改為絕對定位四、絕對定位absolute給父元素設置相對定位固定定位position:fixed是絕對定位的一種特殊形式,總是依據瀏覽器窗口進行定位。五、固定定位fixed1、當對多個元素同時設置定位時，定位元素之間有可能會發生重疊；2、對定位元素應用z-index屬性，可調整堆疊順序。3、z-index：默認值0，值越大，越靠上。六、z-index層疊等級屬性

本講小結第13講第13講CSS3高級應用1過渡22D變形33D變形4動畫一、過渡1、指定應用過渡效果