HTML5+CSS3 Web前端設(shè)計基礎(chǔ)教程 第3版 課件 第5、6章 浮動、定位與列表；HTML 5增強型表單與簡易表格

第5章本章繼續(xù)向讀者介紹，在實際工作中使用頻率非常的三類知識，即浮動、定位與列表。通過本章的學(xué)習(xí)，讀者基本能夠達到創(chuàng)建并控制較為復(fù)雜的網(wǎng)頁版面。浮動、定位與列表5.1浮動與清除浮動5.1.1浮動（float）1．向左浮動或向右浮動

“float:left;”即是向左浮動，“float:right;”即是向右浮動。當(dāng)某個元素具有向左（右）浮動的屬性時，該元素就會生成一個塊級框，然后脫離當(dāng)前文檔流向左（右）移動，直到碰到左（右）邊緣。5.1浮動與清除浮動5.1浮動與清除浮動此處由于div是塊級元素，在初始狀態(tài)下，多個div容器會縱向排列，并且將父級容器wrap的高度撐開box-1脫離文本流后，向右移動，碰到父級元素的邊框，便停了下來。由于box-1移動，box-2便占據(jù)box-1的位置由于“box-2”不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋了“box-3”，致使“box-3”從視圖中消失子元素全部脫離文檔流進行浮動，致使父級容器wrap沒有內(nèi)容將其撐開

圖5-1各容器初始狀態(tài)

圖5-2“box-1”浮動效果圖5-3“box-2”浮動效果

圖5-4三個容器均向左浮動效果5.1浮動與清除浮動2．浮動時由于容器空間不夠造成的錯位

圖5-5父級容器寬度不夠的情況

圖5-6浮動的容器相互擁擠的情況5.1浮動與清除浮動5.1.2清除浮動的三種方法1．方法一：額外增加應(yīng)用“clear:both;”規(guī)則的空容器在浮動元素后額外增加一個空容器，比如“<divclass="clear"></div>”，然后在CSS中賦予.clear{clear:both;}屬性即可清理浮動。2．方法二：使用“overflow:hidden;”規(guī)則清除浮動向浮動容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮動，在添加overflow屬性后，浮動的容器又回到了容器層，把容器高度撐起，達到了清理浮動的效果。3．方法三：使用:after偽元素清除浮動:after偽元素能夠在被選元素的內(nèi)容后面插入另一內(nèi)容。在實際執(zhí)行時，首先給浮動的容器添加一個名為“clearfix”的Class，然后給這個Class添加一個:after偽元素實現(xiàn)在容器末尾添加一個看不見的容器以清理浮動。5.2CSS定位CSS有關(guān)定位的屬性包括position、z-index（層疊順序）、top、left、right、bottom和clip。表5-1position屬性的取值及其含義取

值含

義staticposition屬性的默認值，無特殊定位fixed固定，元素框的表現(xiàn)類似于將position設(shè)置為absolute，元素被固定在屏幕的某個位置，不隨滾動條滾動relative相對，元素雖然偏移某個距離，但仍然占據(jù)原來的空間absolute絕對，元素在文檔中的位置會被刪除，定位后元素生成一個塊級元素5.2.1靜態(tài)定位和固定定位1．靜態(tài)定位（static）2．固定定位（fixed）圖5-10鼠標為滾動時左側(cè)導(dǎo)航固定

圖5-11頁面滾動后左側(cè)導(dǎo)航仍然固定5.2CSS定位5.2.2相對和絕對定位1.相對定位（relative）圖5-12沒有添加相對定位樣式的初始預(yù)覽效果

圖5-13“content”容器添加相對定位樣式的預(yù)覽效果5.2CSS定位2．絕對定位（absolute）3．層疊（z-index）

5.2CSS定位圖5-14“box-1”容器添加絕對定位樣式的預(yù)覽效果

圖5-15“box-1”容器添加z-index樣式的預(yù)覽效果5.2.3相對于某一容器的絕對定位5.2CSS定位本例中通過設(shè)置父級容器相對定位，子級容器絕對定位，實現(xiàn)了“特賣圖標放置在左上角的效果”圖5-17“相對于某一容器的絕對定位”預(yù)覽效果5.3.1有關(guān)列表的CSS樣式5.3列表

在CSS樣式中，主要是通過list-style-image屬性、list-style-position屬性和list-style-type屬性這3個屬性改變列表修飾符的類型。表5-2有關(guān)列表的CSS樣式屬性屬

性說

明list-style復(fù)合屬性，用于把所有用于列表的屬性設(shè)置于一個聲明中。list-style-image將圖象設(shè)置為列表項標志。list-style-position設(shè)置列表項標記如何根據(jù)文本排列。list-style-type設(shè)置列表項標志的類型。marker-offset設(shè)置標記容器和主容器之間水平補白。5.3.2仿“天貓”首頁的縱向?qū)Ш?.3列表導(dǎo)航的標題個性化的圖標由無序列表盛放的導(dǎo)航內(nèi)容圖5-19仿“天貓”首頁的縱向?qū)Ш筋A(yù)覽效果5.3.3仿“鳳凰網(wǎng)”首頁的橫向?qū)Ш?.3列表圖5-25仿“鳳凰網(wǎng)”首頁的橫向?qū)Ш?.4仿“天貓電器城（手機館）”的圖文信息列表

