<!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>
- 还没有人评论，欢迎说说您的想法！
客服
