html圣杯布局,HTML+CSS实现圣杯布局!
实现圣杯布局有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理解的不熟,我起初很不屑,但后来静下来反省 ...
最新文章
- Python基础--文件操作
- Python数据类型之字符串
- 《2020总结-2021展望》
- php 实现同一个账号同时只能一个人登录
- 面试官问发布订阅模式是在问什么?
- vue 数组重复,循环报错
- java中何时不能实例_Java对象实例是何时被创建
- IE如何兼容placeholder属性
- 淘宝技术这十年读后感
- 如何选择产品关键词?
- Python爬虫进阶教程:抖音APP无水印视频批量下载
- of介词短语作定语_在英语句子中,介词短语都能做什么用?作定语?作表语?作状语?...
- 撒大飒飒撒大声地撒萨达
- Jumpserver界面设置及界面功能
- 【Unity实战100例】Unity屏幕画线,Unity屏幕画图HSJ绘画工具
- 一篇希望你能看懂的PGA可编程增益放大器的简介
- 康宁杰瑞、君实生物、天境生物人事任命;赛诺菲诺维乐在中国上市新适应证 | 医药健闻...
- java实现txt文件/文本转语音(全网最详细易懂)
- [BZOJ4627][BeiJing2016]回转寿司 cdq分治
- 聚类分析经典算法(一)
热门文章
- 学物生地对以后学计算机有影响吗,江苏高考改革后的第一届学生选考物生地,有什么问题吗?...
- 医生学计算机:强大的shar, ubuntu 的强大压缩工具,超出想像
- java main 运行_使用maven运行Java Main的三种方法解析
- 文件压缩及上传FTP服务器简单应用(实践篇)
- 上传附件----q-uploader
- 中英文c语言编程对照表,[转〕C中的中英文对照.
- 检测Android应用(APP)的启动与关闭
- uniapp微信小程序不强制登陆的逻辑(模仿大厂登陆)
- 浏览安全怎么提升?教你设置安全浏览器信任站点
- XCTF-攻防世界CTF平台-Reverse逆向类——56、tar-tar-binks(Mac平台下的64位动态链接共享库.dylib逆向)