Web前端開發課件 項目九 CSS 3修飾表格表單_第1頁
Web前端開發課件 項目九 CSS 3修飾表格表單_第2頁
Web前端開發課件 項目九 CSS 3修飾表格表單_第3頁
Web前端開發課件 項目九 CSS 3修飾表格表單_第4頁
Web前端開發課件 項目九 CSS 3修飾表格表單_第5頁
已閱讀5頁，還剩63頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

邊框屬性border-stylenone|dotted|dashed|solid|doubled|groove|ridge|inset|outset邊框樣式五項目小結本項目知識點總結如表所示。屬性屬性值說明border-color

邊框顏色border-widthmediumthinthinklength邊框寬度border-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表格標題的位置empty-cellshide|show|inherit是否顯示空白單元格table-

溫馨提示

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

評論

0/150

提交評論