css 布局(圣杯、双飞翼)

2018-07-14 admin

一、 圣杯布局、

左右固宽,中间自适应

  • 三列布局,中间宽度自适应,两边定宽;
  • 中间部分要在浏览器中优先展示渲染;

具体步骤: 1.设置基本样式 2.圣杯布局是一种相对布局,首先设置父元素container的位置: 3.将主体部分的三个子元素都设置左浮动 4.设置main宽度为width:100%,让其单独占满一行 5.设置left和right 负的外边距 6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。

代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>圣杯布局</title>

    <style>
        body{
            margin:0;
        }
        .box{
            margin:0 auto;
            width:900px;
            height:300px;
            background-color:orange;
            padding:0 200px;
        }
        .left{
            width:200px;
            height:300px;
            background-color:red;
            float:left;
            margin-left:-100%;
            position:relative;
            left:-200px;

        }
        .center{
            width:100%;
            height:300px;
            background-color:pink;
            float:left;
        }
        .right{
            width:200px;
            height:300px;
            background-color:blue;
            float:left;
            margin-left:-200px;
            position:relative;
            right:-200px;
        }
    </style>

</head>
<body>
<div class="box">
        <div class="center"></div>

        <div class="left"></div>

        <div class="right"></div>    
</div>
</body>
</html>

效果图: 图片描述

二、双飞翼布局

左右固宽,中间自适应

  • 左右两个div浮动,中间的div放在上面
  • 通过margin-left调整到一行
  • 中间div添加一个子节点,设置margin调整位置

代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>双飞翼布局</title>

    <style>
        body{
            margin:0;
        }
        .box{
            margin:0 auto;
            width:900px;
            height:300px;
            background-color:orange;
        }
        .warp{
            margin:0 200px;
        }
        .left{
            width:200px;
            height:300px;
            background-color:red;
            float:left;
            margin-left:-100%;
        }
        .center{
            width:100%;
            height:300px;
            background-color:pink;
            float:left;
        }
        .right{
            width:200px;
            height:300px;
            background-color:blue;
            float:left;
            margin-left:-200px;
        }
    </style>

</head>
<body>
<div class="box">

    <div class="center">
        <div class="warp"></div>
    </div>

    <div class="left"></div>

    <div class="right"></div>

</div>
</body>

</html>

效果图:

图片描述

持续更新 点歌关注吧!

原文链接:https://segmentfault.com/a/1190000015634096

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35974.html

文章标题:css 布局(圣杯、双飞翼)

相关文章
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实...
2017-03-27
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下: &#x2F;** * 动态导入静态资源文件js&#x2F;css *&#x2F; var $import = fu...
2017-03-27
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法。分享给大家供大家参考。具体如下: 首先来看一下运行效果图: 具体实现代码如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W...
2017-03-23
js+css实现上下翻页相册代码分享
这是一款基于js+css实现上下翻页相册特效代码,相册可以从上下两个方向进行切换,是一款非常实用的幻灯片特效源码。 &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; con...
2017-03-29
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法。分享给大家供大家参考。具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果。 &lt;!DOCTYPE...
2017-03-23
JS+CSS实现的拖动分页效果实例
本文实例讲述了JS+CSS实现拖动分页效果的方法。分享给大家供大家参考。具体实现方法如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;拖动分页&lt;&#x2F;title&gt; &lt;meta ht...
2017-03-23
JS设置CSS样式的方式汇总
1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有’-‘号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style[‘text-align’] ...
2017-02-24
Zepto css
css(property) ⇒ value css([property1, property2, …]) ⇒ object v1.1+ css(property, value) ⇒ self css({ property: va...
2017-04-24
原生JavaScript和css实现图片轮播效果
本文实例为大家分享了javascript图片轮播效果的具体代码,供大家参考,具体内容如下 &lt;!DOCTYPE HTML&gt; &lt;html lang=&quot;zh-CN&quot;&gt; &lt;head&gt; ...
2017-03-20
回到顶部