一簡答題 1.什麼是盒子模型？盒子模型的屬性有那幾個？它們的作用分別是什麼？ 答：（1）CSS將網頁中所有元素都看成一個個盒子。 （2）盒子模型屬性有邊框、內邊距和外邊距。 （3）邊框設定網頁元素邊框的顏色、粗細和樣式；外邊距指與其他盒子之間的距離，也就是指網頁中元素與元素之間的距離，便於精確控制盒子的位置；內邊距用於控制內容與邊框之間的距離，以便精確控制內容在盒子中的位置。 2.盒子模型有哪幾種解析方式？它們有什麼區別？ 答：（1）content-box：預設值，盒子的寬度或高度 = border+padding+（margin）+ width/height。 （2）border-box：盒子的寬度或高度等於元素內容的寬度或高度。從盒子模型的介紹可知，這裡內容寬度或高度包含了元素的border、padding、內容的寬度或高度（此處的內容寬度或高度=盒子寬度或高度-border-padding）。 3.製作圖北大青鳥網站的中心開班資訊模組。要求如下： <頁面寬度250px，整體居中顯示，背景使用線性漸變及1px的灰色圓角邊框。 <標題左側的小圖示以背景圖片的方式實現，標題顏色為白色。 <使用無序實現開班資訊列表，列表前的小三角箭頭和下方的虛線均使用背景影象的方式實現。 <列表超連結文字顏色為灰色，無下劃線，當滑鼠懸浮在超連結文字上是，字型顏色改變無下劃線。 <頁面中涉及的盒子模型解析方式都使用border-box。

/初始化內外邊距/ body,div,ul,li{ padding: 0px; margin: 0px; } /設定頁面整體/ .div{ width: 250px; margin: 0 auto; border: 1px solid #d8d8d8; border-radius: 8px; box-sizing:border-box; background: linear-gradient(to bottom,#5bc1f9 ,#FFF,#FFF,#FFF,#FFF);/漸變/ } /設定標題/ .h2{ background: url("…/Semester1book3DJ6/bg.gif") 5px no-repeat; color: white; font-size: 14px; padding-left: 45px; margin: 10px 0px; font-weight:bold; height: 40px; line-height:40px; border-bottom: 1px solid #FFFFFF; } /設定列表

/ li{ list-style:none;/去前面的原點/ background: url("…/Semester1book3DJ6/dotBg.gif") -9px center no-repeat; width:220px; height:30px; padding-left: 10px; margin: 10px 0px; } /原來/ a{ color: #626262; text-decoration: none; } /懸浮時/ a:hover{ color: #F30; text-decoration: none; }

4.製作圖商品分類列表頁面。 <商品列表放在一個div中，<div的四邊框均為2px的橙色實線圓角邊框。 <用結構偽類選擇器選擇每個列表併為其加上背景圖每個列表下方1px的灰色虛線邊框，但是最後一個列表項沒有。 <文字超連結為黑色粗體，當滑鼠懸浮在超連結文字上變色，平切無下劃線。

/初始化內外邊距/ body,div,ul,li{ margin: 0px; padding: 0px; } li{ list-style:none; } /設定整體/ #div{ width: 200px; border: #fc9829 2px solid; border-radius:8px; box-sizing: border-box; } /設定寬度去除前面裝飾/ #div ul{ width: 190px; margin: 0px auto; } /設定列表/ #div li{ height:47px; font-size:12px; font-weight:bold; padding-left:50px; border-bottom:1px #929292 dotted; line-height:47px; box-sizing: border-box; } /未懸浮時/ #div a{ color: black; font-weight: bold; text-decoration:none; } /懸浮時/ #div a:hover{ color: #008bbf; text-decoration:none; } /設定列表背景/ #div li:nth-of-type(1){ background: url("…/Semester1book3DJ6/icon_01.jpg") 0px 0px no-repeat; } #div li:nth-of-type(2){ background: url("…/Semester1book3DJ6/icon_02.jpg") 0px 0px no-repeat; } #div li:nth-of-type(3){ background: url("…/Semester1book3DJ6/icon_03.jpg") 0px 0px no-repeat; } #div li:nth-of-type(4){ background: url("…/Semester1book3DJ6/icon_04.jpg") 0px 0px no-repeat; } #div li:nth-of-type(5){ background: url("…/Semester1book3DJ6/icon_05.jpg") 0px 0px no-repeat; } #div li:nth-of-type(6){ background: url("…/Semester1book3DJ6/icon_06.jpg") 0px 0px no-repeat; } #div li:nth-of-type(7){ background: url("…/Semester1book3DJ6/icon_07.jpg") 0px 0px no-repeat; } #div li:nth-of-type(8){ background: url("…/Semester1book3DJ6/icon_08.jpg") 0px 0px no-repeat; } #div li:nth-of-type(9){ background: url("…/Semester1book3DJ6/icon_09.jpg") 0px 0px no-repeat; } #div li:nth-of-type(10){ background: url("…/Semester1book3DJ6/icon_10.jpg") 0px 0px no-repeat; }

• 酒水、飲料
• 進口食品
• 休閒零食
• 地方特產
• 保健、衝調
• 糧油、生鮮
• 美容洗護
• 清潔洗滌
• 母嬰、紙品
• 家居百貨

5.製作權威課程免費體驗登入頁面。 <頁面文字顏色為白色，*的字型顏色為紅色。 <使用無序列表排版單元素。 <無序列表內容在頁面中居中顯示。 <“免費體驗”按鈕使用背景影象的方式實現。 <按語義化使用表單元素，且是圓角邊框。

body,div,ul,li{ margin: 0px; padding: 0px; } li { list-style-type:none; } .picture{ width: 312px; height: 353px; background: url("…/Semester1book3DJ6/bg.jpg") 0px 0px no-repeat; } .su{ width: 260px; margin: 0px auto; padding-top: 80px; font-size: 14px; color: white; box-sizing: border-box; } li{ height: 38px; line-height: 38px; } li span{ color: red; padding-right: 5px; } select{ border: 1px #7b7b7b solid; border-radius: 4px; } .button{ background: url("…/Semester1book3DJ6/btn.jpg") 0px 0px no-repeat; width:152px; height:49px; border:0px; cursor:pointer; } .male{ text-align:center; }

• *姓名：
• *郵箱：
• *電話：
• 性別： 請選擇 男 女
• 年齡： 請選擇 1 2