網(wǎng)頁(yè)設(shè)計(jì)與制作課件 第10章 使用css3設(shè)置表格與表單樣式_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作課件 第10章 使用css3設(shè)置表格與表單樣式_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作課件 第10章 使用css3設(shè)置表格與表單樣式_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作課件 第10章 使用css3設(shè)置表格與表單樣式_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作課件 第10章 使用css3設(shè)置表格與表單樣式_第5頁(yè)
已閱讀5頁(yè)，還剩15頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

使用CSS3設(shè)置表格與表單樣式PowerPointdesign01設(shè)置表格樣式CONTENTS目錄設(shè)置表單樣式0201設(shè)置表格樣式Part01很多網(wǎng)站都使用了細(xì)線表格來(lái)放置圖像，看上去不但精美而且充滿小清新風(fēng)格，下面就制作一個(gè)細(xì)線表格，操作步驟如下：（1）構(gòu)建表格的結(jié)構(gòu)，在<body>標(biāo)簽中輸入代碼。此時(shí)的表格效果如圖1。（2）分別在各個(gè)單元格中放置圖像，也就是在<td>標(biāo)簽中加入圖像的鏈接。加入圖像后的表格效果如圖2所示。（3）使用CSS設(shè)置表格與單元格的邊框顏色。新的表格效果如圖3所示。（4）經(jīng)過(guò)上一步的操作可以看到單元格的邊框之間還有間隙，這時(shí)候就要設(shè)置CSS中整個(gè)表格的border-collapse屬性，使表格邊框折疊為單一邊框。折疊邊框之后的效果如圖4所示。課堂案例——?jiǎng)?chuàng)建細(xì)線表格在表格中，既可以對(duì)整個(gè)表格填充背景顏色，也可以對(duì)任何一行、任何一個(gè)單元格使用背景色。如圖所示，深色為整個(gè)表格的背景顏色，淺灰色為第2行單元格的背景顏色，白色為第4行第2個(gè)單元格的背景顏色。在HTML中，表格是用<table>標(biāo)簽定義的，是HTML中比較重要的標(biāo)簽。表格被劃分為行（使用<tr>標(biāo)簽），每行又被劃分為數(shù)據(jù)單元格（使用<td>標(biāo)簽）。td表示“表格數(shù)據(jù)（tabledata）”，即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖像、列表、段落、表單、水平線等。將代碼保存為HTML文件，表格效果如圖所示，該表格是一個(gè)沒(méi)有任何CSS修飾的表格。設(shè)置表格顏色表格邊框的設(shè)置可以使用HTML的border屬性來(lái)體現(xiàn)，它表示表格的邊框?qū)挾群瓦吙蚓€。將border設(shè)成不同的值，則會(huì)有不同的效果。將代碼保存為HTML文件，表格的效果如圖所示。<tableborder=20width=400>表示表格的邊框粗細(xì)為20像素，表格的整體寬度為400像素。設(shè)置表格邊框?qū)TML代碼進(jìn)行調(diào)整。將代碼保存為HTML文件，表格的效果如左圖所示。<tableborder=1width=200>表示表格的邊框粗細(xì)為1像素，表格的整體寬度為200像素。相比直接使用HTML標(biāo)記，使用CSS設(shè)置表格邊框更為方便快捷，在CSS中設(shè)置表格邊框同樣是通過(guò)border屬性。在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后繼續(xù)添加代碼。在代碼中設(shè)置了表格的邊框，效果如右圖。設(shè)置表格邊框內(nèi)邊距指的是單元格邊框和它的內(nèi)容之間的空白距離，如上圖所示。使用padding屬性可以設(shè)置內(nèi)邊距。padding分為左內(nèi)邊距（padding-left）、右內(nèi)邊距（padding-right）、上內(nèi)邊距（padding-top）和下內(nèi)邊距（padding-bottom），其距離數(shù)值可以用長(zhǎng)度單位和百分比單位表示，但不允許使用負(fù)值。表格內(nèi)邊距的顯示效果如下圖所示。表格的內(nèi)邊距在CSS3.0中，添加了一個(gè)新的屬性border-radius，使用border-radius屬性可以實(shí)現(xiàn)圓角邊框的效果。border-radius只有一個(gè)值時(shí)，4個(gè)角具有相同的圓角設(shè)置，其效果是一致的，代碼如下。.demo{border-radius:10px;}圓角邊框的效果如左上圖所示。圓角邊框border-radius設(shè)置兩個(gè)值時(shí)，此時(shí)top-left等于bottom-right并且它們?nèi)〉?個(gè)值；top-right等于bottom-left并且它們?nèi)〉?個(gè)值，也就是說(shuō)元素左上角和右下角相同，右上角和左下角相同，代碼如下。.demo{border-radius:10px20px;}等同于.demo{border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-right-radius:20px;border-bottom-left-radius:20px;}圓角邊框的效果如左下圖所示。border-radius設(shè)置3個(gè)值時(shí)，top-left取第1個(gè)值，top-right等于bottom-left并且它們?nèi)〉?個(gè)值，bottom-right取第3個(gè)值，代碼如下。.demo{border-radius:10px20px30px;}等同于.demo{border-top-left-radius:10px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:30px;}圓角邊框的效果如圖所示。圓角邊框圓角邊框border-radius設(shè)置4個(gè)值時(shí)，top-left取第1個(gè)值，top-right取第2個(gè)值，bottom-right取第3個(gè)值，bottom-left取第4個(gè)值，代碼如下。.demo{border-radius:10px20px30px40px;}等同于.demo{border-top-left-radius:10px;border-top-right-radius:20px;border-bottom-right-radius:30px;border-bottom-left-radius:40px;}圓角邊框的效果如圖所示。設(shè)置表單樣式Part02（1）新建一個(gè)記事本文檔，在文檔中輸入代碼。（2）在<body>與</body>標(biāo)簽之間輸入代碼。（3）將以上代碼保存為HTML文件，打開(kāi)網(wǎng)頁(yè)，效果如圖所示。課堂案例——制作登錄頁(yè)面輸入框填充：使用padding屬性可以在輸入框中添加內(nèi)邊距。如以下示例代碼，效果如左上圖所示。input[type=text]{width:100%;padding:12px20px;margin:8px0;box-sizing:border-box;}設(shè)置輸入框輸入框邊框：使用border屬性可以修改input邊框的大小或顏色，使用border-radius屬性可以給input添加圓角。如以下示例代碼，效果如左下圖所示。input[type=text]{border:2pxsolidred;border-radius:4px;}如果只是想添加底部邊框可以使用border-bottom屬性，效果如左上圖所示。input[type=text]{border:none;border-bottom:2pxsolidred;}設(shè)置輸入框輸入框顏色：可以使用background-color屬性來(lái)設(shè)置輸入框的背景顏色，color屬性用于修改文本顏色，如以下示例代碼，效果如左中圖所示。input[type=text]{background-color:#3CBC8D;color:white;}輸入框圖標(biāo)：如果想在輸入框中添加圖標(biāo)，可以使用background-image屬性和用于定位的background-position屬性。注意設(shè)置圖標(biāo)的左邊距，讓圖標(biāo)有一定的空間。如以下示例代碼，效果如左下圖所示。input[type=text]{background-color:white;background-image:url('searchicon.png');background-position:10px10px;background-repeat:no-repeat;padding-left:40px;}按鈕顏色：可以使用background-color屬性來(lái)設(shè)置按鈕顏色。如以下示例代碼，效果如下圖所示。.button1{background-color:#4CAF50;}/*Green*/.button2{background-color:#008CBA;}/*Blue*/.button3{background-color:#f44336;}/*Red*/.button4{background-color:#e7e7e7;color:black;}/*Gray*/.button5{background-color:#555555;}/*Black*/設(shè)置表單按鈕按鈕大小：可以使用font-size屬性來(lái)設(shè)置按鈕大小。如以下示例代碼，效果如下圖所示。.button1{font-size:10px;}.button2{font-size:12px;}.button3{font-size:16px;}.button4{font-size:20px;}.button5{font-size:24px;}圓角按鈕：可以使用border-radius屬性來(lái)設(shè)置圓角按鈕。如以下示例代碼，效果如下圖所示。.button1{border-radius:2px;}.button2{border-radius:4px;}.button3{border-radius:8px;}.button4{border-radius:12px;}.button5{border-radius:50%;}設(shè)置表單按鈕按鈕邊框顏色：可以使用border屬性設(shè)置按鈕邊框顏色。如以下示例代碼，效果如下圖所示。.button1{background-color:white;color:black;border:2pxsolid#4CAF50;/*Green*/按鈕陰影：可以使用box-shadow屬性來(lái)為按鈕添加陰影。如以下示例代碼，效果如右圖所示。.button1{box-shadow:08px16px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19);}.button2:hover{box-shadow:012px16px0rgba(0,0,0,0.24),017px50px0rgba(0,0,0,0.19);}設(shè)置表單按鈕按鈕寬度：默認(rèn)情況下，按鈕的大小有按鈕上的文本內(nèi)容決定（根據(jù)文本內(nèi)容匹配長(zhǎng)度）。我們可以使用width屬性來(lái)設(shè)置按鈕的寬度。如果要設(shè)置固定寬度可以使用像素(px)為單位，如果要設(shè)置響應(yīng)式的按鈕可以設(shè)置為百分比。如以下示例代碼，效果如下圖所示。.button1{width:250px;}.button2{width:50%;}.button3{width:100%;}練習(xí)案例——制作隔行變色的表格第1步：確定表格的HTML結(jié)構(gòu)。此時(shí)還沒(méi)有設(shè)置CSS樣式的表格效果如上圖所示。第2步：接下來(lái)使用CSS對(duì)表格的整體和標(biāo)題進(jìn)行設(shè)置。此時(shí)可以看到整體的文字樣式和標(biāo)題樣式已經(jīng)設(shè)置好了。第3步：設(shè)置各單元格的樣式。代碼一共分為3段，第1段是設(shè)置所有單元格的共同屬性，后面兩段分別

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論