html圣杯布局,HTML+CSS实现圣杯布局！

2024-07-02 09:49:20

实现圣杯布局有2中方法：

1、flex布局：(推荐)

爸爸直接上代码:

header

left

middle

right

footer

下面是CSS代码：

html, body{ padding: 0; margin: 0; text-align: center;}

header, footer{ border: 1px solid #333; background: #ccc;}

section{ display: flex;}

.left{ width: 200px; background: red;}

.middle{ flex: 1; background: green;}

.right{ width: 200px; background: blue;}

2、浮动非主流(float)

HTML代码：需要把middle放在最前面

header

middle

left

right

footer

上样式：

html, body{

padding: 0;

margin: 0;

text-align: center;

}

header, footer{

border: 1px solid #333333;

background: #CCCCCC;

}

footer{

clear: both;

}

section{

/* 给left和right空出位置 */

padding: 0 200px 0 200px;

overflow: hidden;

}

.left, .middle, .right{

position: relative;

float: left;

}

.middle{

width: 100%;

background: green;

}

.left{

/* 让left回到上一行最左侧 */

margin-left: -100%;

/* 让left回到最左侧 */

left: -200px;

width: 200px;

background: red;

}

.right{

margin-left: -200px;

right: -200px;

width: 200px;

background: blue;

}

下面是效果图，效果是一样的！

11221190629.png

html圣杯布局,HTML+CSS实现圣杯布局！相关推荐

网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面
主要是利用flex的一些特性来写的,掌握好flex基础,写出筛子的几个页面不是问题. 推荐去我写的一个博客中有flex的小练习线上练习flex布局 html css .shaizi { width: ...
如何用css进行网页布局,用CSS进行网页布局的教程
如果你是一个初学者那么学习css.html" target="_blank">css的第一步就是布局,但是实现网页布局的方法很多,很多初学者都不知道如何应用,那么现 ...
css flex布局 padding,css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）...
本篇文章给大家带来的内容是关于LNMP以源码的方式记录环境搭建的过程(详细),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果图: 圣杯布局圣杯 .container{ padd ...
结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现
在Web标准中一个很重要的概念就是强调页面的结构与表现分离.说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式.一旦一个标准的XHT ...
两列布局 html5,CSS两列布局的N种实现
原理:两个元素都设置dislpay:inline-block,为了消除html空格的影响,父元素的font-size需要设置为0,右侧自适应元素的宽度使用calc函数计算.如果两个元素的高度不一样,可 ...
CSS - 响应式布局（二）响应式栅格系统
目录响应式栅格系统栅格栅格系统响应式栅格系统 BootStrap响应式栅格系统简单说明利用SCSS实现BootStrap的响应式栅格系统响应式栅格系统栅格在弄清楚响应式栅格系统前,我 ...
html中表格布局还是div布局,表格布局和css div布局
请简单说明表格布局网页和DIV+CSS布局网页的不同之处? 请简单说明表格布局网页和DIV+CSS布局网页的不同之处? div+css布局和表格框架式布局的优缺点各是什么?如题,越详细越好 TABLE ...
CSS和div布局页面
CSS和div布局页面 CSS和div布局页面一.什么是布局网页布局页面元素定位机制二.布局属性浮动清除浮动定位绝对定位相对定位固定定位一.什么是布局网页实质是块与块之间的位置 ...
css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...

最新文章

热门文章