HTML5+CSS3網頁設計與制作設置邊框和陰影效果能使用border-spacing、table-layout、border-collapse屬性設置表格樣式。能使用border等相關屬性設置標簽的邊框樣式。能使用border-radius、box-shadow、outline屬性實現各種輪廓效果。綜合運用表格、邊框、陰影樣式完成D清單頁面元素的邊框和陰影格式設置。任務目標

設置邊框和陰影效果本次任務要求根據D清單頁面效果圖效果，使用CSS樣式代碼，在的基礎上設置該網頁元素中的邊框和陰影效果。任務包括：1、為D清單網頁的頂部按鈕設置邊框、陰影效果。2、美化頁面中高級會員的表格，為其設置邊框效果。3、完善聯系我們中的表單元素邊框、輪廓設置。任務描述

設置邊框和陰影效果要完成網頁邊框和陰影效果的設置，需要：學習表格屬性的樣式設置；學習標簽邊框、輪廓樣式的設置；分析D清單頁面中的邊框、陰影樣式，正確運用邊框、陰影樣式完成D清單網頁元素的邊框和陰影效果設置。D清單網頁邊框和陰影效果分析如圖2-5-1所示。任務分析

設置邊框和陰影效果任務分析圖2-5-1D清單網頁邊框和陰影網頁效果

設置邊框和陰影效果知識與技能準備表格由<table><tr><td>三層結構組成，HTML標簽本身并不能修飾好看的表格，而CSS表格屬性可以極大的改善表格的外觀。1.1border-collapse：邊框獨立性設置

取值：separate|collapseseparate：默認值，邊框獨立collapse：相鄰邊被合并1、表格屬性的樣式設置語法：border-collapse:關鍵詞;圖2-5-2表格邊框獨立與合并效果知識與技能準備1.2table-layout：表格布局方式table-layout屬性用來顯示表格單元格、行、列的算法規則。該屬性指定完成表格布局時所用的布局算法。

取值：separate|collapse取值：auto（默認）|fixedauto：自動表格布局方式，列寬由單元格內容設定；如設定某個單元格寬度為100px，但結果可能并不是100px。由于該方式需要在確定最終的布局之前訪問表格中的所有內容，這會需要較長時間。fixed：固定表格布局方式，列寬由表格寬度和列寬度設定。表格的整體寬度高度是由表格及單元格的邊框、單元格間距，單元格的填充和單元格的寬高度決定的，與單元格的內容無關。這個布局方式下在接收到第一行后就可以顯示表格。1、表格屬性的樣式設置語法：table-layout:關鍵詞;知識與技能準備通常情況下表格不設置自適應而設置成固定值，不同布局方式下的表格總寬度有何區別，表格所有設置都相同，只有table-layout取值不同時，表格總寬度計算詳解。

