HTML 第六章 作業
阿新 • • 發佈：2018-12-19
課後作業
1.什麼是盒子模型？盒子模型的屬性有哪幾個？他們的作用分別是什麼？
盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型 內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模式都具備這些屬性 盒子模型邊框（border）(設定盒子上下左右4條邊的邊框) 屬性：border-width|border-style|border-color 盒子模型的內邊距（padding）(設定盒子的裡面的上下左右4條的邊距) padding-top:上內邊距 padding-right:右內邊距 padding-bottom:下內邊距 padding-left:左內邊距 盒子模型的外邊距（margin）(設定盒子的外面的上下左右4條的邊距) margin-top:上外邊距 margin-right:右外邊距 margin-bottom:下外邊距 margin-left:左外邊距
2.盒子模型有哪幾種解析方式？他們有什麼區別？
盒子有兩種解析方式：
當我們在樣式表輸入box-sizing時，會顯示border-box和content-box，第一種是邊框盒子尺寸，第二種是內容尺寸
當我們給一個元素設定尺寸時，預設設定的是元素內容的尺寸，也就是content-box，這種在後期佈局時會有很多不便
而當我們用border-box時，我們設定的尺寸實際等於：內容尺寸+兩邊的內邊距+兩邊的邊框寬度
3.製作北大青鳥網站的中心開班資訊版塊
HTML程式碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>中心開班資訊</title> <link rel="stylesheet" type="text/css" href="css/new_file4.css"/> </head> <body> <div id="nav"> <h1 class="h1">中心開班資訊</h1> <ul> <li><a href="#">8月12日：學歷+技能班</a></li> <li><a href="#">8月16日：高考特招班</a></li> <li><a href="#">8月23日：Java精英班</a></li> <li><a href="#">8月31日：學士後強化班</a></li> <li><a href="#">9月5日：大學生就業班</a></li> <li><a href="#">9月9日：企業定向委培班</a></li> <li><a href="#">9月16日：網路營銷強化班</a></li> </ul> </div> </body> </html>
CSS樣式:
h1, ul, li { margin: 0px; padding: 0px; } #nav { width: 250px; box-sizing: border-box; margin: auto; border: 1px solid gray; border-radius: 8px; background: linear-gradient(to bottom, #5EC2F9, #ffffff, #FFFFFF, #ffffff,#ffffff); } h1 { color: white; font-size: 16px; border-bottom: 1px solid white; padding: 8px; background: url(../img/bg.gif)10px no-repeat; text-indent: 2.5em; } ul { width: 220px; } li { font-size: 16px; list-style-type: none; background: url(../img/dotBg.gif)0px 2px no-repeat; margin-top: -6px; padding: 8px 18px; } ul li:last-of-type { margin-bottom: 10px; } a { color: gray; text-decoration: none; } a:hover { color: orangered; }
4.製作商品分類列表頁面
HTML程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品分類列表頁</title>
<link rel="stylesheet" type="text/css" href="css/new_file5.css"/>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">酒水、飲料</a></li>
<li><a href="#">進口食品</a></li>
<li><a href="#">休閒零食</a></li>
<li><a href="#">地方特產</a></li>
<li><a href="#">保健、衝調</a></li>
<li><a href="#">糧油、生鮮</a></li>
<li><a href="#">美容洗護</a></li>
<li><a href="#">清潔洗滌</a></li>
<li><a href="#">母嬰、紙品</a></li>
<li><a href="#">家居百貨</a></li>
</ul>
</div>
</body>
</html>
CSS樣式:
#nav {
border: 2px solid orange;
border-radius: 8px;
width: 200px;
padding: 3px;
height: 479px;
}
a {
color: black;
text-decoration: none;
}
a:hover{
color: orangered;
}
li {
list-style-type: none;
font-size: 14px;
font-family: "微軟雅黑";
margin-left: -40px;
padding: 0px;
}
ul li:nth-of-type(1) {
margin-top: -18px;
background-image: url(../img/icon_01.jpg);
background-repeat: no-repeat;
line-height: 48px;
text-indent: 3.5em;
border-bottom: 1px dashed;
}
ul li:nth-of-type(2) {
background-image: url(../img/icon_02.jpg);
background-repeat: no-repeat;
line-height: 50px;
text-indent: 3.5em;
border-bottom: 1px dashed;
}
ul li:nth-of-type(3) {
background-image: url(../img/icon_03.jpg);
background-repeat: no-repeat;
line-height: 48px;
text-indent: 3.5em;
border-bottom: 1px dashed;
}
ul li:nth-of-type(4) {
background-image: url(../img/icon_04.jpg);
background-repeat: no-repeat;
line-height: 45px;
text-indent: 3.5em;
border-bottom: 1px dashed;
}
ul li:nth-of-type(5) {
background-image: url(../img/icon_05.jpg);
background-repeat: no-repeat;
line-height: 48px;
text-indent: 3.5em;
border-bottom: 1px dashed;
}
ul li:nth-of-type(6) {
background: url(../img/icon_06.jpg);
background-repeat: no-repeat;
line-height: 47px;
text-indent: 3.5em;
border-bottom: 1px dashed;
}
ul li:nth-of-type(7) {
background-image: url(../img/icon_07.jpg);
background-repeat: no-repeat;
line-height: 47px;
text-indent: 3.5em;
border-bottom: 1px dashed;
}
ul li:nth-of-type(8) {
background-image: url(../img/icon_08.jpg);
background-repeat: no-repeat;
line-height: 48px;
text-indent: 3.5em;
border-bottom: 1px dashed;
}
ul li:nth-of-type(9) {
background-image: url(../img/icon_09.jpg);
background-repeat: no-repeat;
line-height: 48.3px;
text-indent: 3.5em;
border-bottom: 1px dashed;
}
ul li:nth-of-type(10) {
background-image: url(../img/icon_10.jpg);
background-repeat: no-repeat;
line-height: 46px;
text-indent: 3.5em;
}
5.製作權威課程免費體驗登入頁面
HTML程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>免費體驗登陸頁面</title>
<link rel="stylesheet" type="text/css" href="css/課後作業.css" />
</head>
<body>
<div>
<form action="#" method="post">
<p><span>* </span>姓名<a>:</a> <input type="text" name="text" id="text" /></p>
<p><span>* </span>郵箱<a>:</a> <input type="email" name="email" id="email" /></p>
<p><span>* </span>電話<a>:</a> <input type="text" name="text" id="text" /></p>
<p>
性別<a>:</a>
<select name="id">
<option value="">請選擇</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</p>
<p>
年齡<a>:</a>
<select name="id">
<option value="">請選擇</option>
<option value="1">16</option>
<option value="2">17</option>
<option value="3">18</option>
<option value="4">19</option>
<option value="5">20</option>
</select>
</p>
<p><input type="image" src="img/btn.jpg" /></p>
</form>
</div>
</body>
</html>
CSS樣式:
body {
background-image: url(../img/bg.jpg);
background-repeat: no-repeat;
}
body div:first-of-type {
color: white;
width: 350px;
box-sizing: border-box;
margin-top: 35px;
text-align: center;
padding: 35px 25px 50px 0px;
font-size: 16px;
}
P span {
margin-left: -45px;
}
span {
color: red;
}
input{
border-radius: 4px;
line-height: 20px;
width: 200px;
}
select {
border-radius: 5px;
}
form p:nth-of-type(4),
form p:nth-of-type(5) {
padding-right: 170px;
}
a {
margin-left: 4px;
margin-right: 4px;
font-weight: 900;
}