+
95
-

html中css的圣杯布局还是双飞翼布局怎么实现?

html中css的圣杯布局还是双飞翼布局怎么实现?


网友回复

+
15
-

圣杯布局和双飞翼布局是两种常见的CSS布局技术,用于创建具有固定侧边栏和可变中间内容的网页布局。下面我将分别介绍这两种布局的实现方法。

圣杯布局

圣杯布局通过使用浮动和负边距来实现三列布局,其中中间列的内容优先显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Holy Grail Layout</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            padding: 0 200px; /* 为左右两列留出空间 */
            overflow: hidden;
        }
        .column {
            position: relative;
            float: left;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .middle {
            width: 100%;
            background-color: #ddd;
        }
        .left {
            width: 200px;
            margin-left: -100%;
            right: 200px;
            background-color: #f66;
        }
        .right {
            width: 200px;
            margin-right: -200px;
            background-color: #6f6;
        }...

点击查看剩余70%

我知道答案,我要回答