Web交互界面設(shè)計(jì)與制作第5章Web交互界面設(shè)計(jì)案例目錄01新聞列表制作02導(dǎo)航制作03圖文板塊制作04圖文列表制作01新聞列表制作超鏈接超鏈接是瀏覽者和服務(wù)器交互的主要字段，也叫超級鏈接，它是指網(wǎng)頁中一個(gè)對象指向一個(gè)目標(biāo)的連接關(guān)系。<ahref="將要鏈接的地址"target="窗口打開方式">鏈接的文字或圖片</a>href：要實(shí)現(xiàn)鏈接的跳轉(zhuǎn)地址target：表示鏈接目標(biāo)的打開方式。若需要在新窗口中打開鏈接，則target屬性值為：target="_blank"。01新聞列表制作超鏈接：絕對鏈接和相對鏈接絕對鏈接常常指的是Web上的URL，例如：<ahref=>百度網(wǎng)站</a><ahref=/abc.html>百度網(wǎng)站的abc.html頁面</a>相對鏈接是指鏈接到自己網(wǎng)站內(nèi)部的地址。這種鏈接不含http://，也不包括域名，只包含想要顯示的網(wǎng)頁的文件名，例如：<ahref="contact/index.html">contact文件夾下的index.html頁面</a>01新聞列表制作超鏈接：郵件鏈接郵件鏈接是指可以自動(dòng)打開瀏覽器設(shè)置的默認(rèn)郵件程序的鏈接，例如：<ahref="mailto:super@">發(fā)郵件給super@</a>超鏈接：電話鏈接電話鏈接可以啟動(dòng)撥號軟件，給指定號碼撥打電話，例如：<ahref="tel>打電話lt;/a>01新聞列表制作超鏈接：錨點(diǎn)鏈接在制作一些內(nèi)容較長的網(wǎng)頁時(shí)，可以讓瀏覽者鏈接到網(wǎng)頁中的特定位置，可以設(shè)置區(qū)段標(biāo)識符。它由以下兩部分構(gòu)成。（1）確定鏈接跳轉(zhuǎn)的位置，設(shè)置錨點(diǎn)，例如：<標(biāo)簽name="錨點(diǎn)名稱">目標(biāo)位置</標(biāo)簽>或者<標(biāo)簽id="錨點(diǎn)名稱">目標(biāo)位置</標(biāo)簽>（2）創(chuàng)建錨點(diǎn)鏈接，例如：<ahref="#錨點(diǎn)名稱">鏈接文字或者圖片</a>01新聞列表制作列表標(biāo)簽列表標(biāo)簽是HTML中常用的一種標(biāo)簽。列表具體分為：無序列表有序列表定義列表列表標(biāo)簽的主要用途為制作網(wǎng)頁導(dǎo)航、網(wǎng)頁列表、網(wǎng)頁圖文排列部分等。01新聞列表制作列表標(biāo)簽--無序列表無序列表（UnorderedList）是一個(gè)項(xiàng)目的列表，在列表中每個(gè)項(xiàng)目前面加上列表符號。01新聞列表制作列表標(biāo)簽—有序列表有序列表（OrderedList）顧名思義，就是有順序的列表。有序列表可以使用數(shù)字（默認(rèn)）、大寫字母、小寫字母、大寫羅馬數(shù)字和小寫羅馬數(shù)字進(jìn)行編號。01新聞列表制作列表標(biāo)簽—定義列表定義列表（DefinitionList）：定義列表不僅僅是一列項(xiàng)目，而是術(shù)語及其解釋的組合。01新聞列表制作列表標(biāo)簽—列表樣式屬性屬性list-style-type用來設(shè)置列表項(xiàng)的符號類型，基本語法結(jié)構(gòu)如下：list-style-type:屬性值;01新聞列表制作列表標(biāo)簽—列表樣式屬性使用圖片符號除了使用項(xiàng)目符號外，還可以用圖片作為列表項(xiàng)的符號，對應(yīng)屬性為list-styleimage，其語法結(jié)構(gòu)如下。list-style-image:url(圖片地址);調(diào)整列表位置列表項(xiàng)符號位于文本左側(cè)，默認(rèn)放置在文本以外，可以通過調(diào)整位置將其放置到文本以內(nèi)。對應(yīng)屬性為list-style-position，其語法結(jié)構(gòu)如下。list-style-position:outside/inside;01新聞列表制作列表標(biāo)簽—列表樣式屬性簡寫屬性與很多屬性一樣，list-style也有簡寫屬性，其語法結(jié)構(gòu)如下。list-style:noneurl(圖片地址)inside;不過，因?yàn)樵趯?shí)際的網(wǎng)頁界面設(shè)計(jì)中，列表項(xiàng)的符號遠(yuǎn)不止HTML默認(rèn)的這幾種形態(tài)。因此，默認(rèn)的列表項(xiàng)符號往往都要去掉，可使用以下樣式代碼。/*去掉列表項(xiàng)前符號*/ol,ul,li{ list-style:none;}01新聞列表制作案例實(shí)現(xiàn)：新聞列表制作01新聞列表制作案例實(shí)現(xiàn)：新聞列表制作01新聞列表制作案例實(shí)現(xiàn)：新聞列表制作02導(dǎo)航制作標(biāo)準(zhǔn)流標(biāo)準(zhǔn)流是默認(rèn)的網(wǎng)頁布局模式。當(dāng)刪除其中的某一個(gè)標(biāo)簽時(shí)，其下面的標(biāo)簽會(huì)自動(dòng)上移，填補(bǔ)刪除后空出的空間。塊級標(biāo)簽、行內(nèi)標(biāo)簽依據(jù)自己的顯示屬性按照在文檔中的先后順序依次顯示。塊級標(biāo)簽占一行或多行，行內(nèi)標(biāo)簽和其他標(biāo)簽共處一行，嵌套關(guān)系也會(huì)顯示出來。02導(dǎo)航制作浮動(dòng)與清除浮動(dòng)1．float屬性float屬性的基礎(chǔ)語法結(jié)構(gòu)如下。float:left|right|none|inherit;02導(dǎo)航制作浮動(dòng)與清除浮動(dòng)2．clear屬性clear屬性是一個(gè)與float屬性相反的屬性，它定義清除標(biāo)簽?zāi)倪叺母?dòng)。clear屬性的基礎(chǔ)語法結(jié)構(gòu)如下。clear:left|right|both|none|inherit;02導(dǎo)航制作案例實(shí)現(xiàn)：導(dǎo)航制作02導(dǎo)航制作案例實(shí)現(xiàn)：導(dǎo)航制作02導(dǎo)航制作案例實(shí)現(xiàn)：導(dǎo)航制作02導(dǎo)航制作案例實(shí)現(xiàn)：導(dǎo)航制作03圖文板塊制作盒子模型網(wǎng)頁文檔中的每個(gè)標(biāo)簽都被視為一個(gè)盒子。可以理解為，網(wǎng)頁布局就是將大大小小的盒子通過嵌套來合理擺放。在布局的過程中需要關(guān)注盒子尺寸的計(jì)算、盒子是否會(huì)在不同瀏覽器移位等問題。一個(gè)標(biāo)準(zhǔn)的W3C盒子模型由content（內(nèi)容）、padding（填充，也稱內(nèi)邊距）、margin（外邊距）和border（邊框）這4個(gè)屬性組成。03圖文板塊制作寬度和高度寬度widthwidth屬性用于指定標(biāo)簽的內(nèi)容在瀏覽器可視區(qū)域中的寬度，其語法結(jié)構(gòu)如下。width:像素值/百分比;最小寬度min-widthmin-width屬性從字面意思可以理解為最小寬度，其語法結(jié)構(gòu)如下。min-width:像素值/百分比;最大寬度max-widthmax-width屬性從字面意思可以理解為最大寬度，其語法結(jié)構(gòu)如下。max-width:像素值/百分比;03圖文板塊制作寬度和高度高度heightheight屬性用于指定標(biāo)簽的內(nèi)容在瀏覽器可視區(qū)域中的高度，其語法結(jié)構(gòu)如下。height:像素值/百分比;最小高度min-heightmin-height屬性為最小高度。其語法結(jié)構(gòu)如下。min-height:像素值/百分比;最大高度max-heightmax-height屬性為最大高度。其語法結(jié)構(gòu)如下。max-height:像素值/百分比;03圖文板塊制作邊框網(wǎng)頁中標(biāo)簽的邊框（border）包含border-width（邊框的寬度）、border-style（邊框的樣式）、bordercolor（邊框的顏色）等常用CSS屬性。在CSS3中，還可以為邊框設(shè)置圓角，即使用border-radius屬性，還有盒子的陰影，即使用box-shadow。03圖文板塊制作邊框邊框?qū)挾萣order-width邊框?qū)挾确譃?個(gè)方向，分別是top、right、bottom和left，其語法結(jié)構(gòu)如下。border-width:數(shù)值;邊框顏色border-color邊框顏色同寬度一樣也有4個(gè)方向，其語法結(jié)構(gòu)如下。border-color:顏色值;03圖文板塊制作邊框邊框樣式border-style邊框樣式border-style是指邊框的顯示方式是實(shí)線、虛線還是點(diǎn)狀線、雙線等形態(tài)。其語法結(jié)構(gòu)如下。border-style:dashed;border-top-style:dotted;03圖文板塊制作邊框簡寫屬性border通常情況下，我們會(huì)對邊框?qū)傩赃M(jìn)行簡寫，如圖所示。3個(gè)值的順序可以調(diào)換；或者單獨(dú)指定某一個(gè)值，例如：

