Web前端開發(fā)課件 項(xiàng)目九 CSS 3修飾表格表單_第1頁
Web前端開發(fā)課件 項(xiàng)目九 CSS 3修飾表格表單_第2頁
Web前端開發(fā)課件 項(xiàng)目九 CSS 3修飾表格表單_第3頁
Web前端開發(fā)課件 項(xiàng)目九 CSS 3修飾表格表單_第4頁
Web前端開發(fā)課件 項(xiàng)目九 CSS 3修飾表格表單_第5頁
已閱讀5頁，還剩63頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

CSS3修飾表格表單項(xiàng)目九授課教師：姓名WEB前端開發(fā)Contents一項(xiàng)目描述本項(xiàng)目學(xué)習(xí)要點(diǎn)使用CSS設(shè)置邊框圓角效果；使用CSS美化表格表單。使用CSS美化背景；使用CSS美化邊框；二知識準(zhǔn)備使用CSS美化背景；使用CSS修飾表格。使用CSS美化邊框；使用CSS設(shè)置圓角邊框；使用CSS設(shè)置圖片邊框；使用CSS設(shè)置邊框陰影；使用CSS美化背景1．設(shè)置背景顏色在CSS3中，設(shè)置背景顏色的屬性是background-color，格式如下：{background-color:transparent|color;}transparent是默認(rèn)值，表示透明。color表示顏色，其設(shè)置方法有很多種：英文單詞、十六進(jìn)制、RGB、HSL、HSLA、GRBA，設(shè)置方法已經(jīng)在前面介紹過。使用CSS美化背景1．設(shè)置背景顏色【例9-1】為網(wǎng)頁以及段落設(shè)置背景顏色實(shí)例，代碼如下所示（示例文件9-1.html）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>CSS設(shè)置背景顏色</title> <style> body{ background-color:CadetBlue; } p{ background-color:rgb(154,205,50); color:#ffffff; line-height:30px; text-align:center; } </style></head><body> <P>風(fēng)高秋月白，雨霽晚霞紅</P></body></html>設(shè)置的整個(gè)網(wǎng)頁的背景顏色為軍校藍(lán)色，標(biāo)簽選擇器為“body”，用于聲明整個(gè)網(wǎng)頁。設(shè)置段落p的樣式：設(shè)置背景色，這里使用的是RGB表示顏色的方法；第12行設(shè)置文字顏色為白色，這里用16進(jìn)制數(shù)表示的顏色的方法；第13行設(shè)置行高為30像素；第14行設(shè)置了文字對齊方式為水平居中。在chrome瀏覽器中預(yù)覽使用CSS美化背景2．設(shè)置背景圖片在CSS3中，設(shè)置背景圖片的屬性是background-image，與背景顏色相同，背景圖片既可以對整個(gè)網(wǎng)頁進(jìn)行設(shè)置，也可以對某些HTML元素進(jìn)行設(shè)置，除此之外，還可以通過CSS樣式對圖片的排列方式等進(jìn)行控制。格式如下：{background-image:none|url(url);}默認(rèn)值為none（無背景圖），需要背景圖時(shí)則要用url進(jìn)行導(dǎo)入，url可以應(yīng)用相對地址，也可以用絕對地址。使用CSS美化背景2．設(shè)置背景圖片如果圖片因?yàn)槟承┰虿荒苷ｏ@示，則將以背景顏色替代。如果圖片太小不能鋪滿全屏，則會重復(fù)出現(xiàn)直至鋪滿。但是這種方式往往不適用于大多數(shù)情況，所以需要使用下面這些屬性：{background-repeat:repeat|repeat-x|repeat-y|no-reapeat}⑴background-repeat用于設(shè)置圖片的重復(fù)方式，格式如下：使用CSS美化背景2．設(shè)置背景圖片⑴background-repeat各屬性值和說明如表所示。屬性值說明repeat背景圖片水平方向和垂直方向都平鋪repeat-x背景圖片水平方向平鋪repeat-y背景圖片垂直方向平鋪ro-reapeat背景圖片不平鋪重復(fù)的背景圖片是從元素的左上角開始平鋪，直到水平或者垂直方向全部頁面都被背景圖片覆蓋為止。使用CSS美化背景2．設(shè)置背景圖片⑵background-attachment設(shè)置好背景圖片后，如果文字部分較長，則會出現(xiàn)滾動(dòng)條，當(dāng)拖動(dòng)滾動(dòng)條向下瀏覽文字的時(shí)候，初始可見的背景圖片就會看不到了。要解決這個(gè)問題，就要使用background-attachment屬性，該屬性用來設(shè)置背景圖片是否隨著文檔一起滾動(dòng)，格式如下：各屬性值和說明如表所示。{background-attachment:scroll|fixed}屬性值說明scroll默認(rèn)值，當(dāng)頁面滾動(dòng)時(shí)，背景圖片隨頁面一起滾動(dòng)fixed背景圖片固定在頁面的可見區(qū)域里使用CSS美化背景2．設(shè)置背景圖片⑶background-position默認(rèn)情況下，背景圖片的位置是從元素的左上角開始的，但實(shí)際的網(wǎng)頁設(shè)計(jì)中，可以根據(jù)需要，直接指定圖片的出現(xiàn)位置，這就用到了background-position，該屬性用于指定背景圖片在元素中的位置，屬性值的設(shè)置可以分為四類：絕對定位位置、百分比定義位置、垂直對齊值和水平對齊值。格式如下：{background-position:<length>|<percentage>|top|center|bottom|left|right}使用CSS美化背景2．設(shè)置背景圖片⑶background-position各屬性值和說明如表所示。屬性值說明<length>設(shè)置圖片與邊框在水平和垂直方向的距離長度，后跟長度單位<percentage>以頁面元素框的寬度和高度的百分比放置圖片top背景圖片頂部居中顯示center背景圖片居中顯示bottom背景圖片底部居中顯示left背景圖片左部居中顯示right背景圖片右部居中顯示使用CSS美化背景2．設(shè)置背景圖片⑶background-positionbackground-position屬性后面也可以有垂直對齊值和水平對齊值兩個(gè)屬性值，這樣可以同時(shí)決定水平與垂直位置。例設(shè)置圖片位置在右上角的代碼為：{background-position:topright;}例設(shè)置圖片位置在水平20像素、垂直30像素的代碼為：{background-position:20px30px;}使用CSS美化背景2．設(shè)置背景圖片⑷background-sizebackground-size屬性用來控制圖片的大小，格式如下：各屬性值和說明如表所示。{background-size:<length>|<percentage>|auto]{1,2}|cover|contain;}屬性值說明<length>由浮點(diǎn)數(shù)和單位標(biāo)識符組成的長度值<percentage>取值為0%-100%之間的值cover保持背景圖像本身的寬高比例，將圖片縮放到正好覆蓋所定義的背景區(qū)域contain保持圖像本身的寬高比，將圖片縮放到寬度或高度正好適應(yīng)背景區(qū)域使用CSS美化背景2．設(shè)置背景圖片⑸background-origin在默認(rèn)情況下，background-position屬性總是以元素左上角原點(diǎn)作為背景圖像的起始點(diǎn)，而用background-origin可以改變這種定位方式，格式如下：各屬性值和說明如表所示。{Background-origin:border|padding|content;}屬性值說明Border-box從border區(qū)域開始顯示背景padding-box從Padding區(qū)域開始顯示背景content-box從Content區(qū)域開始顯示背景使用CSS美化背景2．設(shè)置背景圖片⑹background-clip該屬性指定背景的繪制區(qū)域，格式如下：各屬性值和說明如表所示。{background-clip:border-box|padding-box|content-box;}屬性值說明border-box背景繪制在邊框方框內(nèi)（含邊框）padding-box背景繪制在邊框方塊內(nèi)（不含邊框）content-box背景繪制在內(nèi)容方框內(nèi)使用CSS美化背景2．設(shè)置背景圖片【例9-2】為網(wǎng)頁以及網(wǎng)頁元素設(shè)置背景圖片實(shí)例，代碼如下所示（示例文件9-2.html）。<style> body{ background-color:black; background-image:url(images/03.jpg); background-size:400px500px; background-position:0px200px; background-repeat:repeat-x; background-attachment:fixed; } div{ color:#ffffff; width:300px; border:10pxdashed#ffb90f; padding:35px; margin:150px; background-image:url(images/04.jpg); background-size:cover; background-clip:padding-box; }</style>設(shè)置了整個(gè)頁面的背景樣式，設(shè)置標(biāo)簽選擇器為“body”的樣式，用于聲明網(wǎng)頁的整個(gè)主體部分：設(shè)置了背景顏色設(shè)置為黑色，當(dāng)背景圖片覆蓋不到時(shí)，網(wǎng)頁將以黑色顯示；設(shè)置了背景圖片；設(shè)置了圖片大小為寬400像素、高500像素；設(shè)置了圖片位置距水平原點(diǎn)0像素、距垂直原點(diǎn)200像素；設(shè)置了圖片重復(fù)方式為橫向重復(fù)，即背景圖片在網(wǎng)頁中只在橫向重復(fù)平鋪；設(shè)置了圖片滾動(dòng)為不隨文字滾動(dòng)，所以當(dāng)下拉滾動(dòng)條的時(shí)候，背景圖片的位置并不發(fā)生變化。設(shè)置了div的樣式，該樣式應(yīng)用于網(wǎng)頁中所有的div標(biāo)簽：分別設(shè)置了文字顏色為白色、寬度為300像素、邊框?yàn)?0像素的#ffb90f顏色虛線、內(nèi)邊距為35像素、外邊距為150像素、背景圖片。設(shè)置了圖片大小為cover，即圖片保持寬高比例，自動(dòng)適應(yīng)背景區(qū)域，所以瀏覽時(shí)會看到兩個(gè)div中背景圖片的拉伸程度是不同的。設(shè)置了圖片的剪裁區(qū)域?yàn)閜adding-box，即從padding區(qū)域開始顯示背景。使用CSS美化背景2．設(shè)置背景圖片【例9-2】為網(wǎng)頁以及網(wǎng)頁元素設(shè)置背景圖片實(shí)例，代碼如下所示（示例文件9-2.html）。<body> <div> <h2>虞美人</h2> <p>春花秋月何時(shí)了，<br/>往事知多少。<br/>小樓昨夜又東風(fēng)，<br/>故國不堪回首月明中。<br/>雕欄玉砌應(yīng)猶在，<br/>只是朱顏改，<br/>問君能有幾多愁，<br/>恰似一江春水向東流。</p> </div> <div> <h2>水調(diào)歌頭</h2> <p>明月幾時(shí)有？<br/>把酒問青天。<br/>不知天上宮闕，<br/>今夕是何年。<br/>我欲乘風(fēng)歸去，<br/>又恐瓊樓玉宇，<br/>高處不勝寒。<br/>起舞弄清影，<br/>何似在人間？<br/>轉(zhuǎn)朱閣，<br/>低綺戶，<br/>照無眠。<br/>不應(yīng)有恨，<br/>何事長向別時(shí)圓？<br/>人有悲歡離合，<br/>月有陰晴圓缺，<br/>此事古難全。<br/>但愿人長久，<br/>千里共嬋娟。</p> </div></body>在chrome瀏覽器中預(yù)覽使用CSS美化背景2．設(shè)置背景圖片【例9-2】為網(wǎng)頁以及網(wǎng)頁元素設(shè)置背景圖片實(shí)例，代碼如下所示（示例文件9-2.html）。如果將CSS代碼中的background-clip屬性值設(shè)置為border-box（從邊框區(qū)域開始）或者content-box（從內(nèi)容區(qū)域開始），其瀏覽效果分別如圖所示。使用CSS美化背景2．設(shè)置背景圖片【例9-2】為網(wǎng)頁以及網(wǎng)頁元素設(shè)置背景圖片實(shí)例，代碼如下所示（示例文件9-2.html）。如果將CSS代碼中的background-clip語句改為:background-origin:border-box;（背景圖片從border區(qū)域開始），或者background-origin:padding-box;（背景圖片從padding區(qū)域開始），其瀏覽效果分別如圖所示。使用CSS美化邊框邊框就是元素的邊線，每個(gè)頁面元素的邊框可以從三個(gè)方面來描述：寬度、樣式和顏色，這三個(gè)方面決定了邊框的外觀，在CSS3中分別使用border-style、border-width和border-color三個(gè)屬性來設(shè)置。而邊框有上下左右四條，如果需要四條邊框設(shè)置不同的樣式，還需要分別指定。這些屬性和說明如表所示。分類屬性說明邊框樣式border-style所有邊框的樣式border-top-style上邊框樣式border-right-style右邊框樣式border-bottom-style下邊框樣式border-left-style左邊框樣式邊框顏色border-color所有邊框的顏色border-top-color上邊框顏色border-right-color右邊框顏色border-bottom-color下邊框顏色border-left-color左邊框顏色邊框?qū)挾萣order-width所有邊框的寬度border-top-width上邊框顏色border-right-width右邊框顏色border-bottom-width下邊框顏色border-left-width左邊框顏色簡寫屬性border把四個(gè)邊的三個(gè)屬性一起設(shè)置border-top把上邊框的三個(gè)屬性一起設(shè)置border-right把右邊框的三個(gè)屬性一起設(shè)置border-bottom把下邊框的三個(gè)屬性一起設(shè)置border-left把左邊框的三個(gè)屬性一起設(shè)置使用CSS美化邊框1.邊框樣式類屬性設(shè)置邊框樣式類屬性，格式如下：{border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;}其屬性值和說明如表所示。屬性值說明none無邊框dotted點(diǎn)線式dashed破折線solid直線doubled雙線groove槽線式ridge脊線式inset內(nèi)嵌效果outset突起效果例如設(shè)置所有邊框樣式都是實(shí)線型的代碼為：{border-style:solid;}例如設(shè)置上邊框樣式為雙線型的代碼為：{border-top-style:doubled;}使用CSS美化邊框2.邊框顏色設(shè)置邊框顏色的格式如下：{border-color:color;}color表示顏色，其顏色值通過十六進(jìn)制和RGB等方式設(shè)置。例如設(shè)置所有邊框顏色為紅色的代碼為：{border-color:red;}例如設(shè)置下邊框顏色為灰色的代碼為：{border-bottom-color:#eeeeee;}使用CSS美化邊框3.邊框?qū)挾仍O(shè)置邊框?qū)挾鹊母袷饺缦拢簕border-width:medium|thin|think|<length>;}其屬性值和說明如表所示。例如設(shè)置所有邊框都為細(xì)邊框的代碼為：{border-width:thin;}例如設(shè)置左邊框?qū)挾葹?像素的代碼為：{border-left-width:5px;}屬性值說明medium默認(rèn)值，中等寬度thin細(xì)邊框think粗邊框length自定義寬度使用CSS美化邊框4.邊框的簡寫屬性border等簡寫屬性集合了上面介紹的三種屬性，格式如下：{border:border-width|border-style|border-color;}三個(gè)屬性的順序可以自由調(diào)換。例如設(shè)置所有邊框?yàn)?0像素的紫色虛線的代碼為：{border:dashedpurple10px;}例如設(shè)置上邊框?yàn)榧哟值募t色雙線：{border-top:doubleredthink;}使用CSS美化邊框【例9-3】制作不同樣式的邊框?qū)嵗?，代碼如下所示（示例文件9-3.html）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="utf-8"> <title>不同的邊框類型</title> <style> p.none{border-style:none;border-color:black;border-width:1px;} p.dotted{border-style:dotted;border-color:pink;border-width:2px;} p.dashed{border-style:dashed;border-color:orange;border-width:3px;} p.solid{border-style:solid;border-color:yellow;border-width:4px;} p.double{border-style:double;border-color:green;border-width:5px;} p.groove{border-style:groove;border-color:blue;border-width:6px;} p.ridge{border-style:ridge;border-color:purple;border-width:7px;} p.inset{border-style:inset;border-color:ivory;border-width:8px;} p.outset{border-style:outset;border-color:red;border-width:9px;} p.difference{ border-top-style:outset;border-top-color:red;border-top-width:2px; border-bottom-style:outset;border-bottom-color:blue;border-bottom-width:4px; border-left-style:outset;border-left-color:green;border-left-width:6px; border-right-style:outset;border-right-color:yellow;border-right-width:8px; } p.easy{Border:black2pxdouble;} </style></head>使用CSS美化邊框【例9-3】制作不同樣式的邊框?qū)嵗?，代碼如下所示（示例文件9-3.html）。<body> <pclass="none">無邊框。</p> <pclass="dotted">虛線邊框。</p> <pclass="dashed">虛線邊框。</p> <pclass="solid">實(shí)線邊框。</p> <pclass="double">雙邊框。</p> <pclass="groove">凹槽邊框。</p> <pclass="ridge">壟狀邊框。</p> <pclass="inset">嵌入邊框。</p> <pclass="outset">外凸邊框。</p> <pclass="difference">四條邊框都不同。</p> <pclass="easy">用簡單寫法</p></body></html>在chrome瀏覽器中預(yù)覽使用CSS設(shè)置圓角邊框CSS3的border-radius屬性可用來定義邊框的圓角效果，格式如下：{border-radius:none|<length>{1,4}[/<length>{1,4}];}其中，none是默認(rèn)值，表示沒有圓角；<length>表示由浮點(diǎn)數(shù)和單位標(biāo)識符組成的長度值。例如設(shè)置圓角邊框?yàn)?0像素、圓角顯示為1/4個(gè)圓的代碼為：{border-radius:10px;}例如設(shè)置圓角的水平半徑是5像素、垂直半徑是50像素的代碼為：{border-radius:5px/50px;}例如設(shè)置沒有圓角的代碼為（只要參數(shù)中出現(xiàn)0，則為矩形，不顯示圓角）：{border-radius:0px;}使用CSS設(shè)置圓角邊框例如設(shè)置左上角圓角半徑為10像素、右上角圓角半徑為20像素、右下角圓角半徑為30像素、左下角圓角半徑為40像素的代碼為：{border-radius:10px20px30px40px;}如果最后一個(gè)值省略，左下角半徑與右下角相同，如果第三個(gè)值省略，右下角半徑與右上角相同，以此類推。除了上面的設(shè)置方法以外，還可以單獨(dú)給元素設(shè)置四個(gè)不同的圓角，屬性和說明如表所示。屬性說明border-top-right-radius右上角的圓角border-bottom-right-radius右下角的圓角border-bottom-left-radius左下角的圓角border-top-left-radius左上角的圓角使用CSS設(shè)置圓角邊框例如設(shè)置右上角的圓角為10像素的代碼為：{border-top-right-radius:10px;}例如設(shè)置右下角的圓角為20像素的代碼為：{border-bottom-right-radius:20px;}例如設(shè)置左下角的圓角為30像素的代碼為：{border-bottom-left-radius:30px;}例如設(shè)置左上角的圓角為40像素的代碼為：{border-top-left-radius:40px;}使用CSS設(shè)置邊框陰影在CSS3中，使用box-shadow屬性來設(shè)置邊框陰影，格式如下：{box-shadow:h-shadowv-shadowblurspreadcolorinset;}各屬性值和說明如表所示。例如設(shè)置水平陰影10像素、垂直陰影10像素、模糊距離5像素、陰影顏色為#88888888的代碼為：{box-shadow:10px10px5px#888888;}屬性值說明h-shadow水平陰影的位置，必需v-shadow垂直陰影的位置，必需blur模糊距離，可選spread陰影的尺寸，可選color陰影的顏色，可選inset將外部陰影改為內(nèi)部陰影，可選使用CSS設(shè)置圖片邊框在CSS3中，可以用border-image屬性設(shè)置對象的圖像邊框，格式如下：{border-image:border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat;}各屬性值和說明如表所示。屬性值說明border-image-source用在邊框的圖片路徑border-image-slice圖片邊框內(nèi)側(cè)偏移border-image-width圖片邊框?qū)挾萣order-image-outset邊框圖像區(qū)域超出邊框的量border-image-repeat圖像邊框平鋪（repeated）、鋪滿（rounded）或拉伸（streched）使用CSS設(shè)置圖片邊框【例9-4】制作不同樣式的邊框?qū)嵗?，代碼如下所示（示例文件9-4.html）。<style> body{ margin:30px; background-color:#E9E9E9; } .pic{ width:300px; padding:10px10px20px10px; background-color:white; box-shadow:10px10px5px#888888; border:15pxsolidtransparent; border-image:url(images/border4.jpg)3030round; } img{ border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; }</style>設(shè)置了整個(gè)頁面主體部分的樣式，標(biāo)簽選擇器為“body”：設(shè)置了網(wǎng)頁的內(nèi)邊距為30像素；設(shè)置了網(wǎng)頁的背景顏色為#E9E9E9。設(shè)置了類名為.polaroid的div塊的樣式，第12行設(shè)置了寬為300像素，第13行設(shè)置了內(nèi)邊距的大小，順序?yàn)樯嫌蚁伦?；?4行設(shè)置了背景顏色為白色；第15行定義了邊框陰影，水平方向?yàn)?0像素，垂直方向?yàn)?0像素，模糊距離為5像素，陰影顏色為#888888；第16行設(shè)置了邊框?qū)挾葹?5像素，線型為實(shí)線，顏色為透明；第17行設(shè)置了邊框圖片，上下方向內(nèi)側(cè)偏移為30像素，左右方向內(nèi)側(cè)偏移為30像素，邊框圖像重復(fù)方式為鋪滿。設(shè)置了圖片的圓角半徑大小，左上為20像素；右上為20像素；左下為10像素；右下為10像素。使用CSS設(shè)置圖片邊框【例9-4】制作不同樣式的邊框?qū)嵗?，代碼如下所示（示例文件9-4.html）。<body> <divclass="pic"> <imgsrc="images/02.jpg"alt="梅園亭"width="284"height="213"/> <h3class="caption">大唐芙蓉園燈會</h3> </div></body>在chrome瀏覽器中預(yù)覽使用CSS修飾表格1.border-collapse屬性border-collapse屬性用于設(shè)置是否將表格邊框折疊為單一邊框，各屬性值和說明如表所示。屬性值說明separate邊框會被分開，不會忽略border-spacing和empty-cells屬性collapse邊框會合并為一個(gè)單一的邊框，忽略border-spacing和empty-cells屬性inherit從父元素繼承border-collapse屬性的值使用CSS修飾表格2.border-spacing屬性border-spacing屬性用于設(shè)置分隔單元格邊框的距離，格式如下：{border-spacing:length[length];}length是規(guī)定相鄰單元的邊框之間的距離，使用px、cm等單位，不允許使用負(fù)值。如果定義一個(gè)length值，那么定義的是水平和垂直間距。如果定義兩個(gè)length值，那么第一個(gè)設(shè)置水平間距，第二個(gè)設(shè)置垂直間距。使用CSS修飾表格3.caption-side屬性caption-side屬性用于設(shè)置表格標(biāo)題的位置，各屬性值和說明如表所示。屬性值說明top默認(rèn)值。把表格標(biāo)題定位在表格之上。bottom把表格標(biāo)題定位在表格之下inherit規(guī)定應(yīng)該從父元素繼承caption-side屬性的值。使用CSS修飾表格4.empty-cells屬性empty-cells屬性用于設(shè)置是否顯示表格中的空單元格，各屬性值和說明如表所示。屬性值描述hide不在空單元格周圍繪制邊框。show在空單元格周圍繪制邊框。默認(rèn)。inherit規(guī)定應(yīng)該從父元素繼承empty-cells屬性的值。使用CSS修飾表格5.table-layout屬性table-layout屬性用于設(shè)置單元格是否自適應(yīng)其中的內(nèi)容，各屬性值和說明如表所示。屬性值說明automatic默認(rèn)。列寬度由單元格內(nèi)容設(shè)定。fixed列寬由表格寬度和列寬度設(shè)定。inherit規(guī)定應(yīng)該從父元素繼承table-layout屬性的值。使用CSS修飾表格【例9-5】用CSS修飾表格實(shí)例，代碼如下所示（示例文件9-5.html）。<style> table{ border-collapse:separate; border-spacing:10px; caption-side:top; empty-cells:show; table-layout:auto; }</style>表示邊框會被分開。改為border-collapse:collapse;內(nèi)部的邊框會合并為一條邊框設(shè)置單元格之間的距離是10像素。改為border-spacing:10px20px;表示單元格之間水平距離為10像素、垂直距離為20像素使用CSS修飾表格【例9-5】用CSS修飾表格實(shí)例，代碼如下所示（示例文件9-5.html）。<style> table{ border-collapse:separate; border-spacing:10px; caption-side:top; empty-cells:show; table-layout:auto; }</style>設(shè)置標(biāo)題在表格上方。改為caption-side:bottom;表示標(biāo)題在表格下方表示即使單元格內(nèi)沒有內(nèi)容，也顯示該單元格。改為empty-cells:hide;不顯示無內(nèi)容的單元格使用CSS修飾表格【例9-5】用CSS修飾表格實(shí)例，代碼如下所示（示例文件9-5.html）。<body> <tableborder="1"> <caption>標(biāo)題</caption> <tr> <td>第一季度</td> <td>收益100000元</td> </tr> <tr> <td>第二季度</td> <td></td> </tr> </table></body>在chrome瀏覽器中預(yù)覽使用CSS修飾表格【例9-5】用CSS修飾表格實(shí)例，代碼如下所示（示例文件9-5.html）。<body> <tableborder="1"> <caption>標(biāo)題</caption> <tr> <td>第一季度</td> <td>收益100000元</td> </tr> <tr> <td>第二季度</td> <td></td> </tr> </table></body>改為<tableborder="1"width="100%">使用CSS修飾表格【例9-5】用CSS修飾表格實(shí)例，代碼如下所示（示例文件9-5.html）。<body> <tableborder="1"> <caption>標(biāo)題</caption> <tr> <td>第一季度</td> <td>收益100000元</td> </tr> <tr> <td>第二季度</td> <td></td> </tr> </table></body>上面的CSS代碼改為：table-layout:fixed本行代碼改為<tableborder="1"width="100%">三項(xiàng)目實(shí)施結(jié)合前面學(xué)習(xí)的知識，用CSS修飾一個(gè)用于發(fā)送郵件的表單頁面，如圖所示。<style> body{ background-color:#9ccede; } table{ background-color:#add6e7; border-spacing:20px16px; border-radius:20px10px10px20px; } input,textarea{ line-height:25px; width:220px; border:none; padding-left:5px; color:#636363; }三項(xiàng)目實(shí)施打開Sublime編輯器，新建一個(gè)文件，保存文件名為“9-6.html”。第一步第二步Head標(biāo)簽內(nèi)的CSS代碼輸入如下：設(shè)置了整個(gè)網(wǎng)頁body的背景顏色，值為#9ccede。設(shè)置了input元素（文本框、按鈕）和textarea（文本域）的樣式：文本行高為25像素；元素寬度為220px；元素邊框?yàn)闊o，因?yàn)榇蟛糠直韱卧赜心J(rèn)的邊框，所以要根據(jù)需要去掉默認(rèn)邊框；元素的內(nèi)左邊距為5像素，所以當(dāng)在表單中輸入內(nèi)容的時(shí)候，文字與邊框的距離為5像素；文本顏色為#636363。設(shè)置了表格table的樣式：背景顏色為#add6e7；單元格間距為水平20像素及垂直16像素；四個(gè)圓角邊框，圓角半徑依次是：左上角20像素、右上角10像素、右下角10像素、左下角20像素。 b{ letter-spacing:2px; font-size:16px; } td.mail{ color:#52737f; background-image:url(images/xinfeng.png); background-repeat:no-repeat; background-position:0px25px; } input.btn{ width:87px; line-height:37px; border-radius:20px; background-color:#8cbdce; border:solid4px#ffffff; }</style>三項(xiàng)目實(shí)施第二步設(shè)置了“聯(lián)系我們“四個(gè)字的樣式。文字之間的距離為2像素；文字大小為16像素。設(shè)置了按鈕的樣式。寬度為87像素；文字行高為37像素；圓角半徑為20像素；背景顏色為#8cbdce；邊框?yàn)?像素的白色實(shí)線。設(shè)置了mail（“聯(lián)系我們”所在的單元格）的樣式。文字顏色為#52737f；背景圖片為mail.png；背景圖片的重復(fù)方式為不重復(fù)；背景圖片的位置為水平方向0像素、垂直方向25像素。三項(xiàng)目實(shí)施第三步在body標(biāo)簽中，先插入form表單，再在form表單中插入表格，在表格中填寫各表單元素。<body> <formmethod="post"action=""> <tablewidth="380px"> <tr> <tdclass="mail"width="80px"rowspan="6"valign="top"> <b>聯(lián)系我們</b> </td> <td><inputtype="text"value="姓名"></td> </tr> <tr> <td><inputtype="text"value="郵箱地址"></td> </tr> <tr> <td><inputtype="text"value="網(wǎng)站地址"></td> </tr> <tr> <td><textarearows="4"value="信息內(nèi)容"></textarea></td> </tr> <tr> <td><inputclass="btn"type="submit"name=""value="submit"></td> </tr> <tr> <tdheight="20px"></td> </tr> </table> </form></body>> 三項(xiàng)目實(shí)施再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步四項(xiàng)目拓展用CSS修飾一個(gè)后臺的表格頁面，效果如圖所示。四項(xiàng)目拓展新建html網(wǎng)頁文件，保存文件名為“9-7.html”。第一步第二步Head標(biāo)簽內(nèi)的CSS代碼輸入如下：<style> #top{ padding:15px; font-size:14px; background-image:url(images/header-bg.png); background-repeat:repeat-x; border-radius:5px; color:#ffffff; } #body-panel{ background-color:#f8f8f8; margin:04px; border:1pxsolid#bcbcbc; border-top:0; } .table1{ background-color:#f5f5f5; background-image:url(images/toolbar.png); background-repeat:repeat-x; border-spacing:0; }設(shè)置了ID名為“top”的div塊樣式。內(nèi)邊距為15像素；字體大小為14像素；背景圖片為header-bg.png；背景圖片的重復(fù)方式為水平方向重復(fù)；圓角半徑為5像素；文字顏色為白色。設(shè)置了ID名為“body-panel”的div塊樣式。背景顏色為#f8f8f8；外邊距為垂直方向0像素、水平方向4像素；邊框?yàn)?bcbcbc顏色的1像素實(shí)線；上邊框?yàn)?像素。設(shè)置了第一個(gè)表格table1的樣式。背景顏色為#f5f5f5；背景圖片為toolbar.png；背景圖片的重復(fù)方式為水平方向平鋪；單元格間距為0。四項(xiàng)目拓展第二步 .table1trtd{border-right:1pxsolid#d0d0d0;} .table1trtda{ padding:8px30px8px40px; color:#666666; text-decoration:none; display:block; } .accept,.delete,.print,.refresh,.update{background:no-repeat20px10px;} .accept{background-image:url(images/accept.png);} .delete{background-image:url(images/cross.png);} .print{background-image:url(images/printer.png);} .refresh{background-image:url(images/arrow_refresh.png);} .update{background-image:url(images/pencil.png);} .table2{ width:100%; border-top:1pxsolid#d0d0d0; border-collapse:collapse; border-spacing:0px; }設(shè)置了table1中的單元格右邊框?yàn)?d0d0d0顏色的1像素實(shí)線型。設(shè)置了table1中幾個(gè)超鏈接的背景圖片為不重復(fù)，并且位置為水平方向20像素、垂直方向10像素。設(shè)置了table1中的超鏈接樣式。設(shè)置了內(nèi)邊距，文字顏色#666666，下劃線為無，顯示方式為塊。分別設(shè)置了table1中的每個(gè)超鏈接的背景圖片。設(shè)置了第二個(gè)表格table2的樣式。表格寬度為100%；表格邊框?yàn)?d0d0d0顏色的1像素實(shí)線；表格邊框合并顯示；單元格間距為0。四項(xiàng)目拓展第二步 .table2theadth{ line-height:30px; background-color:#f5f5f5; background-image:url(images/table-header.png); background-repeat:repeat-x; background-position:leftbottom; border:solid2px#dddddd; text-align:center; } .table2tbodytd{ line-height:30px; border:solid2px#dddddd; text-align:center; } .table2.gradeC{ background-color:#f2f2f2; }</style>設(shè)置了第二個(gè)表格table2標(biāo)題行單元格的樣式。行高為30像素；背景顏色為#f5f5f5；背景圖片為table-header.png；背景圖片的重復(fù)方式為水平方向重復(fù)；背景圖片位置為水平方向居左、垂直方向在底部；單元格邊框?yàn)?dddddd顏色的2像素實(shí)線；文本對齊方式為居中對齊。設(shè)置table2主體部分單元格的樣式。文本行高為30像素；單元格邊框?yàn)?dddddd顏色的2像素實(shí)線；單元格文本居中對齊。設(shè)置偶數(shù)行的背景顏色為#f2f2f2。四項(xiàng)目拓展第三步<body> <divid="top"> <b>后臺頁面</b> </div> <divid="body-panel"> <tableclass="table1"> <tr> <td><ahref="#"class="accept">提交</a></td> <td><ahref="#"class="delete">刪除</a></td> <td><ahref="#"class="print">打印</a></td> <td><ahref="#"class="refresh">修改</a></td> <td><ahref="#"class="update">更新</a></td> </tr> </table>body標(biāo)簽內(nèi)的HTML代碼輸入如下：創(chuàng)建了一個(gè)1行5列的表格table1，每個(gè)單元格內(nèi)創(chuàng)建一個(gè)超鏈接。。創(chuàng)建了一個(gè)ID名為“top”的div塊，用于顯示標(biāo)題，標(biāo)題以加粗形式顯示。。創(chuàng)建另一個(gè)ID名為“body-panel”的div塊，用于顯示兩個(gè)表格。四項(xiàng)目拓展第三步 <tableclass="table2"> <thead> <tr> <th>是否質(zhì)檢</th> <th>產(chǎn)品名稱</th> <th>產(chǎn)品編號</th> <th>出庫數(shù)量</th> <th>采購單價(jià)</th> <th>出庫日期</th> </tr> </thead> <tbody> <tr> <td><inputtype="checkbox"/></td> <td>panel面板</td> <td>20180308001</td> <td>500</td> <tdclass="center">300</td> <tdclass="center">2016-05-06</td> </tr> 創(chuàng)建表格的標(biāo)題行。創(chuàng)建表格的主體部分。四項(xiàng)目拓展第三步 <trclass="gradeC"> <td><inputtype="checkbox"/></td> <td>panel面板</td> <td>20180308001</td> <td>500</td> <tdclass="center">300</td> <tdclass="center">2016-05-06</td> </tr> <tr> <td><inputtype="checkbox"/></td> <td>panel面板</td> <td>20180308001</td> <td>500</td> <tdclass="center">300</td> <tdclass="center">2016-05-06</td> </tr>創(chuàng)建表格的主體部分。四項(xiàng)目拓展第三步 <trclass="gradeC"> <td><inputtype="checkbox"/></td> <td>panel面板</td> <td>20180308001</td> <td>500</td> <tdclass="center">300</td> <tdclass="center">2016-05-06</td> </tr> <tr> <td><inputtype="checkbox"/></td> <td>panel面板</td> <td>20180308001</td> <td>500</td> <tdclass="center">300</td> <tdclass="center">2016-05-06</td> </tr> </tbody> </table> </div></body>創(chuàng)建表格的主體部分。四項(xiàng)目拓展再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步五項(xiàng)目小結(jié)本項(xiàng)目通過項(xiàng)目實(shí)施和項(xiàng)目拓展只做了表單頁面和表格頁面，學(xué)習(xí)了CSS如何設(shè)置背景和邊框，如何修飾表格和表單等元素，讓網(wǎng)頁更加美觀。五項(xiàng)目小結(jié)本項(xiàng)目知識點(diǎn)總結(jié)如表所示。屬性屬性值說明background-color

背景顏色background-imagenone|url(url)背景圖片background-repeatrepeat|repeat-x|repeat-y|no-reapeat背景圖片重復(fù)background-attachmentscroll|fixed背景圖片隨文字滾動(dòng)background-position<length>|<percentage>|top|center|bottom|left|right背景圖片位置background-size<length>|<percentage>|cover|contain背景圖片大小background-originborder|padding|content背景圖片的起始點(diǎn)background-clipborder-box|padding-box|content-box背景圖片繪制區(qū)域border

邊框?qū)傩詁order-stylenone|dotted|dashed|solid|doubled|groove|ridge|inset|outset邊框樣式五項(xiàng)目小結(jié)本項(xiàng)目知識點(diǎn)總結(jié)如表所示。屬性屬性值說明border-color

邊框顏色border-widthmediumthinthinklength邊框?qū)挾萣order-radiusnone|<length>{1,4}[/<length>{1,4}];}邊框圓角box-shadowh-shadow|v-shadow|blur|spread|color|inset邊框陰影border-imageborder-image-source圖片邊框border-image-sliceborder-image-widthborder-image-outsetborder-image-repeatborder-collapseseparate|collapse|inherit表格邊框是否折疊border-spacinglength[length]單元格邊框的距離caption-sidetop|bottom|inherit表格標(biāo)題的位置empty-cellshide|show|inherit是否顯示空白單元格table-

溫馨提示

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

最新文檔

評論

0/150

提交評論