在线代码编辑器-开发工具-核心编程

首页
零基础教程
分类浏览
编程
- Sentinel
- Go语言
- C语言
- 汇编语言
- Android
- Java工具库
- Spring Cloud Alibaba
- Spring Cloud
- Spring Data
- Spring Boot
- Spring Batch
- JSP/Servlet
- Hadoop
- Dubbo
- J2Cache
- Hibernate
- OpenJPA
- MyBatis
- ShardingSphere
- Freemarker
- Thymeleaf
- Activiti
- POI
- JMail
- Log4j
- LogBack
- Dom4j
- XML
- RxJava
- JasperReport
- JUnit
- JMock
- Apache Commons
- HttpComponents
- CGLib
- WebSocket
- ESAPI
- 设计模式
前端
- CSS/CSS3
- HTML5
- JavaScript
- JQuery
- DHTMLX
- 浏览器
- HTML
- 前端小知识
- Vue.js
- NodeJS
- ECharts
- Less
- UmiJS
- React
- Ant Design
- Bootstrap
- uni-app
- JS-XLSX
数据库
- SQL
- PL/SQL
- MySQL
- Oracle
- Redis
- SQLite
- MongoDB
- Zookeeper
- H2
服务器
- Podman
- Prometheus
- Tomcat
- JBoss
- RocketMQ
- Docker
- Nginx
- RabbitMQ
其他
- 程序员
- Maven
- SVN
- Git
- UML
- Windows
- 办公软件
- Axure
- Jenkins
- HTTP
- macOS
Java
Spring
Linux
AI
代码片段
Get小技能
面试题
开发工具

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯HTML+CSS 网页布局骨架</title>
    <style>
        /* 全局样式重置，消除浏览器默认边距和内边距，统一盒模型 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

/* 页面整体背景，最小高度占满屏幕，设置字体 */
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f5f5;
            min-height: 100vh;
            /* 弹性布局，实现页脚始终在底部（核心） */
            display: flex;
            flex-direction: column;
        }

/* 1. 头部样式（Header） */
        .header {
            background-color: #2c3e50;
            color: white;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

/* 2. 导航栏样式（Nav） */
        .nav {
            background-color: #34495e;
            padding: 1rem 0;
            position: sticky;
            top: 0; /* 粘性导航，滚动时固定在顶部 */
            z-index: 999;
        }

/* 导航列表 */
        .nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
            gap: 2rem; /* 列表项之间的间距 */
        }

/* 导航链接 */
        .nav a {
            color: white;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: background-color 0.3s ease; /* 过渡动画，hover更平滑 */
        }

/* 导航链接hover效果 */
        .nav a:hover {
            background-color: #2c3e50;
        }

/* 3. 主体内容容器（包含主内容和侧边栏） */
        .main-container {
            /* 弹性布局，实现主内容和侧边栏并排 */
            display: flex;
            gap: 2rem;
            padding: 2rem;
            /* 占据剩余空间，让页脚推到底部 */
            flex: 1;
            max-width: 1200px;
            margin: 0 auto; /* 居中对齐 */
        }

/* 4. 主内容区域 */
        .content {
            flex: 3; /* 占比3份，宽于侧边栏 */
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

/* 5. 侧边栏区域 */
        .sidebar {
            flex: 1; /* 占比1份 */
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

/* 6. 页脚样式（Footer） */
        .footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 1.5rem;
            margin-top: auto; /* 配合body的flex，固定在页面底部 */
        }

/* 7. 响应式适配（移动端：屏幕宽度小于768px时，取消并排，改为垂直排列） */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column; /* 垂直排列 */
                padding: 1rem;
                gap: 1rem;
            }

.nav ul {
                gap: 1rem;
                flex-wrap: wrap; /* 导航项过多时自动换行 */
            }
        }
    </style>
</head>
<body>
    
    <header class="header">
        <h1>网页标题 / 网站Logo区域</h1>
    </header>

<nav class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品中心</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系客服</a></li>
            <li><a href="#">常见问题</a></li>
        </ul>
    </nav>

<div class="main-container">
        
        <main class="content">
            <h2>主内容区域</h2>
            <p>这里是网页的核心内容展示区，比如文章、商品列表、表单等。</p>
            <br>
            <p>该布局为响应式设计，在手机等小屏幕设备上会自动切换为垂直排列。</p>
        </main>

<aside class="sidebar">
            <h3>侧边栏</h3>
            <p>这里可以放置侧边导航、广告、热门推荐、用户信息等辅助内容。</p>
        </aside>
    </div>

<footer class="footer">
        <p>© 2026 我的网站 版权所有 | 联系方式：xxx@xxx.com</p>
    </footer>
</body>
</html>

在线代码编辑器

代码编辑区自动执行

预览效果

字符数: 0

提示: 输入完整的HTML代码，包括<!DOCTYPE>和<html>标签

关于

本网站专注于 Java、数据库（MySQL、Oracle）、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章，助力技术传播与交流。无论是技术新手渴望入门，还是资深开发者寻求进阶，这里都能为您提供深度见解与实用经验，让复杂编码变得轻松易懂，携手共赴技术提升新高度。如有侵权，请来信告知：hxstrive@outlook.com

链接

其他应用

开源镜像网站

公众号

在线代码编辑器

代码编辑区 自动执行

预览效果

选择模板

选择库和版本

库

版本

文件

代码编辑区自动执行