1、HTML網(wǎng)頁制作,1：HTML簡介 2：HTML常用標簽介紹 3：表單布局 4：表格布局 5：框架布局 6：CSS樣式表 7：使用Dreamweaver制作網(wǎng)頁,HTML簡介,HTML：Hyper Text Markup Language 超文本標簽語言 HTML：網(wǎng)頁的“源碼” 瀏覽器：“解釋和執(zhí)行”HTML源碼的工具,HTML文檔的基本結構,HTML文檔的結構, 我的第一個網(wǎng)頁 Hello World! ,HTML 網(wǎng)頁,頭部部分,主體部分,標簽標記 HTML 文檔的開始和結束,網(wǎng)頁標題,網(wǎng)頁內(nèi)容，可以是文本、圖像等,這部分包括標題和其他說明信息，包括在 標簽內(nèi),這部分包含文本、圖像和鏈接

2、，它包括在 標簽內(nèi),網(wǎng)頁的摘要信息,網(wǎng)頁摘要信息利于瀏覽器解析和搜索引擎搜索： 使用標簽, 搜狐-中國最大的門戶網(wǎng)站 , , ,使用標簽 （1）描述文檔類型和字符編碼 （2）描述搜索關鍵字和描述,提供搜索關鍵字和內(nèi)容描述信息，方便搜索引擎的搜索,HTML頁面中的塊和行,HTML標簽分類（方便后續(xù)的布局設計）： 塊級標簽：顯示為“塊”狀，前后隔一行 行級標簽：按行逐一顯示 分類好處：方便后續(xù)的布局設計,塊級： 塊內(nèi)包含多行,行級：包括文字、圖片等,塊級標簽,根據(jù)使用場合，塊級標簽又細分為： 基本塊級標簽 常用于布局的塊級標簽 標題標簽, 一級標題 二級標題 三級標題 四級標題 五級標題 六級標題

3、 ,h1最大 h6最小 前后隔行,標題 標題,基本塊級標簽段落,段落標簽, 北京歡迎你 北京歡迎你，有夢想誰都了不起！ 有勇氣就會有奇跡。 ,前后換行，類似教材中的段落,基本塊級標簽水平線,水平線標簽, 北京歡迎你 北京歡迎你，有夢想誰都了不起！ 有勇氣就會有奇跡。 ,橫線用于內(nèi)容分割,單個標簽的閉合形式,常用于布局的塊級標簽有序列表,有序列表標簽, 注冊步驟： 填寫信息 收電子郵件 注冊成功 ,有序列表, 列表項1 ,常用于布局的塊級標簽無序列表,無序列表標簽, 新人上路指南 如何激活會員名？ 如何注冊貴美會員？ 注冊時密碼設置有什么要求？ 貴美認證 ,無序列表, 列表項1 ,常用于布局的塊

4、級標簽描述標簽,定義描述標簽, 咖啡 一種黑色的熱飲料，原料據(jù)說是咖啡豆，非洲盛產(chǎn)這類原料。 可以提神，刺激神經(jīng)。 ,這種效果可以和無序列表互相替代，因dt是塊狀元素，所以常用于圖文混編的布局場合, 標題 描述1 ,常用于布局的塊級標簽描述標簽, 圖片的HTML代碼（后續(xù)講解） 商品名稱：燦坤蒸氣電熨斗 商品價格：388元 商品簡介：金鋼低血超硬超順滑,140ml透明大水箱設計 ,用定義描述標簽實現(xiàn)圖文混編的效果,文字有一定的縮進,常用于布局的塊級標簽表格,表格 百度 新浪 ,-表格 -行 -列（單元格）,常用于布局的塊級標簽表單,表單,一般和table使用： . . . , ,常用于布局的塊

5、級標簽div層,分區(qū)標簽 ,div標簽可內(nèi)嵌到等標簽內(nèi)，作為普通塊狀元素使用,一般當作結構化塊狀元素使用，作為邏輯分區(qū)（分塊）即容器來使用, 新人上路 div其實就是一個. ,小結,請說出實際開發(fā)常用的4種塊狀結構是什么？,1、div-ul(ol)-li ：常用于分類導航或菜單等 2、div-dl-dt-dd ：常用于圖文混編的場合 3、table-tr-td ：常用于圖文布局或顯示數(shù)據(jù) 4、form-table-tr-td：常用于布局表單,行級標簽圖像標簽,圖像標簽, ,為了不同瀏覽器之間的兼容，推薦使用title屬性 ，確保能顯示提示文字,行級標簽范圍標簽,范圍標簽 ：顯示某行內(nèi)的獨特樣式

