標籤：製作網頁 課程 zhiye
2016年11月9日，星期三
一、首次利用<ul>(無序列表)，<ol>(有序列表)製作網頁篩選欄：
示範圖，<ul>（無序列表）效果：
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M00/89/FB/wKioL1gjIfmzucQjAADJKSWB3VI699.png-wh_500x0-wm_3-wmp_4-s_3379592295.png" title="2016-11-09_211536.png" alt="wKioL1gjIfmzucQjAADJKSWB3VI699.png-wh_50" />
示範圖，<ol>(有序列表）效果：
650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/89/FF/wKiom1gjInnBswB7AADJ1yq2wp0218.png-wh_500x0-wm_3-wmp_4-s_4206726641.png" title="2016-11-09_211800.png" alt="wKiom1gjInnBswB7AADJ1yq2wp0218.png-wh_50" />
二、利用了line-height(行間距)，text-align（文本的水平對齊）等功能製作出完成圖，
編碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
</head>
<style type="text/css">
body,ul{
margin: 0px;
padding: 0px;
}
#baohan{
width: 100%
height:60px;
background-color: red;
}
#zhiye{
height: 50px;
width: 1500px;
margin: 0 auto;
background-color: red;}
li{
width: 70px;
height: 50px;
background-color: red;
float: left;
list-style: none;
text-align: center;
line-height: 50px;
margin-right: 2px;}
li:hover{background-color: orange;}
</style>
<body>
<div id="baohan">
<ol id="zhiye">
<li>戰士</li>
<li>聖騎士</li>
<li>法師</li>
<li>獵人</li>
<li>牧師</li>
<li>薩滿</li>
<li>死亡騎士</li>
<li>德魯伊</li>
<li>惡魔獵手</li>
<li>術士</li>
<li>武僧</li>
</ol>
</div>
</body>
</html>
最後的完成圖，如下：
650) this.width=650;" src="http://s2.51cto.com/wyfs02/M01/89/FB/wKioL1gjJE7wWkAGAAJYmov8Bng872.png-wh_500x0-wm_3-wmp_4-s_2357066140.png" title="2016-11-09_211249.png" alt="wKioL1gjJE7wWkAGAAJYmov8Bng872.png-wh_50" />
本文出自 “12244251” 部落格，謝絕轉載！
學習PHP課程的第三天
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
