<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*製作三角形*/ #one{ width: 0px; height: 0px; border-top: 100 ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*製作三角形*/
#one{
width: 0px;
height: 0px;
border-top: 100px solid blue;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
/*製作箭頭*/
#two{
width: 100px;
height:100px;
border-bottom: 10px solid blueviolet;
border-left: 10px solid blueviolet;
/*rotate:旋轉*/
transform:rotate(45deg);
}
/*製作可變化的導航欄*/
#three{
width: 800px;
height: 50px;
border: 5px solid #e9e9e9;
}
#three li{
width: 140px;
height: 50px;
font-family: "微軟雅黑";
float: left;
line-height: 50px;
margin-top: -17px;
}
/*當滑鼠放上後發生的改變*/
li:hover{
width: 140px;
height: 48px;
color: white;
background-color: #b3b6bb;
border-top: 1px solid #F39;
line-height: 50px;
margin-top:-16px;
}
/*排列去掉排頭序號*/
ul{
list-style: none;
}
</style>
</head>
<body>
<center>
<h3>第一題</h3>
<div id="one"></div>
</center>
<br />
<br />
<br />
<center>
<h3>第二題</h3>
<br />
<div id="two"></div>
</center>
<center>
<br />
<br />
<br />
<h3>第三題</h3>
<br />
<div id="three">
<ul>
<li>春節</li>
<li>元宵節</li>
<li>端午節</li>
<li>中秋節</li>
<li>國慶節</li>
</ul>
</div>
</center>
<br />
<br />
<br />
</body>
</html>