圖5-29包含圖文信息列表的板塊

圖5-30粗略的板塊布局示意圖5.4仿“天貓電器城（手機館）”的圖文信息列表圖5-31“floor-hd”容器示意圖5.4仿“天貓電器城（手機館）”的圖文信息列表圖5-32“floor-row1”容器示意圖5.4仿“天貓電器城（手機館）”的圖文信息列表塊狀化圖像絕對定位圖5-33“floor-row2”容器示意圖謝謝觀看！第6章本章將從兩方面向讀者介紹表單和表格的基本知識，并從實際應(yīng)用出發(fā)，介紹CSS樣式中與其相關(guān)的屬性和常見美化效果。HTML5增強型表單與簡易表格6.1表單的創(chuàng)建與編輯6.1.1表單的基本知識1．什么是表單表單的應(yīng)用范圍非常廣泛，不僅用于收集信息和反饋意見，還用于資料檢索、網(wǎng)上購物等多種交互式場景，圖6-1所示的就是典型的表單應(yīng)用。圖6-1表單的典型應(yīng)用6.1表單的創(chuàng)建與編輯2．什么是表單域表6-1表單的參數(shù)名稱及功能屬

性名

稱功能解釋id表單標識名稱表單的名稱，該名稱可以使用腳本語言引用或控制該表單。name表單名稱表單的名稱，與ID具有相同的意思。action動作該屬性用于定義將表單數(shù)據(jù)發(fā)送到哪個地方，其值采用URL的方式，即處理表單數(shù)據(jù)的頁面或腳本。method方法默認值：瀏覽器一般默認方法為GET。GET：把表單值添加給URL，并向服務(wù)器發(fā)送GET請求。因為URL被限定在8192個字符內(nèi)，所以內(nèi)容過多的表單不要使用GET方法。POST：在消息正文中發(fā)送表單值，并向服務(wù)器發(fā)送POST請求。6.1表單的創(chuàng)建與編輯ectype編碼類型設(shè)置發(fā)送表單到服務(wù)器的媒體類型，它旨在發(fā)送方法為POST時才有效，其默認值為application/x-www-form-urlencode；如果創(chuàng)建的是文件上傳域，則應(yīng)該選擇multipart/form?data。target目標_blank：指的是在新窗口中打開目標文檔。_parent：指的是在顯示當(dāng)前文檔窗口的父窗口中打開目標文檔。_self：指的是在當(dāng)前窗口打開目標文檔。_top：指的是在當(dāng)前窗口的窗體內(nèi)打開目標文檔。6.1表單的創(chuàng)建與編輯6.1.2常見的表單對象1．文本字段（type="text"）圖6-3添加文本字段對象6.1表單的創(chuàng)建與編輯2．復(fù)選框（type="checkbox"）與復(fù)選框組3．單選按鈕（type="radio"）與單選按鈕組

圖6-6“單選按鈕組”對話框

圖6-7沒有美化的“單選按鈕組”6.1表單的創(chuàng)建與編輯4．提交按鈕（type="submit"）圖6-8添加“提交”按鈕表單對象6.1表單的創(chuàng)建與編輯5．日期控件（type="date"）6．滑塊控件（type="range"）7．顏色選擇器控件（type="color"）圖6-9日期控件

圖6-10滑塊控件

圖6-11顏色選擇器控件6.1表單的創(chuàng)建與編輯8．下拉列表或下拉菜單（select標簽）圖6-13菜單對象預(yù)覽效果圖6-14列表對象預(yù)覽效果6.1表單的創(chuàng)建與編輯9．跳轉(zhuǎn)菜單圖6-16“插入跳轉(zhuǎn)菜單”對話框10．表單的自動驗證圖6-17無輸入內(nèi)容時提交

圖6-18輸入格式錯誤時提交6.2CSS控制表單6.2.1搜索欄圖6-19搜索欄預(yù)覽效果圖6-20搜索欄布局示意圖6.2CSS控制表單6.2.2用戶登錄頁面圖6-21用戶登錄界面最終效果6.2CSS控制表單圖6-22用戶登錄界面布局示意圖6.2CSS控制表單6.2.3傳統(tǒng)按鈕、CSS3按鈕與開源樣式庫按鈕1．傳統(tǒng)按鈕的實現(xiàn)圖6-24傳統(tǒng)按鈕預(yù)覽效果6.2CSS控制表單2．CSS3按鈕的實現(xiàn)圖6-25CSS3按鈕預(yù)覽效果6.2.3傳統(tǒng)按鈕、CSS3按鈕與開源樣式庫按鈕6.2CSS控制表單3．開源樣式庫按鈕的實現(xiàn)<ahref="#"class="buttonbutton-primarybutton-roundedbutton-large">第三方樣式庫按鈕</a><inputtype="submit"value="表單按鈕"class="buttonbutton-pillbutton-primary">

按鈕的全局樣式按鈕的圓角樣式按鈕的基本外觀按鈕的大小樣式按鈕的全局樣式“藥丸”按鈕外觀樣式按鈕的基本外觀圖6-26開源樣式庫按鈕預(yù)覽效果6.3表格1．表格中常見的標簽（1）<t