6、, 商品價格:僅售10元 ,文本等行級內(nèi)容,設置紅色、大號字突出顯示,行級標簽換行標簽,換行標簽 , 北京歡迎你，有夢想誰都了不起！ 有勇氣就會有奇跡。 北京歡迎你，為你開天辟地 流動中的魅力充滿朝氣。 北京歡迎你，在太陽下分享呼吸 在黃土地刷新成績。 北京歡迎你，像音樂感動你 讓我們都加油去超越自己。 ,和的區(qū)別： 前后不換行,為什么需要W3C標準,W3C：World Wide Web Consortium，萬維網(wǎng)聯(lián)盟 W3C的職能：負責制定和維護web行業(yè)標準 W3C標準包括：列的標準： HTML內(nèi)容方面：XHTML 樣式美化方面：CSS 結構文檔訪問方面：OM 頁面交互方面：ECMASc

7、ript ,制定統(tǒng)一的web標準,W3C,Netscape的圖標,W3C提倡的Web結構,不規(guī)范的示例,一級主題 一級主題闡述文字 二級主題 二級主題相關文字 項目列表1 項目列表2 項目列表3,存在問題： 1、內(nèi)容和表現(xiàn)沒分離，后期很難維護和修改 2、HTML代碼不能表示頁面的內(nèi)容語義，不利于搜索引擎搜索,W3C提倡的Web結構,規(guī)范的示例,一級主題1 一級主題闡述文字 二級主題 二級主題闡述文字 項目列表1 項目列表2 項目列表3 ,W3C提倡的Web結構： 1、內(nèi)容（結構）和表現(xiàn)（樣式）分離 2、HTML內(nèi)容結構要求語義化,XHTML 1.0基本規(guī)范, body部分內(nèi)容 ,標簽名和屬性名

8、稱必須小寫 HTML標簽必須關閉 屬性值必須用引號括起來 標簽必須正確嵌套 必須添加文檔類型聲明,1、聲明必須位于文檔的最前面 2、三種級別：Strict（嚴格類型） 、Trasitional（過度類型）、 Frameset（框架類型）,練習1,需求說明： 實現(xiàn)簡單的商品購買頁,練習2,注意HTML結構的語義化，遵守XHTML1.0基本規(guī)范,需求說明： 實現(xiàn)商品促銷頁,超鏈接,超鏈接-實現(xiàn)頁面間的導航,鏈接文本或圖像,鏈接地址（目標）,超鏈接, 燦坤蒸氣電熨斗 ,鏈接在新窗口中打開, 鏈接熱點文本或圖像,鏈接路徑, 上級目錄 上上級目錄 ,相對地址：相對于當前目錄的地址，常用 絕對地址：指向目

9、標地址的完整描述 ，少用,上級目錄：./,上上級目錄：././,登錄 搜狐,登錄,超鏈接的三類應用場合, 免費注冊 登錄 ,頁面間鏈接 錨鏈接 功能性鏈接,常用于網(wǎng)站導航,相對路徑,超鏈接的三類應用場合,實現(xiàn)錨鏈接 1、定義標記（錨）： 目標位置 2、設置鏈接到標記位置：當前位置, 明星專區(qū) 明顯專區(qū)內(nèi)容 ,定義標記,設置鏈接到標記位置,A.頁面內(nèi)的錨鏈接,適用于頁面內(nèi)容較多，超過一屏的場合,超鏈接的三類應用場合,實現(xiàn)錨鏈接,標記所在頁. 明星專區(qū) ,B.頁面間的錨鏈接,鏈接頁. 明星體驗：明星專區(qū) ,超鏈接的三類應用場合,功能性鏈接 郵箱、QQ鏈接等, 站長信箱 ,注釋, 被注釋掉的行將不顯

10、示 - 正常顯示行1 正常顯示行2 ,用于增加代碼的可讀性，不顯示,注釋,特殊符號,特殊符號 空格：, COPYRIGHT 北京市貴美商城有限公司 ,1、因為等符號在HTML中已使用，所以必須用其他符號來代替 2、都以分號結束（；）,表單的應用,表單的典型應用,用戶登錄/注冊,收集用戶反饋信息,提供搜索工具,常見的表單元素,單行文本框(text),單選按鈕(radio),復選框(checkbox),下拉列表(select),重置按鈕 (reset),提交按鈕(submit),密碼框(password),文本域(textarea),表單基本語法, 文本框、按鈕等表單元素 ,指定提交后，由服務器上

