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>

2018.3.30 邊框應用與導航欄設定

相關文章