正文

掌握HTML框架布局，从这些实用实例代码开始

/0 浏览量
1118

HTML框架布局是构建网页结构的基础，它允许开发者创建具有清晰结构、易于导航的网页。以下是一些实用的HTML框架布局实例代码，帮助你快速掌握HTML框架布局的技巧。

1. 基础框架布局

以下是一个简单的HTML框架布局实例，包含头部、导航栏、主要内容区域和页脚。

<!DOCTYPE html>
<html>
<head>
    <title>基础框架布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        .nav {
            background-color: #444;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        .nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .nav ul li {
            display: inline;
            margin-right: 20px;
        }
        .main {
            padding: 20px;
        }
        .footer {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>网站标题</h1>
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">产品与服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <div class="main">
        <h2>主要内容</h2>
        <p>这里是网站的主要内容区域。</p>
    </div>
    <div class="footer">
        <p>版权所有 &copy; 2023</p>
    </div>
</body>
</html>

2. 两列布局

以下是一个两列布局的实例，左侧为导航栏，右侧为主要内容区域。

<!DOCTYPE html>
<html>
<head>
    <title>两列布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 80%;
            margin: 0 auto;
        }
        .sidebar {
            background-color: #f4f4f4;
            padding: 20px;
            width: 20%;
            float: left;
        }
        .main-content {
            background-color: #fff;
            padding: 20px;
            width: 70%;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h3>导航栏</h3>
            <p>这里是导航栏内容。</p>
        </div>
        <div class="main-content">
            <h2>主要内容</h2>
            <p>这里是网站的主要内容区域。</p>
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>

3. 三列布局

以下是一个三列布局的实例，左侧为导航栏，中间为主要内容区域，右侧为侧边栏。

<!DOCTYPE html>
<html>
<head>
    <title>三列布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 80%;
            margin: 0 auto;
        }
        .sidebar-left {
            background-color: #f4f4f4;
            padding: 20px;
            width: 20%;
            float: left;
        }
        .main-content {
            background-color: #fff;
            padding: 20px;
            width: 60%;
            float: left;
        }
        .sidebar-right {
            background-color: #f4f4f4;
            padding: 20px;
            width: 20%;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar-left">
            <h3>左侧导航栏</h3>
            <p>这里是左侧导航栏内容。</p>
        </div>
        <div class="main-content">
            <h2>主要内容</h2>
            <p>这里是网站的主要内容区域。</p>
        </div>
        <div class="sidebar-right">
            <h3>右侧侧边栏</h3>
            <p>这里是右侧侧边栏内容。</p>
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>

通过以上实例，你可以了解到HTML框架布局的基本技巧。在实际开发中，可以根据需求调整布局样式和内容。希望这些实例能帮助你快速掌握HTML框架布局。

-- 展开阅读全文 --