11、哪個處理程序處理,指定向服務器提交的方法： 一般為post或get方法, post方法比較安全, 用戶名： 密 ,表單輸入元素：input,表單提交地址和方法的設置,表單元素基本格式,指定元素的類型，可為text、radio、submit等,控件的名稱,控件的初始值,控件的初始寬度,控件中輸入的最多字符個數(shù),控件是否被選中checked,表單各元素語法,文本框 密碼框 按鈕 單選按鈕,普通按鈕：button 提交按鈕：submit 重置（清空）按鈕：reset 圖片按鈕：image,表單各元素語法,復選框 文件域 列表框 多行文本框, , 文本內(nèi)容 ,表單的高級用法,隱藏域 方便服務器端“記住

12、”客戶端的信息、但又不希望客戶看到的數(shù)據(jù),. ,隱藏的客戶代號信息：666，但客戶端頁面不顯示,隱藏域：既方便服務器端“記住”客戶端的數(shù)據(jù)，又避免因顯示瀏覽者不關心的數(shù)據(jù)導致用戶反感,只讀和禁用屬性 readonly：希望某個框內(nèi)的內(nèi)容只允許用戶看，不能修改 disabled：因沒達到使用的條件，限制用戶使用,表單的高級用法, 歡迎閱讀服務條款協(xié)議，貴美的權利和義務. 同意以上協(xié)議 ,1、用戶不能修改協(xié)議 2、勾選“同意以上協(xié)議”，才允許點擊“注冊”按鈕,練習簡易求職表,“協(xié)議”只讀，“提交”按鈕禁用,用隱藏域提交求職者姓名“zhangsan”,需求說明： 使用表單制作簡易求職表,表格的應用,

13、表格應用場合,論壇中應用表格,購物網(wǎng)站應用表格,門戶網(wǎng)站應用表格,基本語法, 第1個單元格的內(nèi)容 第2個單元格的內(nèi)容 . 第1個單元格的內(nèi)容 第2個單元格的內(nèi)容 . , 定義行, 定義列,跨行、跨列, 學生成績 張三 語文 98 數(shù)學 95 .代碼同上兩行. ,rowspan 跨2行,colspan 跨3列,表格高級應用,如何實現(xiàn)年終數(shù)據(jù)報表？,表格標題,頁腳,表頭,表格數(shù)據(jù)的分組標簽、配合使用，對報表數(shù)據(jù)進行邏輯分組,表格高級應用, 年終數(shù)據(jù)報表 月份 收入（RMB） 1月 100 2月 80 平均月收入 196.67 總計 1180 ,標簽對應報表的頁眉,對應報表的數(shù)據(jù)主體,對應報表的頁腳

14、,表格布局,表格布局的應用場合,圖文布局，數(shù)據(jù)規(guī)則整齊,表單布局，同樣要求數(shù)據(jù)規(guī)則整齊,圖文布局的實現(xiàn),實現(xiàn)步驟,圖文布局的實現(xiàn),實現(xiàn)步驟, 大學要求老師開網(wǎng)店 安全錘網(wǎng)上大熱銷 ,整個是5行2列的表格,實際布局時border=“0”隱藏邊框,公告欄：跨2列,圖片：跨4行,練習：貴美商品分類,需求說明 根據(jù)提供的素材實現(xiàn),表單布局應用,實際頁面中的登錄表單布局,實際應用，需要幾行幾列的表格布局？,表單布局應用, 會員名: 代碼同“會員名” ,整體布局：4行3列的表格,圖片后的內(nèi)容跨2列，內(nèi)容用“空格”填充,圖片按鈕跨2列,小結,使用表格進行布局對顯示數(shù)據(jù)有什么要求？實現(xiàn)思路是什么？,使用場合：

15、數(shù)據(jù)顯示要求較為規(guī)整，符合表格布局的特點 布局的實現(xiàn)思路： 需要幾行幾列的表格？ 哪些單元格有跨行或跨列？ 編寫表格代碼實現(xiàn),嵌套布局,如何用表格實現(xiàn)下圖布局？,對于復雜的頁面，如使用表格則必須采用多層嵌套,嵌套布局,嵌套表格布局的缺點： 代碼量大 層次結構也相對復雜 不利于Goole等搜索引擎搜索查找數(shù)據(jù) 表格布局僅適用于： 規(guī)則的數(shù)據(jù)顯示 表單頁面,表格布局不適合不規(guī)則的復雜頁面，這種場合需使用DIV+CSS布局（后續(xù)學習）,框架的應用,頁面的一個固定部分顯示LOGO或公司信息,在另一個固定部分顯示導航部分詳細內(nèi)容,在此處顯示詳細內(nèi)容， 頁面中此部分是變化的,產(chǎn)品 宣傳,技術 論壇,客戶

