第五次学习HTML

学个鸡儿~你累吗~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <title>Demo</title>
    <!-- 样式 -->
    <style type="text/css">
        body{margin: 0;}
        header{width: 100%;height: 50px;background: #AEFEEE;}
        aside{width: 20%;height: 540px;background: #708090;float: left;overflow: auto;}
        section{width: 80%;height: 540px;background: #816016;float: left;overflow: auto;}
        footer{width:100%;height: 50px;background: #516846;clear: both;}
        h4{display: inline;}
        p{display: inline;}
        ul{list-style-type: none;}
        img{max-width: 45%}
        a{text-decoration: none;}
    </style>
</head>
<body>
    <!-- 头部 -->
    <header>
        <center>
            <nav>
                <a href="">啦啦啦</a>
                <a href="">啦啦啦</a>
                <a href="">啦啦啦</a>
                <a href="">啦啦啦</a>
                <a href="">啦啦啦</a>
                <a href="">啦啦啦</a>
            </nav>
        </center>
        <hgroup>
            <img src="Hydrangeas.jpg" alt="" width="10%">
            <h4>花之国度</h4>
        </hgroup>
    </header>
    <!-- 侧边栏 -->
    <aside>
        <ul>
            <li><a href="#">支付</a></li>
            <li><a href="#">支付</a></li>
            <li><a href="#">支付</a></li>
            <li><a href="#">支付</a></li>
        </ul>
    </aside>
    <!-- 主体 -->
    <section>
        <figure>
            <img src="Hydrangeas.jpg" alt="">
            <img src="Hydrangeas.jpg" alt="">
        </figure>
        <figcaption>花/瓶中</figcaption>
        <figure>
            <img src="Hydrangeas.jpg" alt="">
            <img src="Hydrangeas.jpg" alt="">
        </figure>
        <figcaption>花/瓶中</figcaption>
        <figure>
            <img src="Hydrangeas.jpg" alt="">
            <img src="Hydrangeas.jpg" alt="">
        </figure>
        <figcaption>花/瓶中</figcaption>
        <figure>
            <img src="Hydrangeas.jpg" alt="">
            <img src="Hydrangeas.jpg" alt="">
        </figure>
        <figcaption>花/瓶中</figcaption>
        <figure>
            <img src="Hydrangeas.jpg" alt="">
            <img src="Hydrangeas.jpg" alt="">
        </figure>
        <figcaption>花/瓶中</figcaption>
        <figure>
            <img src="Hydrangeas.jpg" alt="">
            <img src="Hydrangeas.jpg" alt="">
        </figure>
        <figcaption>花/瓶中</figcaption>
    </section>
    <!-- 底部文件 -->
    <footer>
        <center>
            <nav>
                <a href="">啦啦啦</a>
                <a href="">啦啦啦</a>
                <a href="">啦啦啦</a>
                <a href="">啦啦啦</a>
                <a href="">啦啦啦</a>
                <a href="">啦啦啦</a>
            </nav>
        </center>
    </footer>
</body>
</html>

学习虽然苦,但是却贵在坚持~嘻嘻,努力~

- 终 -


「 如果我真的存在,也是因为你需要我。 」
版权声明:除特殊注明外均为本博原创内容,由「 歆宋 」编辑于2017/12/11 共102汉字
转载请注明出处:http://www.warhut.cn/WarHut/the-fifth-time-to-learn-html.html
第四次学习HTML
第六次学习html
发表自己的感言啦,然后调戏博主(手动滑稽...)
icon_idea.pngicon_question.pngicon_wink.pngicon_biggrin.pngicon_neutral.pngicon_eek.pngicon_mrgreen.pngicon_smile.pngicon_confused.pngicon_surprised.pngicon_lol.pngicon_exclaim.pngicon_arrow.pngicon_cool.pngicon_mad.pngicon_evil.pngicon_twisted.pngicon_razz.pngicon_redface.pngicon_sad.pngicon_rolleyes.pngicon_cry.png