圣杯布局,双飞翼布局,和自己独创的布局

圣杯布局:

<!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>

其实是利用了,position:relative;和margin属性进行位置移动;结构上也是三栏

双飞翼布局

<!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>

双飞翼布局,利用了,margin的负边距属性移动,这里要注意由于是浮动所以,margin是负边距时能够移动,当不是浮动时,负边距会吃点元素本身的宽度

他与圣杯最大的区别在于没有用到position属性,html结构上也有区别,主要在main那一块,一个是做padding,一个是做margin

无论哪种布局都利用了一个很重要的属性,内部元素的宽度百分比是相对于外部元素的content宽度的,即不包括内外边距,也不包括边框。

我的布局方式,感觉比之前两种都简单,嘿嘿

上代码:

<!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;
            position:relative;
            padding: 0 200px 0 200px;
        }
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: #ddd;
        }
        .left {
            /* opacity: 0.5; */
            width: 200px;
            height: 200px;
            background-color: #da4242; 
            position:absolute;
            left:0;
            top:0;
        }
        .right {
            /* opacity: 0.5; */
            width: 200px;
            height: 200px;
            background-color: #4ddef1;
            position:absolute;
            right:0;
            top:0;
        }
    </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>

我利用了position:absolute这个属性,外层元素的padding设置一下,其实准确的说,float没哟脱离文档流,只是,float使这个元素快在文档流里能根据float规则流动;absolute才完全脱离了文档流。相对于relative的父元素位置。并且,absolute的原来的位置没有了,relative的原来位置还在。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25310
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6798
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2577
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4025
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4064
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2762
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2645
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5456
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

31710
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7

扫码关注云+社区