border:1pxdashed#00f;border-top:1pxdashed#ff0;03圖文板塊制作邊框圓角邊框border-radius其基本語法結(jié)構(gòu)如下。border-radius:none|圓角半徑;圓角半徑取值一般是長度值（單位：px），不能為負(fù)值。03圖文板塊制作邊框盒子陰影其語法結(jié)構(gòu)如下。box-shadow:x軸偏移y軸偏移模糊量陰影顏色內(nèi)陰影inset/外陰影outset默認(rèn)為外陰影（outset）。03圖文板塊制作內(nèi)邊距內(nèi)邊距是指盒子內(nèi)容與邊框的間距。內(nèi)邊距分為上、右、下、左4個(gè)方向，語法結(jié)構(gòu)如下。padding:數(shù)值;padding屬性值可以是1～4個(gè)。例如：padding:5px;padding:5px0;padding:5px10px15px;padding:5px2px10px4px;03圖文板塊制作內(nèi)邊距也可以單獨(dú)控制某一個(gè)方向的內(nèi)邊距，需要添加對應(yīng)方向詞，如top、bottom、left、right，例如：padding-top:30px;padding-bottom:10px;03圖文板塊制作外邊距外邊距表示標(biāo)簽與標(biāo)簽外部標(biāo)簽之間的距離。與內(nèi)邊距一樣，外邊距也分為上、右、下、左4個(gè)方向，語法結(jié)構(gòu)如下。margin:數(shù)值;其取值可以為1～4個(gè)，每種取值方式同padding一樣，此外不贅述，例如：margin:5px;margin:5px0;margin:5px10px15px;margin:5px2px-10px4px;03圖文板塊制作Web常見圖片格式在大多數(shù)的Web頁面中，圖片占據(jù)頁面大小的60%～70%。因此在Web開發(fā)中，不同場景使用合適的圖片格式對Web頁面的性能和體驗(yàn)是很重要的。常用Web圖片格式有：JpgPngGif03圖文板塊制作Web常見圖片格式在大多數(shù)的Web頁面中，圖片占據(jù)頁面大小的60%～70%。因此在Web開發(fā)中，不同場景使用合適的圖片格式對Web頁面的性能和體驗(yàn)是很重要的。常用Web圖片格式有：GifJpgPngWebp03圖文板塊制作Web中的插入圖片<img>為圖片標(biāo)簽。僅僅使用<img>標(biāo)簽并不會(huì)在網(wǎng)頁中插入圖片。圖片必須有圖片來源和替代文本屬性，即src和alt屬性。具體語法結(jié)構(gòu)如下。<imgsrc="images/pic.jpg"alt="重慶夜景">src屬性代表圖片路徑，該路徑可以是絕對路徑，也可以是相對路徑。alt屬性指定替代文本，用于在圖像無法顯示或者用戶禁止圖像顯示時(shí)，代替圖像顯示在瀏覽器中的內(nèi)容。03圖文板塊制作相對路徑與絕對路徑1．絕對路徑絕對路徑是完整的路徑。它可以來源于本機(jī)中的物理地址，如src="D:/mysite/image/pic.jpg"；它也可以來源于Internet的網(wǎng)絡(luò)路徑，如src="/img/pic.jpg"。2．相對路徑相對路徑是以當(dāng)前文檔所在的路徑和子目錄為起始目錄，進(jìn)行相對于文檔的查找。制作網(wǎng)頁時(shí)通常采用相對路徑，這樣可以避免站點(diǎn)中的文件整體移動(dòng)后，產(chǎn)生找不到圖片或其他文件等現(xiàn)象。03圖文板塊制作案例實(shí)現(xiàn)：圖文板塊制作03圖文板塊制作案例實(shí)現(xiàn)：圖文板塊制作03圖文板塊制作案例實(shí)現(xiàn)：圖文板塊制作04圖文列表制作相對定位相對定位（position:relative）是標(biāo)簽相對自己在標(biāo)準(zhǔn)流的位置（以標(biāo)簽左上角為起點(diǎn)）進(jìn)行垂直或水平方向的上下左右的偏移，然后標(biāo)簽會(huì)改變自己本身的位置，而移動(dòng)到重新定義的位置。其語法結(jié)構(gòu)如下。position:relative;top:20px;left:30px;上述代碼的意思為標(biāo)簽相對于自己的左上角向下偏移20px，向右偏移40px。04圖文列表制作絕對定位絕對定位（position:absolute）與相對定位不同，對標(biāo)簽進(jìn)行絕對定位時(shí)，參照的是已定位的父級乃至祖先級標(biāo)簽的位置，如果標(biāo)簽沒有已定位的祖先標(biāo)簽，則參照body標(biāo)簽的最左上角來定義。絕對定位使標(biāo)簽的位置與標(biāo)準(zhǔn)流無關(guān)，因此標(biāo)簽不占據(jù)空間。其語法結(jié)構(gòu)如下。position:absolute;top:20px;left:30px;上述代碼的意思是，參照框2的父級標(biāo)簽的左上角（父級標(biāo)簽已經(jīng)設(shè)置定位屬性）向右偏移30px，向下偏移20px。04圖文列表制作層級層級屬性z-index用來設(shè)置標(biāo)簽的堆疊順序。z-index僅能對定位標(biāo)簽有效，也就是說標(biāo)簽要么絕對定位，要么相對定位，才能有效使用z-index屬性。其語法結(jié)構(gòu)如下。z-index:數(shù)值;z-index屬性值可以為負(fù)數(shù)，數(shù)值大的標(biāo)簽在數(shù)值小的標(biāo)簽上面?？梢岳斫鉃閦-index可以將一個(gè)標(biāo)簽放置在另一個(gè)標(biāo)簽的前面或者后面。該屬性默認(rèn)值為0。04圖文列表制作CSS3的過渡動(dòng)畫CSS過渡（Transition）是通過定義標(biāo)簽起點(diǎn)的狀態(tài)和結(jié)束點(diǎn)的狀態(tài)，在一定的時(shí)間區(qū)間內(nèi)實(shí)現(xiàn)標(biāo)簽平滑過渡或變化的一種補(bǔ)間動(dòng)畫機(jī)制。通過transition可以決定哪個(gè)屬性（可以明確地列出這些屬性）產(chǎn)生動(dòng)畫效果、何時(shí)開始動(dòng)畫（通過設(shè)置delay）、動(dòng)畫持續(xù)多久（通過設(shè)置duration），以及動(dòng)畫效果（通過定義timing()函數(shù)，比如線性地或開始快結(jié)束慢）。04圖文列表制作CSS3的過渡動(dòng)畫1．變換的屬性名稱transition-property該屬性可以單獨(dú)指定標(biāo)簽的哪些屬性改變時(shí)執(zhí)行過渡（transition），比如指定背景顏色屬性background改變，寬度屬性width改變，高度屬性height改變等。其語法結(jié)構(gòu)如下。transition-property:none|all|任意標(biāo)簽屬性;初始默認(rèn)值為all，04圖文列表制作CSS3的過渡動(dòng)畫2．過渡持續(xù)時(shí)間transition-duration該屬性用來指定標(biāo)簽過渡過程的持續(xù)時(shí)間。時(shí)間值可以s（秒）為單位，也可以以ms（毫秒）為單位，其中1000ms=1s。其默認(rèn)值是0s，即無過渡效果。其語法結(jié)構(gòu)如下。transition-duration:持續(xù)時(shí)間(秒或者毫秒);04圖文列表制作CSS3的過渡動(dòng)畫3．過渡速率變化transition-timing-function該屬性指定CSS屬性的速率變化，簡單來說就是先快后慢、先慢后快、勻速還是逐漸變慢。關(guān)于速率變化的常用屬性值如下。ease：逐漸變慢，默認(rèn)值，等同于貝塞爾曲線(0.25,0.1,0.25,1.0)。linear：勻速，等同于貝塞爾曲線(0.0,0.0,1.0,1.0)。ease-in：加速，等同于貝塞爾曲線(0.42,0,1.0,1.0)。ease-out：減速，等同于貝塞爾曲線(0,0,0.58,1.0)。ease-in-out：加速然后減速，等同于貝塞爾曲線(0.42,0,0.58,1.0)。transition-timing-function:ease|ease-in-out|linear|ease-in|ease-out;04圖文列表制作CSS3的過渡動(dòng)畫4．過渡延遲時(shí)間transition-delay該屬性指定延遲動(dòng)畫執(zhí)行的時(shí)間，即當(dāng)改變標(biāo)簽屬性值后多長時(shí)間開始執(zhí)行動(dòng)畫效果，初始默認(rèn)值為0；取值方式和動(dòng)畫持續(xù)時(shí)間一樣，其單位為s（秒）或ms（毫秒），其語法結(jié)構(gòu)如下。transtition-delay:延遲時(shí)間(秒或者毫秒);5．transition的簡寫屬性過渡屬性可以簡寫，即將多個(gè)屬性值寫到一條語句里，例如：transition:width2sease500ms,border2slinear,background-color1sease-in0.5s;04圖文列表制作CSS3的2D變形在2D空間中，標(biāo)簽可以被移位、傾斜、縮放、旋轉(zhuǎn)，2D變形圍繞x軸和y軸進(jìn)行，也就是我們常說的水平軸和垂直軸。其語法結(jié)構(gòu)如下。transform:translate(x,y)|scale(x,y)|rotate(xdeg，ydeg)|skew(xdeg,ydeg);04圖文列表制作CSS3的2D變形1．位移函數(shù)translate()使用translate()函數(shù)，可以把標(biāo)簽從原來的位置沿著x軸、y軸移動(dòng)，而不影響在x、y軸上的任何組件。transform:translate(x,y);2．縮放函數(shù)scale()縮放函數(shù)scale()可以讓標(biāo)簽根據(jù)中心原點(diǎn)進(jìn)行縮放，默認(rèn)值為1，其語法結(jié)構(gòu)如下。transform:scale(x,y);其中，x代表水平方向的縮放，y代表垂直方向的縮放。0～1的任何值，可以使標(biāo)簽縮?。欢魏未笥诨虻扔?的值，都可讓標(biāo)簽放大。04圖文列表制作CSS3的2D變形3．旋轉(zhuǎn)函數(shù)rotate()旋轉(zhuǎn)函數(shù)rotate()通過設(shè)定的角度使標(biāo)簽根據(jù)原點(diǎn)進(jìn)行旋轉(zhuǎn)。括號中的值表示旋轉(zhuǎn)的幅度。如果這個(gè)值為正值，則標(biāo)簽相對原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果這個(gè)值為負(fù)值，則標(biāo)簽相對原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。其語法結(jié)構(gòu)如下。transform:rotate(deg);04圖文列表制作CSS3的2D變形4．傾斜函數(shù)skew()傾斜skew()函數(shù)能夠讓標(biāo)簽傾斜顯示。它可以將一個(gè)對象圍繞其中心位置沿著x軸和y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會(huì)改變標(biāo)簽的形狀。skew()函數(shù)不會(huì)旋轉(zhuǎn)，而只會(huì)改變標(biāo)簽的形狀。其語法結(jié)構(gòu)如下。transform:skew(x,y);x表示指定標(biāo)簽的水平方向傾斜的角度，y表示指定標(biāo)簽的垂直方向傾斜的角度。04圖文列表制作CSS3的2D變形5．變形原點(diǎn)該屬性只有在設(shè)置了transform屬性時(shí)才起作用。默認(rèn)情況下，標(biāo)簽的變形原點(diǎn)就是中心位置。它的語法結(jié)構(gòu)如下。transform-origin:leftbottom|0%100%;該屬性取值可以是具體的方位值，也可以是百分比、像素值等具體的值。標(biāo)簽的默認(rèn)中心位置為transform-origin:50%50%。6．矩陣函數(shù)matrix()不常用，有需要可以查看參考資料。04圖文列表制作CSS3的3D變形三維變換使用基于2D變換的相同屬性，如果已經(jīng)掌握了2D變形，就會(huì)覺得3D變形的功能和2D變換的功能相當(dāng)類似。其差別在于除x軸和y軸之外，還有一個(gè)z軸。這些3D變換不僅可以定義標(biāo)簽的長度和寬度，還有可以定義深度。04圖文列表制作CSS3的3D變形1．3D位移CSS3中的3D位移主要涉及translateZ()和translate3d()兩個(gè)功能函數(shù)；translate3d()函數(shù)使一個(gè)標(biāo)簽在三維空間移動(dòng)。這種變形的特點(diǎn)是，使用三維向量的坐標(biāo)定義標(biāo)簽在每個(gè)方向移動(dòng)多少。其基本語法結(jié)構(gòu)如下。transform:translate3d(x,y,z);其參數(shù)值說明如下。x：代表x軸位移向量的長度。y：代表y軸位移向量的長度。z：代表z軸位移向量的長度。04圖文列表制作CSS3的3D變形2．3D縮放CSS3中的3D縮放主要涉及scaleZ()和scale3d()兩個(gè)功能函數(shù)；當(dāng)x軸和y軸的縮放比例同時(shí)為1時(shí)，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。x、y軸的默認(rèn)值為１，當(dāng)值大于１時(shí)，標(biāo)簽放大，當(dāng)值小于１、大于0.01時(shí)，標(biāo)簽縮小。其語法結(jié)構(gòu)如下。transform:scale3d(x,