HTML5和CSS3開發第九章課後作業

suixinCaesar發表於2018-07-09
HTMLCSSS3

第3題  QQ彩貝高階搜尋

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First</title>
    <style>
        select{width: 70px;height:25px;margin-left: 10px;margin-bottom: 10px}
        .bottem{
            width:170px;
            margin-left: 35px;
            margin-bottom: 15px;
            display: none;
            animation: ser 2s linear 1;
        }
        #input1{
            background-color: #CCCCCC;width: 70px;height: 30px
        }
        div h2{
            margin-left: 15px;
            border-bottom: 6px red solid;
            padding-bottom: 12px;
            width: 210px;
        }
        div p input{
            margin-left: 15px;
            width: 210px;
            height: 40px;
        }
        #input1{
            margin-left:90px;
            margin-bottom: 15px;
        }
        div:hover .bottem{
            display: block;
        }
        @keyframes ser {
            0%{
                opacity: 0;
                height: 0%;
            }
            10%{
                height: 20%;
                opacity: 0.1;
            }
            20%{
                  height: 30%;
                  opacity: 0.2;
            }
            30%{
                height: 50%;
                opacity: 0.3;
            }
            50%{
                height: 60%;
                opacity: 0.5;
            }
            70%{
                height: 80%;
                opacity: 0.7;
            }
            100%{
                height: 100%;
                opacity: 1;
            }

        }
    </style>
</head>
<body>
    <div style="border: 1px solid #CCCCCC;width: 250px;margin: 0px auto">
        <h2>高階搜尋</h2>
        <p><input type="search" placeholder="請輸入關鍵字"></p>
        <input type="submit" value="搜尋" id="input1">
        <div class="bottem">
            <select><option>場合</option></select>
            <select><option>性別</option></select>
            <select><option>風格</option></select>
            <select><option>色系</option></select>
            <select><option>價格</option></select>
            <select><option>年齡</option></select>
            <select><option>季節</option></select>
        </div>
    </div>
</body>
</html>

第4題  百度糯米

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度糯米購物資訊導航</title>
    <style>
        .div div img{
            background: black;
            vertical-align: middle;
            z-index: 2;
            right: 0px;
        }
        .div div span{
            display: inline-block;
            border: solid 1px #c9321a;
            border-radius: 5px;
            color: white;
            width: 90px;
            text-align: center;
            opacity: 0;
            background: #c9321a;
            float: right;
            position: relative;
            left: 90px;
        }
        @keyframes name {
            0%{
                opacity: 0;
                left: 0px;
            }
            33%{
                opacity: 0.3;
                left: -30px;
            }
            66%{
                opacity: 0.6;
                left: -60px;
            }
            100%{
                opacity: 1;
                left: -90px;
            }
        }
        .div{
            position: fixed;
            right: 0px;
            top: 200px;
        }
        .div div{
            margin-top: 50px;
            position: relative;
            left: 90px;
        }
        .div div:hover span{
            animation: name 0.1s linear both;
        }
    </style>
</head>
<body>
    <img src="images/practice4/img.bmp" style="width: 100%; height: 100%">
    <div class="div">
        <div><span>購物車</span><img src="images/practice4/toolbar_05.png"></div>
        <div><span>我的關注</span><img src="images/practice4/toolbar_10.png"></div>
        <div><span>我的足跡</span><img src="images/practice4/toolbar_15.png"></div>
        <div><span>我的訊息</span><img src="images/practice4/toolbar_19.png"></div>
    </div>

</body>
</html>

相關文章