day3-作业

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            a{
                text-decoration: none;
            }
            #div1{
                
                height: 100px;
            }
            #div2{
                background-color: black;
                height: 50px;
                color: white;
                position: relative;
            }
            #div2 div{
                height: 50px;
                width: 12%;
                float: left;
                position: relative;
                border-left: 1px solid red;

            }
            #div2 div font{
                position: relative;
                top: 10px;
                left: 50px;
                font-size: 20px;
            }
            #div3{
                height: 500px;
                background-color: mediumvioletred;
            }
            #div4{
                height: 600px;
            }
            #div5{
                height: 300px;
                background-color: darkgray;
            }
            #div6{
                position: relative;
                height: 100px;
            }
            #div6 a{
                float: left;
                position: relative;
                top: 40px;
                border: 2px dotted blue;
                left: 20px;
            }
            #div7{
                background-color: yellow;
                height: 100px;
                width: 50%;
                float: right;
                position: relative;
            }
            #div7 font{
                position: relative;
                left: 10%;
                top: 30px;
                font-size: 30px;
            }
        </style>
        <div id="div1">
            <img src="img/timg.jpg" height="90px" style="margin-left: 20px;"/>
            <input style="height: 40px;width: 200px;float: right;background-color: darkgray;font-size: 20px;margin-top: 25px;
                " type="text" placeholder="搜索修仙方式..."/>
        </div>
        <div id="div2">
            <div><font>修仙境界</font></div>
            <div><font>修仙地域</font></div>
            <div><font>修仙法宝</font></div>
            <div><font>修仙神药</font></div>
            <div><font>修仙秘籍</font></div>
            <div><font>修仙门派</font></div>
            <div><font>修仙神兽</font></div>
            <div><font>修仙启示录</font></div>
        </div>  
        <div id="div3"><img width="100%" height="500px" src="img/8.jpg"/></div>
        <div id="div4">
            <div style="background-color: yellow;width: 50%;height: 300px;float: left;"></div>
            <div style="background-color: orange;width: 25%;height: 300px;float: left;"></div>
            <div style="background-color: brown;width: 25%;height: 300px;float: left;"></div>
            <div style="background-color: red;width: 25%;height: 300px;float: left;"></div>
            <div style="background-color: blue;width: 25%;height: 300px;float: left;"></div>
            <div style="background-color: lawngreen;width: 25%;height: 300px;float: left;"></div>
            <div style="background-color: deepskyblue;width: 25%;height: 300px;float: left;"></div>
        </div>
        <div id="div5"></div>
        <div id="div6">
            <a href="https://baike.baidu.com/item/%E8%BE%B0%E4%B8%9C/7304616?fr=aladdin" target="_blank">辰东</a>
            <a target="_blank" href="https://baike.baidu.com/item/%E5%A4%A9%E8%9A%95%E5%9C%9F%E8%B1%86/5022953?fr=aladdin">天蚕土豆</a>
            <a target="_blank" href="https://baike.baidu.com/item/%E6%A2%A6%E5%85%A5%E7%A5%9E%E6%9C%BA/797131?fr=aladdin">梦入神机</a>
            <a target="_blank" href="https://baike.baidu.com/item/%E5%BF%98%E8%AF%AD/4735254?fr=aladdin">忘语</a>
            <div id="div7">
                <font>仙路尽头谁为峰，一见老夫道成空</font>
            </div>
        </div>
    </body>
</html>
day3-作业

推荐阅读更多精彩内容
