css布局:圣杯布局

原创 2016年08月29日 14:10:30

圣杯布局:左右两边固定宽度,中间不设置宽度(自适应页面宽度)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        *{ margin:0;padding: 0;}

        .center{height:500px;background: red; margin: 0 200px;}
        .left{ width:200px;height:500px;background: yellow;position:absolute;left: 0;top:0;}
        .right{ width:200px;height:500px;background: yellowgreen;position:absolute;right: 0;top:0;}

    </style>

</head>
<body>

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

效果如图所示

版权声明:谁没个菜的时候!

相关文章推荐

css中圣杯布局

圣杯布局就是左右两边的图片保持不变,中间的搜索框因浏览器的大小改变而改变,典型案例的如天猫页面搜索框,如图 首先我们设置一个父盒子包含三个小盒子 并给父盒子...

CSS之圣杯布局和双飞翼布局

圣杯布局的构造过程: 三者都设置向左浮动。 设置middle宽度为100%。 设置负边距,.left设置负左边距为100%

圣杯布局------4种css左中右布局方式

1. float+margin Title #content{ height:300px; } ...

CSS 圣杯布局和双飞翼布局

今天在网上看到圣杯布局和双飞翼这两种布局说法, 去查了一下,把心得整理一下。 这两个布局是应用在三栏布局上的(当然也可以改成多栏),三栏布局实现有很多方法,但是一般而言我们是这样写的: ...

css中圣杯布局&双飞翼布局(以及css2零碎知识点)

css中的两种布局(圣杯布局和双飞翼布局)

CSS布局之什么是圣杯布局与双飞翼布局

圣杯布局与双飞翼布局 在面试时,你会经常遇到那么一个考题,有left、right、container三个盒子,要求left与right盒子宽度固定,分别固定于浏览器两侧,container位于中间,...

透明度,margin为负数的应用,圣杯布局,倒三角

如果定位的盒子没有宽高,那么默认宽高为0如果给子盒子设置宽度为100%,那么这个子盒子的宽与父盒子一样宽透明度:opacity,取值0-1之间的小数 margin为负数的应用 如果margin-lef...

圣杯式布局

圣杯布局和双飞翼布局(前端面试必看)   作者 森西悠然 关注 2016.07.17 18:58* 字数 1500 阅读 3234评论 6喜欢 32 爱...

步骤比较细致的 圣杯布局说明

圣杯布局的实现过程 圣杯布局和双飞翼布局,他们的都要求三列布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染,而双飞翼布局是对圣杯布局的一种改良,下一篇文...

圣杯与双飞翼布局代码总结

圣杯与双飞翼布局代码总结1.圣杯布局定义: 圣杯布局是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染。解决方案大体都是三栏全部float:left浮动,而在解决中间栏...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)