1、表格屬性的樣式設置CSS代碼：1234567891011table{ width:300px; table-layout:auto;/*只更改這個參數值*/ border-collapse:collapse; border:solid1px#666;}tabletd,tableth{width:100px;padding:5px;border:solid1px#666;}圖2-5-4表格自動布局與固定布局總寬度的計算知識與技能準備1.3border-spacing：單元格間距取值：用px定義行和單元格的邊框在橫向和縱向上的間距，不允許為負值。當表格邊框屬性是合并獨立的情況下該屬性失效。如果只填寫一個參數值，該值同時用于橫向和縱向間距；如果填寫兩個參數，第一個用于橫向間距，第二個用于縱向間距。1、表格屬性的樣式設置語法：border-spacing:橫向間距縱向間距;圖2-5-5表格單元格間距設置效果知識與技能準備1.4caption-side：表格標題的位置取值：top|bottomtop：指定caption在表格的上方bottom：指定caption在表格的下方caption-side屬性設置表格的caption對象是位于表格的哪一方。1、表格屬性的樣式設置語法：caption-side:關鍵詞;圖2-5-6表格標題位置的效果課堂練習2-5-1制作如下圖的表格樣式創建一個4行2列的表格，合并邊框線，邊框線顏色為淺灰色，表格標題在表格上方進行顯示，表格寬設置為300px，表格的背景色設置為#F5F5DC，第一行的背景顏色設置為深灰色，文字顏色為白色，表格行高設置為30px，單元格有5px的內補白。表格的文字全部居中顯示。顯示效果如圖2-5-7所示：圖2-5-7表格的簡單設置課堂練習2-5-1制作如下圖的表格樣式HTML代碼：CSS代碼：12<table><caption>2019年……</caption><trclass="tr1"><td>序號</td><td>電影名稱</td></tr><tr><td>1</td><td>飛馳人生</td></tr><tr> <td>2</td> <td>流浪地球</td> </tr> <tr> <td>3</td> <td>反貪風暴4</td></tr></table>123table{text-align:center; width:300px; border-collapse:collapse;/*合并單元格*/ background-color:#F5F5DC; /*table背景色*/}td,th{height:30px;padding:5px;}.tr1{background:#555555;/*第一行背景色*/color:white;/*第一行文字顏色*/}表格的整體背景顏色設置為#F5F5DC，而第一行的<tr>標簽設置為深灰色背景，由于tr標簽是table標簽的子標簽，所以最終第一行的背景顏色是深灰色。知識與技能準備2.1border-width：邊框寬度

取值：用px作為邊框的厚度，不允許為負值。關鍵詞：thin：定義默認寬度值為1px的邊框。medium：定義默認寬度值為3px的邊框。thick：定義默認寬度值為5px的邊框。

2.2border-style：邊框樣式取值：關鍵詞。注意：該屬性值默認是none，所以要標簽中出現邊框，必須要指定其他關鍵詞取值才能使邊框寬度和邊框顏色取值生效。2、標簽的邊框樣式設置語法：border-width:值|關鍵詞;語法：border-style:關鍵詞;知識與技能準備2.3border-color：邊框顏色取值：十六進制色、rgb色等顏色值，詳見上一任務的背景顏色的取值介紹。2.4border：邊框綜合屬性

取值：綜合屬性各值之間用空格隔開，各屬性值不分先后順序，邊框寬度和顏色屬性可選填，如果不填寫默認值是medium、black，邊框樣式屬性的默認值是none，所以要加邊框的情況下必須指定該屬性值是除none以外的值。2、標簽的邊框樣式設置語法：border-color:顏色值;語法：border：邊框寬度樣式顏色;圖2-5-8邊框綜合屬性效果圖2-5-9邊框各屬性簡寫多個參數值效果知識與技能準備2.5邊框單獨設置標簽邊框是有上、右、下、左四邊的，除了可以設置每個簡寫屬性的各個參數不同之外，其實邊框屬性可以針對不同方向、不同屬性單獨設置的，如：border-top-width、border-top-style、border-top-color、border-right-width、border-right-style、border-right-color、border-bottom-width、border-bottom-style、border-bottom-color、border-left-width、border-left-style、border-left-color。四邊邊框也可以做綜合設置來改變，如：border-top、border-right、border-bottom、border-left。2、標簽的邊框樣式設置圖2-5-10邊框屬性綜合或簡寫屬性效果使用表格標簽制作網頁效果，如圖2-5-11所示，網頁背景圖片覆蓋窗體，離窗體上邊距離50px處制作表格1，表格1居中顯示，導航菜單適當填充內補白，制作四個導航菜單，邊框顏色為#3bc0fd，背景色為透明度為50%的黑色。當前頁導航背景色是白色，字體顏色為#3bc0fd。離導航下方50px處制作表格2，表格2占滿整屏，單元格內適當填充內補白，第二列占頁面的80%寬，左右各有一條5px的邊框線。課堂練習2-5-2用表格標簽制作如下圖的頁面效果圖2-5-11關于我們頁面效果圖課堂練習2-5-2用表格標簽制作如下圖的頁面效果HTML代碼：123456789101112131415161718<tableclass="t01"> <tr> <td>HOME</td> <td>APPROVED</td> <tdclass="bg">ABOUTUS</td> <td>CONTACT</td> </tr></table><tableclass="t02"> <tr> <td></td> <tdclass="t2"><h1>ABOUTUS</h1> <Loremipsumdolorsitamet.</p></td> <td></td> </tr></table>課堂練習2-5-2用表格標簽制作如下圖的頁面效果CSS代碼：CSS代碼：12345678910111213141516171819body{ margin:0; background:url(images/home-banner.jpg)no-repeat00/cover;}table{ border-collapse:collapse; background-color:rgba(0,0,0,0.5); color:white;}.t01{ margin:50pxauto;}.t01td{ padding:030px; height:50px; line-height:50px; border:1pxsolid#3bc0fd;}20212223242526272829303132333435.t01.bg{ background:rgba(255,255,255,1); color:#3bc0fd;}.t02{ width:100%;}.t02td{padding:20px0;}.t02.t2{width:80%;border-left:5pxsolid#3bc0fd;border-right:5pxsolid#3bc0fd;padding-left:15px;}知識與技能準備3.1border-radius：圓角取值：用px或%作為長度單位。當使用%作為單位時，是以標簽的寬高作為參考。說明：（1）border-radius:圓角半徑;這里提供1-4個參數，參數之間用空格隔開。3、標簽輪廓的樣式設置圖2-5-12水平與垂直半徑相同時圓角參數效果語法：（1）border-radius:圓角半徑;（2）border-radius:水平方向圓角半徑/垂直方向圓角半徑;知識與技能準備注意：如圖2-5-13所示紅色虛線框是該標簽所占的網頁空間，border-radius屬性只是改變了標簽的外觀，圓角邊框不占用網頁空間。（2）border-radius:水平方向圓角半徑/垂直方向圓角半徑;提供2-8個參數值。注意：圓角邊框還可以分拆成獨立屬性，有：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四個。3、標簽輪廓的樣式設置圖2-5-13圓角邊框標簽所占網頁空間圖2-5-14水平與垂直半徑不相同時圓角參數效果圖2-5-15圓角邊框獨立屬性效果打開課堂練習2-5-2，根據圖2-5-16所示，制作出介紹模塊，左側有一個文字介紹框，右側是相應文字的圖片介紹，文字框第一行和第三行及圖片都做了圓角效果。該模塊距上一個內容區20px的距離，文字框中有適當的內補白進行填充，圖片大小以400px的寬度等比較縮放，圖片做了2px的邊框效果。課堂練習2-5-3制作如下圖的頁面效果圖2-5-16關于我們頁面介紹模塊效果圖HTML代碼：12345678<divclass="img"> <divclass="tb"> <pclass="br">COMMUNITY</p> <p>KRABIISLAND</p> <pclass="br1">SURFING</p> </div> <imgsrc="images/gallery.jpg"alt=""></div>課堂練習2-5-3制作如下圖的頁面效果圖2-4-8背景圖標設置效果CSS代碼：123456789101112131415161718img{ width:80%;margin:20pxautopadding:030px;}.tb{float:left;}.tbp{border:1pxsolid#3BC0FD;margin:0;height:40px;line-height:40px;color:white;padding:0px30px;width:200px;margin-top:-1px;}192021222324252627282930313233.tb.br{border-radius:5px5px00;background:white;color:#3BC0FD;}.tb.br1{border-radius:005px5px;}.imgimg{width:400px;float:left;border-radius:10px;margin-left:100px;border:2pxsolid#3BC0FD;}知識與技能準備3.2border-shadow：陰影取值：默認值是none，無陰影。該屬性中的參數必須要按順序填寫，前四個參數值可以用px作為單位。模糊半徑、陰影大小和inset是選填參數。背景圖片可以進行多圖片疊加，陰影也可以進行疊加，同樣是每個陰影之間用逗號隔開，而陰影先填寫的位于最上層。3、標簽輪廓的樣式設置圖2-5-17標簽陰影效果圖2-5-18多陰影疊加效果語法：box-shadow:陰影水平偏移值垂直偏移值模糊半徑陰影大小陰影顏色inset;知識與技能準備3.3outline：輪廓取值：默認值是none，無陰影。該屬性中的參數必須要按順序填寫，前四個取值：輪廓邊框的寬度、樣式、顏色用法和border完全一樣，這里是標簽輪廓的綜合屬性，也可以像border那樣設置獨立屬性，輪廓和邊框的區別在于輪廓不能拆分成四邊進行設置，只能四邊完全一樣，而且outline屬性不占網頁空間，不會影響標簽的大小。這里值得注意的是，輪廓不能做圓角效果。3、標簽輪廓的樣式設置圖2-5-19輪廓效果語法：outline:輪廓邊框寬度樣式顏色;課堂練習2-5-4制作如下圖的頁面效果如圖2-5-19所示，使用邊框各屬性制作一個信息頁面，左上角LOGO要求做圓對角圖標，邊框線2px的#ADFF2F，背景顏色是有透明度的黑色。下面三個信息框，是用多陰影效果做出來的，三個圓的背景顏色分別是：#f7a613、#2196f3、#ef1861。圓也同樣做了陰影效果。因為版面的問題，html代碼省略了兩個信息框的代碼，原理一樣。CSS中窗體背景等前面已經講過的內容不作解釋，只把部分重要代碼寫出。圖2-5-20信息頁面效果圖課堂練習2-5-4制作如下圖的頁面效果HTML代碼：CSS代碼：123456789101112131415<header> <imgsrc="images/leaf.png"alt=""> GardenCare</header><article>/*這里只做一個信息框，后面兩個省略*/ <h3>SupportTeam</h3> <divclass="text"> <pclass="left">Loremipsumdolorsitamet,consectetueradipiscingelit.</p> <pclass="rightorange">HedgeTrimming</p> </div></article>123456789101112header{/*LOGO部分代碼*/border:2pxsolidgreenyellow;border-radius:80px0;/*對角的圓角參數與高同樣大*/padding:20px50px;background-color:rgba(0,0,0,0.8);margin:50px2%;}headerimg{width:30px;vertical-align:middle;/*垂直居中*/}課堂練習2-5-4制作如下圖的頁面效果CSS代碼：1234567891011121314151617article{width:30%;margin:50px0%50px2%;box-shadow:005px2px#999,/*外陰影*/00100px20pxrgba(0,0,0,0.6)inset;min-height:180px;/*最小高度*/}.text.right{width:90px;height:90px;border-radius:50%;/*前三句實現圓形效果*/box-shadow:02px5px3px#666;/*外陰影*/}.orange{background-color:#f7a613;}每個信息框大小都一個，避免文字多少會有影響高度，這里作統一高度設置（min-height:180px）。設置元素的高寬（width和height）屬性值相等、圓角（border-radius）為50%可實現圓形，信息框用內陰影實現蒙版效果。這里也是部分代碼。任務實施為D清單網頁的頂部、按鈕設置邊框、陰影效果，并美化頁面中的表格、表單元素。1、為“header”模塊設置陰影效果。顯示效果如圖2-5-21所示：圖2-5-21header模塊陰影效果CSS代碼：123456header{padding:20px;border-bottom::1pxsolid#e7e7e7;/*邊框的設置*/box-shadow:01px5pxrgba(43,48,51,0.5);/*陰影效果*/margin-bottom:2px;/*下邊界設置后陰影效果就會顯示*/}任務實施2、home模塊的超鏈接設置邊框和背景，做成按鈕的樣式效果。顯示效果如圖2-5-22所示：圖2-5-22home模塊超鏈接的邊框和背景效果HTML代碼：CSS代碼：12345678<articleclass="centerhome"> <h1>達成更多用心生活</h1> <p>與全球千萬用戶一起，在D清單中記錄和規劃大小事務。用更少的時間達成目標，從冗雜的待辦事項中解脫出來。</p> <ahref="#">100%免費-下載應用</a></article>123456789.homea{ display:inline-block; /*內聯塊*/ padding:10px15px; /*文字與邊框的間距*/ color:white; border-radius:5px;background-color:rgb(51,122,183);text-decora:none;font-weight:bolder;}任務實施apply和member模塊中的超鏈接效果設置如下，以apply模塊為例：顯示效果如圖2-5-23所示：圖2-5-23apply模塊超鏈接的邊框和背景效果HT