当前位置：首页 > article >正文

前端常用布局

article 2025/3/10 22:53:19

1. 传统两栏布局 + 响应式适配

文件名: traditional-two-column.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>传统两栏布局示例</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 导航栏 */
        .nav {
     
            background: #2c3e50;
            padding: 1rem;
            color: white;
        }

        /* 主体容器 */
        .container {
     
            overflow: hidden; /* 清除浮动 */
        }

        /* 侧边栏 */
        .sidebar {
     
            float: left;
            width: 240px;
            background: #34495e;
            color: white;
            padding: 1rem;
            min-height: calc(100vh - 56px);
        }

        .sidebar ul {
     
            list-style: none;
        }

        .sidebar li {
     
            padding: 0.8rem;
            border-radius: 4px;
            transition: background 0.3s;
        }

        .sidebar li:hover {
     
            background: #2c3e50;
        }

        /* 主内容区 */
        .main-content {
     
            margin-left: 240px;
            padding: 2rem;
            background: #ecf0f1;
            min-height: calc(100vh - 56px);
        }

        /* 响应式适配 */
        @media (max-width: 768px) {
     
            .sidebar {
     
                width: 100%;
                float: none;
                min-height: auto;
            }
            
            .main-content {
     
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <nav class="nav">
        <h1>企业管理系统</h1>
    </nav>
    
    <div class="container">
        <aside class="sidebar">
            <ul>
                <li>仪表盘</li>
                <li>用户管理</li>
                <li>订单管理</li>
                <li>数据分析</li>
            </ul>
        </aside>
        
        <main class="main-content">
            <h2>今日统计</h2>
            <div class="stats">
                <div class="stat-item">
                    <h3>新增用户</h3>
                    <p>1,234</p>
                </div>
                <div class="stat-item">
                    <h3>订单数量</h3>
                    <p>567</p>
                </div>
            </div>
        </main>
    </div>
</body>
</html>

2. 现代弹窗组件

文件名: modern-modal.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>模态弹窗组件</title>
    <style>
        /* 遮罩层 */
        .overlay {
     
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(3px);
        }

        /* 弹窗主体 */
        .modal {
     
            background: white;
            border-radius: 8px;
            width: min(90%, 600px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            animation: slideIn 0.3s ease-out;
        }

        /* 弹窗头部 */
        .modal-header {
     
            padding: 1rem;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close-btn {
     
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 50%;
            transition: background 0.3s;
        }

        .close-btn:hover {
     
            background: #eee;
        }

        /* 弹窗内容 */
        .modal-body {
     
            padding: 2rem;
        }

        /* 表单样式 */
        .form-group {
     
            margin-bottom: 1rem;
        }

        input[type="text"] {
     
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        /* 动画效果 */
        @keyframes slideIn {
     
            from {
     
                transform: translateY(-50px);
                opacit