2018.3.30 邊框應用與導航欄設定

董呀麼董發表於2018-03-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>

相關文章