16、服務,框架的用途,框架的兩類用途： 1、顯示多窗口頁面-使用框架集 2、頁面復用使用內(nèi)嵌框架,復用站內(nèi)頁面： head和foot部分,復用站外內(nèi)容： 引用Google搜索引擎、顯示sohu新聞等,框架的組成,文件1： top.html,文件2：left.html,文件3： right.html,多個頁面文件組成,主文件： index.html,框架基本結構,創(chuàng)建框架網(wǎng)頁的步驟： 創(chuàng)建各子窗口對應的HTML文件 創(chuàng)建整個框架頁面文件，引用子窗口文件, ,框架頁面的基本語法,邊框尺寸大小,將窗口分割成左中右3個部分,可選,將窗口分割成上下2個部分,可選,引用各窗口要顯示的網(wǎng)頁文件,框架基本結構,縱

17、向分割窗口, 如瀏覽器不支持框架，才顯示body內(nèi)的內(nèi)容 ,注意： 1、框架和body不能共存 2、為了兼容性，可以使用標簽,窗口邊框的寬度,將窗口分割成上中下3部分,推薦：將窗口子文件放在單獨的文件中用于區(qū)分,框架基本結構,橫向分割窗口, ,橫向分為3個窗口,框架多窗口實現(xiàn),典型的2行2列結構, ,scrolling屬性：是否顯示滾動條,如何實現(xiàn)？,2行2列的 窗口劃分,窗口間的關聯(lián),如何實現(xiàn)左列導航，在右面顯示相關頁面？,使用標簽的target目標窗口屬性,窗口間的關聯(lián),實現(xiàn)窗口間關聯(lián)的步驟 1、設置窗口名（框架主頁） 2、設置的target屬性（窗口子頁面 ）, . . . . ,設置右

18、窗口名為：rightFrame, ,設置鏈接在右窗口中打開,窗口間的關聯(lián),target的其他用法 在新窗口中顯示：_blank 在自身窗口中顯示：_self 在上級窗口顯示：_top 在父窗口顯示：_parent,內(nèi)嵌框架,需要使用多個文件，目錄結構復雜 內(nèi)嵌較為靈活，可以在網(wǎng)頁的任何位置使用 可以作為模板，在本網(wǎng)站的多個頁面復用,整個頁面只有局部窗口引用sohu的內(nèi)容,內(nèi)嵌框架基本語法, ,和不同，放在標簽內(nèi),指明引用的網(wǎng)頁文件,內(nèi)嵌框架屬性,如何設置在內(nèi)嵌窗口顯示, 下邊顯示第三頁 ,在內(nèi)嵌窗口mainFrame顯示鏈接內(nèi)容,設置窗口名,如何實現(xiàn)？,練習1用框架分割多個窗口,需求說明： 根

19、據(jù)提供的子窗口頁面素材,練習2實現(xiàn)頁面復用,需求說明： 根據(jù)提供的素材實現(xiàn),為什么使用CSS樣式表,樣式表能實現(xiàn)內(nèi)容與樣式的分離，方便團隊開發(fā) css garden ,程序員寫代碼,美工做樣式,內(nèi)容與樣式和諧統(tǒng)一的完整網(wǎng)頁,為什么使用樣式表,樣式復用、方便網(wǎng)站的后期維護,同一網(wǎng)站共用同一樣式，確保網(wǎng)站統(tǒng)一的風格,頁面的精確控制，實現(xiàn)精美、復雜頁面,CSS的用途,1、外觀美化 2、布局、定位,CSS基本語法, 選擇器（即修飾對象） 對象的屬性1: 屬性值1; 對象的屬性2: 屬性值2; ,標簽聲明標簽內(nèi)為CSS,多條樣式規(guī)則 1.多個屬性間用分號分隔 2.用冒號聲明對應屬性值,li color:

