div+css网页布局

作者：剑歌踏天下发布日期:2025-03-02 浏览:149

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div + CSS 网页布局示例</title>
    <style>
        /* 设置全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #4CAF50;
            color: white;
            padding: 10px 0;
            text-align: center;
        }

        /* 导航栏样式 */
        nav {
            background-color: #333;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 主体内容样式 */
        .container {
            display: flex;
            margin: 20px;
        }

        .sidebar {
            background-color: #f1f1f1;
            padding: 15px;
            width: 25%;
        }

        .content {
            padding: 15px;
            width: 75%;
        }

        /* 底部样式 */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我的网站</h1>
</header>

<nav>
    <a href="#home">首页</a>
    <a href="#about">关于我们</a>
    <a href="#services">服务</a>
    <a href="#contact">联系我们</a>
</nav>

<div class="container">
    <div class="sidebar">
        <h2>侧边栏</h2>
        <p>这里是一些侧边栏内容。</p>
    </div>
    <div class="content">
        <h2>主要内容</h2>
        <p>这里是页面的主要内容。你可以在这里放置文章、图片或其他信息。</p>
    </div>
</div>

<footer>
    <p>&copy; 2023 我的网站. 保留所有权利。</p>
</footer>

</body>
</html>

解释说明：

HTML结构：
- header：用于定义网页的头部，包含标题。
- nav：用于定义导航栏，包含链接。
- div.container：用于定义一个容器，包含侧边栏和主要内容区域。
- footer：用于定义网页的底部，包含版权信息。
CSS样式：
- body：设置全局字体和去除默认边距。
- header：设置头部背景颜色、文本颜色、内边距和居中对齐。
- nav：设置导航栏背景颜色、溢出处理（防止子元素超出父元素）。
- nav a：设置导航栏链接的颜色、内边距、文本对齐方式等。
- nav a:hover：设置鼠标悬停时链接的样式变化。
- .container：使用flex布局使侧边栏和主要内容并排显示。
- .sidebar：设置侧边栏的宽度、背景颜色和内边距。
- .content：设置主要内容区域的宽度和内边距。
- footer：设置底部背景颜色、文本颜色、文本对齐方式，并将其固定在页面底部。

这个示例展示了如何使用div和css来创建一个简单的网页布局，包括头部、导航栏、侧边栏、主要内容和底部。

上一篇：css禁止点击

下一篇：css 3