你知道css圣杯布局与双飞翼布局吗?

简介: 你知道css圣杯布局与双飞翼布局吗?

圣杯布局


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            min-width: 600px;
        }
        header,
        footer {
            text-align: center;
            width: 100%;
            background-color: #bbbbbb;
        }
        .text {
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            color: #fff;
        }
        .bd {
            overflow: hidden;
            padding: 0 200px 0 200px;
        }
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: #ddd;
        }
        .left {
            /* opacity: 0.5; */
            float: left;
            width: 200px;
            height: 200px;
            background-color: #da4242;
            /* 产生布局效果的属性 */
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right {
            /* opacity: 0.5; */
            float: left;
            width: 200px;
            height: 200px;
            background-color: #4ddef1;
            /* 产生布局效果的属性 */
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
    <header>圣杯布局</header>
    <div class="bd">
        <div class="main text">
            main
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
    <footer>footer</footer>
</body>
</html>


双飞翼布局


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        header,
        footer {
            text-align: center;
            width: 100%;
            background-color: #bbbbbb;
        }
        .text {
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            color: #fff;
        }
        .bd {
            overflow: hidden;
        }
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: #ddd;
        }
        .main-content {
            margin: 0 200px;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #da4242;
            /* 产生布局效果的属性 */
            margin-left: -100%;
        }
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #4ddef1;
            /* 产生布局效果的属性 */
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <header>双飞翼布局</header>
    <div class="bd">
        <div class="main text">
            <div class="main-content">main</div>
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
    <footer>footer</footer>
</body>
</html>



相关文章
|
2天前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
12 4
|
2天前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
16天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
16天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
48 3
|
2月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
45 3
|
2月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
54 1
|
2月前
|
前端开发
CSS Grid 布局:span 关键字
CSS Grid 布局:span 关键字
51 0
|
2月前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
42 0
|
2月前
|
编解码 前端开发 容器
CSS弹性布局:打造响应式与灵活的网页设计
CSS弹性布局:打造响应式与灵活的网页设计
81 0