网页制作模板

南城雨落14

于 2021-11-22 22:42:25 发布

阅读量187

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_56140427/article/details/121482686

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        header,footer{
            height: 50px;background-color: blueviolet;
            text-align: center;color: ghostwhite;
            line-height: 50px;
        }
        main{
            overflow: auto;
        }
        nav,section,aside{
            float: left;
        }
        main>nav{
            width: 25%;
        }
        main>section{
            width: 50%;
            padding:0 10px ;
            box-sizing: border-box;
        }
        main>aside{
            width: 25%;
        }
        P{
            height: 25px;background-color: hotpink;
            text-align: center;margin: 10px 0;
            color: ivory;
        }
    </style>
</head>
<body>
    <header>
        header
    </header>
    <main>
        <nav>nav
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
        </nav>
        <section>
            <article>
                article
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </article>
            <article>
                article
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </article>
            <article>
                article
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </article>
        </section>
        <aside>
            aside 
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
            <P>Link</P>
            <p>Link</p>
        </aside>
    </main>
    <footer>
        footer
    </footer>
</body>
</html>

——如有侵权

联系删除

南城雨落14

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页制作模板

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页.
复制链接

扫一扫