20、 red; font-size: 30px; font-family: 隸書; ,選擇器,樣式規(guī)則,選擇器的分類,標簽選擇器, li color:red; font-size:28px; font-family:隸書; 家用電器 ,標簽選擇器：用于修飾同類HTML標簽的共性風格,選擇器的分類, .bluecolor:blue; 家用電器 各類書籍 手機數(shù)碼 日用百貨 ,如果希望部分li標簽采用其他樣式，怎么辦？,類選擇器(class),定義樣式，注意類名有點號,應用類樣式，其他元素也可以使用,選擇器的分類, #menu width:200px; background:#ccc; font:bo

21、ld 14px 宋體; 家用電器 ,ID選擇器,如果希望控制某個DIV塊樣式，并且要求塊元素唯一，怎么辦？,文本屬性,行距、對齊等： line-height （行高） text-align （對齊） letter-spacing （字符間距） text-decoration （文本修飾 ） white-space （空白處理 ）,字符間距：5px 文本修飾：帶下劃線 空白處理：不斷行,字體、字號： font（縮寫形式） font-weight（粗細） font-size（大小） font-family（字體）,字體：宋體 顏色：紅色 字號：12px 對齊：左對齊,文本屬性, li font:

22、12px 宋體; text-align:left; line-height:28px; .title letter-spacing:5px; white-space:nowrap; text-decoration:underline; .bigFont font-size:16px; color:red; ,所有的默認樣式： 字體、字號：宋體，12px 對齊方式：左對齊 行高：28px,首行標題樣式： 字符間距：5px 空白處理：不換行 文本修飾：帶下滑線,大字體樣式： 字號：16px 顏色：紅色,font字體樣式的縮寫形式,背景屬性,背景屬性： background （縮寫形式） backg

23、round-color（背景色 ） background-image（背景圖 ） background-repeat（背景圖重復方式 ） background-position（位置坐標、偏移量）,四類平鋪效果,背景屬性,div background:url(images/bg.jpg) no-repeat; background-position: -70px -60px ,背景出現(xiàn)的水平和垂直位置坐標，實現(xiàn)各種拍偏移效果,設置背景圖片、不重復平鋪,各種偏移效果,背景屬性的經(jīng)典應用,圖標截取-背景偏移量技術,利用background-position的坐標偏移量，從同一張背景圖中截取菜單圖標

24、,背景屬性的經(jīng)典應用,divwidth:80px;background:url(images/icon.gif) no-repeat; .helpbackground-position:-80px 0px; .loginwidth:40px;background-position:0px -20px; ; 購 幫助中心 登錄,所有IDV標簽設置為同一背景圖、等寬,分別設置各圖標的坐標偏移量,背景屬性的經(jīng)典應用,1 .設置三個標簽（如div）的背景為同一圖片背景,2 .考慮“購物車”、“幫助中心”圖標的坐標偏移量是多少？,3 .考慮“登錄”圖標的坐偏移量是多少？,Y,X,O(0,0),列表屬性,

25、列表（li）常用屬性 list-style （列表風格）,list-style屬性規(guī)定的列表風格,列表屬性,列表屬性的典型應用：導航菜單, li width:150px; color:red; font:28px 隸書; list-style:none; float:left; 購物車 ,設置列表為none去掉圓點,所有html標簽都有的float浮動屬性，此處用于橫向排列,如何控制CSS樣式,盒模型,網(wǎng)頁中的所有元素可以看作一個一個的“盒子”,元素內(nèi)容 填充（也稱內(nèi)邊距） 邊框 邊界（也稱外邊距）,如何控制CSS樣式,樣式控制思路,盒內(nèi)樣式修飾 盒子位置布局,盒內(nèi)樣式： 設置網(wǎng)頁元素的顏色、

26、字體等外觀,盒子位置布局：確定盒子所在的位置、和其他網(wǎng)頁元素的關系,為什么需要盒子屬性,盒子模型是網(wǎng)頁布局的基礎 盒子屬性是盒子模型的關鍵屬性,盒子模型平面圖,盒子模型三維立體圖：注意背景色在背景圖的下一層,什么是盒子屬性,盒子屬性： margin（外邊距/邊界） border（邊框） padding（內(nèi)邊距/填充 ） 各屬性又分為 四個方向,margin-right 右邊界,margin-left 左邊界,margin-top 上邊界,margin-bottom 下邊界,margin,border,padding,margin外邊距,可統(tǒng)一設置或四邊分開設置 margin屬性 margin

