邊框：
邊框的顏色：border-color
1.border-top-color:red;:上邊框顏色
2.border-right-color:red;:右邊框顏色
3.border-bottom-color:red;:下邊框顏色
4.border-left-color:red;:左邊框顏色
5.border-color: #0d7114;:四個(gè)邊框同一顏色
6.border-color: #0d7114 #000;:上下邊框,左右邊框
7.border-color: #0d7114 #000 #f00;:上邊框,左右邊框,下邊框
8.border-color: #0d7114 #000 #f00 #00f;:上邊框,右邊框,下邊框,左邊框
事例：
div{
border: 10px solid;
width: 250px;
height: 250px;
border-color: orange red blue green;
/*上 右 下 左*/
/*border-color: orange red blue;*/
/*上 左右 下*/
}
邊框樣式： border-style
1.border-top-style: solid;上邊框?qū)嵕€
2.border-right-style: dotted; 右邊框短虛線
3.border-bottom-style: dashed; 下邊框長(zhǎng)虛線
4.border-left-style: double; 左邊框雙實(shí)線
5.border-style: solid dotted dashed double; 上哑舒，右足丢，下植榕，左
總結(jié)：border:1px solid red;
事例：
div{
/*border-style:dashed; /!* 長(zhǎng)虛線 *!/*/
/*/!*border-style:dotted; /!* 短虛線 *!/*/
/*/!*border-style:solid; /!* 單實(shí)線 *!/*/
border-style:double; /* 雙實(shí)線 */
width: 120px;
height: 120px;
}
外邊距：margin
1.margin-top:1px;上邊框外邊距
2.margin-right:1px;右邊框外邊距
3.margin-bottom:1px;下邊框外邊距
4.margin-left:1px;左邊框外邊距
5.margin:1px 2px 3px 4px;上再沧，右，下尊残，左
6.margin: 0px auto;網(wǎng)頁(yè)居中對(duì)齊（塊元素炒瘸，固定寬度）
內(nèi)邊距：padding
1.padding-top:1px;上邊框內(nèi)邊距
2.padding-right:1px;右邊框內(nèi)邊距
3.padding-bottom:1px;下邊框內(nèi)邊距
4.padding-left:1px;左邊框內(nèi)邊距
5.padding:1px 2px 3px 4px;上，右寝衫，下顷扩，左
div{
border:dashed 5px orange;
width: 120px;
height: 120px;
/*margin: 40px;*/
margin: 0 auto;
padding: 40px;
}
圓角邊框：border-radius: 20px 10px 50px 30px;從左定點(diǎn)開始順時(shí)針排列
圓形：border-radius: 50%;
盒子陰影：box-shadow:inset x-offset y-offset blur-radius color;
inset:陰影類型
x-offset：X軸位移
y-offset：Y軸位移
blur-radius：模糊半徑
color：模糊顏色
利用上面的知識(shí)點(diǎn)慰毅，和前面幾天學(xué)習(xí)的內(nèi)容隘截。
(第五章 美化網(wǎng)頁(yè)元素http://www.reibang.com/p/924190ee789a)
完成下面作業(yè)：
作業(yè)1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>北大青鳥課程導(dǎo)航</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body {
font-family: 楷體;
width: 380px;
}
a{
text-decoration: none;
color: black;
}
li{
list-style-type: none;
}
div{
margin-left: 150px;
margin-top: 15px;
border:1px solid #aacbee ;
background-color: #f5f9fc;
}
.titles{
font-size: 20px;
color: #1F376D;
background: url(../images/ch20.2.gif) 1px center no-repeat;
text-indent: 25px;
line-height: 40px;
}
li{
background: url(../images/ch20.1.gif )right no-repeat;
border-top: solid 1px #aacbee;
line-height: 30px;
font-size: 20px;
text-indent: 8px;
margin: 0px 4px;
}
</style>
</head>
<body>
<div id="course_list">
<h1 class="titles">課程導(dǎo)航</h1><ul>
<li class="current"><a href="#">ACCP 軟件工程師</a></li>
<li><a href="#">BTEST 軟件測(cè)試工程師</a></li>
<li><a href="#">BENET 網(wǎng)絡(luò)工程師</a></li>
<li><a href="#">JBNS 網(wǎng)站工程師</a></li>
<li><a href="#">ACCP 啟蒙星</a></li>
<li><a href="#">ANDROID 軟件工程師</a></li>
<li><a href="#">JAVA 軟件工程師</a></li>
<li><a href="#">.NET 軟件工程師</a></li>
<li><a href="#">網(wǎng)絡(luò)營(yíng)銷</a></li>
</ul>
</div>
</body>
</html>
結(jié)果如圖所示：
作業(yè)2：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>商品分類</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body {
background-color: #808080;
}
div{
width: 300px;
background-color: white;
}
h1{
background-color: black;
font-size: 15px;
line-height: 30px;
color: white;
text-indent: 20px;
}
dt{
line-height: 40px;
}
dd{
border-bottom:dashed 1px;
line-height: 40px;
padding-left: 30px;
}
dt:nth-of-type(1) {
background: url(../images/icon_01.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(2) {
background: url(../images/icon_02.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(3) {
background: url(../images/icon_03.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(4) {
background: url(../images/icon_04.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(5) {
background: url(../images/icon_05.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(6) {
background: url(../images/icon_06.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(7) {
background: url(../images/icon_07.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(8) {
background: url(../images/icon_08.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(9) {
background: url(../images/icon_09.gif) 0px center no-repeat;
text-indent: 30px;
}
</style>
</head>
<body>
<div id="product">
<h1>全部分類</h1>
<dl>
<dt>護(hù)膚</dt>
<dd>潔面 化妝水 噴霧 美容液 眼霜<br/>
眼部精華 眼膜 面膜 面膜貼<br/>
水洗面膜 免洗面膜 精華 精油<br/>
凝露 乳液 面霜 日霜 晚霜
</dd>
<dt>彩妝</dt>
<dd>卸妝 防曬 隔離 BB霜 粉底 粉餅<br/>
睫毛膏 眼影 唇彩 腮紅 眼線筆<br/>
底妝 遮瑕 蜜粉 眉筆 美甲
</dd>
<dt>香氛</dt>
<dd>男香 女香 小Q裝 中性香水</dd>
<dt>身體護(hù)理</dt>
<dd>洗發(fā) 護(hù)發(fā) 沐浴 身體乳 手足護(hù)理<br/>
護(hù)手霜 纖體 身體精油 頸部護(hù)理<br/>
個(gè)人護(hù)理 衛(wèi)生用品 脫毛
</dd>
<dt>禮盒套裝</dt>
<dd>護(hù)膚套裝 身體護(hù)理套裝 彩妝套裝 <br/>
旅行裝 香水套裝 男士套裝
</dd>
<dt>美容工具</dt>
<dd>護(hù)膚 彩妝 美發(fā) 美體 美甲 <br/>
美容儀器 其他美容工具
</dd>
<dt>母嬰專區(qū)</dt>
<dd>奶粉 尿褲濕巾 母嬰洗護(hù)</dd>
<dt>男士專區(qū)</dt>
<dd>潔面 爽膚水 面霜 男香<br/>
眼霜 凝膠 乳液 精華 沐浴
</dd>
<dt>食品保健</dt>
<dd>瘦身類 保健類 美容類 食品類</dd>
</dl>
</div>
</body>
</html>
結(jié)果如圖所示：
作業(yè)3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
li{
list-style-type: none;
}
body {
width: 300px;
height: 300px;
margin: 80px 80px;
}
h2{
color: mediumpurple;
border-bottom: dotted 1px;
background:linear-gradient(to top,white,#DDDFFF,#9698FF);
text-indent: 25px;
line-height: 60px;
border-left: solid #DDDFFF;
border-right: solid #DDDFFF;
border-top: solid #DDDFFF;
}
ul{
text-indent: 25px;
line-height: 40px;
border-bottom: solid #DDDFFF;
border-left: solid #DDDFFF;
border-right: solid #DDDFFF;
}
</style>
</head>
<body>
<h2>京東快報(bào)</h2>
<ul>
<li>[特惠]海飛絲去屑又去油 超清爽</li>
<li>[公告]京東公益支持魯?shù)樾聞?dòng)作</li>
<li>[特惠]4688元搶iPhone 6</li>
<li>[公告]小米電視攜豪禮高調(diào)入駐京東</li>
</ul>
</body>
</html>
結(jié)果如圖所示：
作業(yè)4：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>愛奇異視頻播放列表</title>
<style>
*{
margin: 0px;
padding: 0px;
}
h3{
margin-left: 50px;
margin-top: 40px;
}
li{
width: 240px;
height: 420px ;
display: inline-block;
margin-top: 30px;
margin-left: 50px;
line-height: 30px;
}
li:hover {
border-radius: 20px 20px 20px ;
box-shadow: 1px 1px 1px 1px grey ;
}
img{
border-radius: 15px 15px 15px ;
margin-top: 20px;
margin-left:15px;
}
li h4:nth-of-type(1){
font-size: 16px;
color: #4d4d4d;
margin-left: 8px;
}
li p:nth-of-type(1){
color: #640000;
font-size: 14px;
margin-left: 8px;
}
li p:nth-of-type(2){
font-size: 12px;
color: blue;
margin-left: 8px;
}
</style>
</head>
<body>
<h3>熱播</h3>
<ul>
<li>
<img src="../images/ch25.1.png " alt=""/>
<h4>神武趙子龍</h4>
<p>怒，林更新不抱網(wǎng)紅抱女神</p>
<p>點(diǎn)擊次數(shù)：242445次</p>
</li>
<li>
<img src="../images/ch25.2.png" alt=""/>
<h4>旋風(fēng)十一人</h4>
<p>胡歌變教練在撩前女友</p>
<p>點(diǎn)擊次數(shù)：242445次</p>
</li>
<li>
<img src="../images/ch25.3.png " alt=""/>
<h4>太陽(yáng)的后裔</h4>
<p>宋慧喬吃嫩草</p>
<p>點(diǎn)擊次數(shù)：242445次</p>
</li>
<li>
<img src="../images/ch25.4.png " alt=""/>
<h4>山海經(jīng)之赤影傳說</h4>
<p>娜扎張翰再度聯(lián)手</p>
<p>點(diǎn)擊次數(shù)：242445次</p>
</li>
</ul>
</body>
</html>
結(jié)果如圖所示：
好像代碼太多了。今天晚上沒時(shí)間對(duì)作業(yè)題解析婶芭。
看不懂見諒６巍！犀农！謝謝賞臉６韪场！呵哨！
