2018.3.30 边框应用与导航栏设置
<!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>
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的2018.3.30 边框应用与导航栏设置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS媒体查询
- 下一篇： 入门 IT 行业，该具备哪些技能？