27、margin-top margin-right margin-bottom margin-left,margin-right 右邊界,margin-left 左邊界,margin-top 上邊界,margin-bottom 下邊界,margin：1px，2px，3px，4px; margin：1px，2px; margin：0px auto ; margin-left:1px;,分別代表什么含義？,border邊框,border屬性 border-color border-width border-style,border-top border-right border-bottom bord

28、er-left,border border-left ,修飾屬性,四個方向,縮寫形式,border,每個邊都有style、color、with屬性，四個邊可以一次設置，也可以分別設置,border-style: none; border: 1px solid red; border-right: 5px dotted blue;,分別代表什么含義？,使用border屬性修飾表單, .textBorder border-width:1px; border-style:solid; 名字： 密碼： ,細邊框的樣式,padding內(nèi)邊距,padding屬性 padding padding-top p

29、adding-right padding-bottom padding-left,padding-left : 5px; padding: 5px 10px 20px 40px padding: 5px 10px,分別代表什么含義？,四個邊可以一次設置，也可以分別設置,padding,元素的寬高及實際占位,元素的實際占位（實際寬、高） 盒子高度 = height屬性 + 上下填充高度 + 上下邊框高度 盒子寬度 = width屬性 + 左右填充寬度 + 左右邊框?qū)挾?height: 40px,border-width-top: 20px,margin-top: 10px,右圖圖片的實際的高度是

30、多少？,padding-top: 5px,使用盒子屬性布局元素,上外邊距30px,下填充40px,左右外邊距：水平居中,左填充80px,5px寬的邊框,如何實現(xiàn)如下貴美logo圖片的布局？,圖片背景色：#ff7300,頁面背景色：#ccc,使用盒子屬性布局元素, body margin:0px;padding:0px; background:#ccc; #logo width:380px; border:5px solid #666; padding:10px 20px 40px 80px; background:#ff7300; margin:30px auto; /水平居中 ,設置頁面內(nèi)容

31、（body）的背景和居中效果,“貴美商城”logo圖片的布局,首先組織HTML結構，再寫CSS進行布局或美化,使用盒子屬性實現(xiàn)DIV+CSS布局,如何實現(xiàn)注冊頁面的布局？,main：主體部分,footer：底部部分,header：頂部,使用盒子屬性實現(xiàn)DIV+CSS布局,實現(xiàn)步驟 1、分析頁面的分塊結構，形成HTML組織結構,為了控制整個頁面的居中，添加一個大容器：container,main：主體部分,footer：底部部分,header：頂部,使用盒子屬性實現(xiàn)DIV+CSS布局,實現(xiàn)步驟 2、編寫每個DIV塊的CSS控制定位,#containe: 980px 、居中,#header： 13

32、6px;、背景色#ccc,#main： 400px;、背景色#fff,#footer： 100px;、背景色#ccc,為什么需要float浮動屬性,如何解決中間兩塊布局無法同行顯示的問題？,如何實現(xiàn)為希望的布局？,什么是float浮動屬性,脫離常規(guī)文檔流而表現(xiàn)為向右或向左浮動,默認的常規(guī)文檔流：頁面內(nèi)容從上到下，從左到右排列。DIV塊換行顯示,向右浮動，脫離常規(guī)文檔流,什么是float浮動屬性,浮動的三大顯著特征,1.DIV塊元素失去“塊狀”換行顯示特征，變?yōu)樾袃?nèi)元素,什么是float浮動屬性,浮動的三大顯著特征,2.緊貼上一個浮動元素（同方向）或父級元素的邊框，如寬度不夠?qū)Q行顯示,什么是f

33、loat浮動屬性,浮動的三大顯著特征,3.占據(jù)行內(nèi)元素的空間，導致行內(nèi)元素圍繞顯示,為什么需要clear區(qū)隔屬性,第3個DIV塊隨窗口大小決定是否換行，如希望“強制”換行怎么辦？,如何實現(xiàn)第3塊換行顯示？,什么是clear清除屬性,clear作用 如果前一個元素存在左浮動或右浮動，則換行以區(qū)隔 只對塊級元素有效 clear屬性的取值 right left both none,超鏈接樣式的特點,超鏈接樣式的特殊性 文本或圖像加上鏈接，將失去原樣式而繼承鏈接的樣式,加鏈接后，圖片/文本樣式的變化,超鏈接樣式的四種狀態(tài) 未訪問狀態(tài)（a:link ） 已訪問狀態(tài)（a:visited ） 鼠標移上狀態(tài)（a:hover ） 激活選定狀態(tài)（a