html5页面布局

来源：互联网发布：为什么手机网络不稳定编辑：程序博客网时间：2024/05/19 01:06
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            padding: 0px;            margin: 0px;        }        header{            width: 80%;            height: 36px;            margin: 0px auto;            border: 5px solid cornflowerblue;        }        nav{            width: 80%;            margin: 10px auto;            height: 36px;            border: 5px solid lightcoral;        }        nav a{            text-decoration: none;            line-height: 40px;            font-size: 23px;            color: brown;            padding: 0px 15px;        }        #main{            width: 80%;            height: 300px;            margin: 10px auto;            border: 5px solid seagreen;        }        #main aside{            background-color: lightblue;            width: 20%;            height: 100%;            float: left;        }        #main .flash{            float: right;            width: 78%;            height: 100%;            background-color: darkgrey;        }        footer{            width: 80%;            margin: 10px auto;            height: 36px;            border: 5px solid darkorange;        }    </style></head><body>    <header>        <h1 align="center">我是头部</h1>    </header>    <nav>        <a href="">小白牛</a>        <a href="">小白牛</a>        <a href="">小白牛</a>        <a href="">小白牛</a>        <a href="">小白牛</a>        <a href="">小白牛</a>    </nav>    <div id="main">        <aside>        </aside>        <div class="flash">        </div>    </div>    <footer>        <h1 align="center">我是底部</h1>    </footer></body></html>
阅读全文
0 0