简单的页面布局

原创于 2024-12-28 13:51:55 发布 · 249 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>HTML页面布局测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* text-align: center; */
        }
     
        #container {
            width: 100%;
            height: 100%;
            background-color: aqua;
            border: 1px solid #000;
            position: absolute;
            top: 0%;
            left: 0%;
            transform: translate(0%, 0%);
            transform-origin: left top;
            overflow: scroll;
            text-align: center;
        }

        #menu {
            background-color: #aaa;
            height: 100%;
            width: 20%;
            float: left;
        }

        #content {
            background-color: #eee;
            height: 100%;
            width: 80%;
            float: left;
        }

        #footer {
            background-color: #b5dcb3;
            clear: both;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="container">

        <div id="header" style="background-color:#b5dcb3;text-align: left;">
            <h1 style="margin-bottom:0;">网页主标题</h1>
        </div>

        <div id="menu">
            <b>侧边栏</b><br>
            <a href="#">HTML</a><br>
            <a href="#">CSS</a><br>
            <a href="http://www.baidu.com" id="baidu">JavaScript</a>
        </div>

        <div id="content">
            内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />内容<br /></div>

        <div id="footer">
            页脚</div>

    </div>
</body>

</html>