css布局记录之双飞翼布局、圣杯布局
双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下:
<!DOCTYPE html>
<html lang="zh">
<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 type="text/css">
* {
padding: 0;
margin: 0;
} .main {
background-color: #BCCEDE;
height: 600px;
} .content {
width: 100%;
height: 100px;
} .csv_content {
height: 100px;
background-color: aqua;
} .table_content {
width: 40%;
height: 100px;
float: left;
margin-left: -10px;
background-color: darkcyan;
} .normal_content {
height: 100px;
width: 60%;
float: right;
background-color: #8A2BE2;
} .mrgT10 {
margin-top: 10px;
} .clear {
clear: both;
}
.main_content{
width: 100%;
float: left;
}
/* 双飞翼布局 */
.center{
background: #f66;
margin: 0 210px;
height: 100px;
}
.left{
background:#fcc;
width: 200px;
float: left;
margin-left: -100%;
height: 20px;
}
.right{
background: #0000FF;
width: 200px;
float: left;
margin-left: -200px;
height: 60px;
}
/* 圣杯布局 */
.container{
padding: 0 220px 0 200px;
overflow: hidden;
}
.sb_center, .sb_left, .sb_cright{
position: relative;
float: left;
height: 100px;
}
.sb_center{
width: 100%;
background-color: #0000FF;
}
.sb_left{
margin-left: -100%;
width: 200px;
background-color: #00FFFF;
left: -200px;
}
.sb_cright{
margin-left: -220px;
right: -220px;
width: 220px;
background-color: #FF6666;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="csv_content"> </div>
</div>
<div class="content mrgT10">
<div class="main_content">
<div class="center"> </div>
</div>
<div class="left"> </div>
<div class="right"> </div>
</div>
<div class="content clear mrgT10">
<div class="table_content"> </div>
<div class="normal_content"> </div>
</div>
<div class="clear container mrgT10">
<div class="sb_center"> </div>
<div class="sb_left"> </div>
<div class="sb_cright"> </div>
</div>
</div>
</body>
</html>
css布局记录之双飞翼布局、圣杯布局的更多相关文章
- css布局笔记(三)圣杯布局,双飞翼布局
圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...
- css实现三栏水平布局双飞翼与圣杯布局
作为布局的入门级选手,网上也查看了很多信息和资源 双飞翼的html结构 <div class="container"> <div class="main ...
- HTML布局篇之双飞翼(圣杯)布局
最近在写页面的时候,总是为布局头疼,倒不是不能布出来,就是感觉不系统,没有成一个体系的感觉.所以决定自己写博文,梳理一下思路. 常用的布局方式大致可以分为三种: 浮动布局 Float 负边距(双飞翼) ...
- CSS中的圣杯布局与双飞翼布局
一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...
- CSS_圣杯布局和双飞翼布局
参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...
- css多种方式实现双飞翼布局
圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...
- css3布局篇(双飞翼)
大家看到好多电商网站都见过经典三列布局,它也叫做圣杯布局 ,是Kevin Cornell在2006年提出的一个布局模型概念,这个在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它 ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
随机推荐
- python--求参赛两队所有可能的比赛组合情况
朋友遇到一个面试题,让我帮忙实现,题目如下: 红队有A1,B1,C1三名队员,蓝队有A2,B2,C2三名队员,每轮比赛各队出一名队员参加,一名队员只能参加一次比赛,假设A1不会和B2打,B1不会和B2 ...
- owa2013配置HTTPS
- nginx windown命令
cmd进入nginx程序文件夹启动nginx:start nginx nginx -s reload|reopen|stop|quit #重新加载配置|重启|停止|退出 nginx nginx -t ...
- hadoop集群搭建(hdfs)
(搭建hadoop集群的前提是服务器已成功安装jdk以及服务器之间已设置免密码登录,服务器之间的免密码登录可参考<linux服务器间ssh免密码登录>) 1.下载hadoop安装包 wge ...
- java环境的配置与安装(windows、macos、linux)
一.windows下: 1.下载jdk:https://www.oracle.com2.安装教程:https://www.cnblogs.com/zlslch/p/5658399.html 二.mac ...
- Mysql数据引擎和系统库
系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等performance_schema: MySQL ...
- C# 单元测试(入门)
注:本文示例环境 VS2017XUnit 2.2.0 单元测试框架xunit.runner.visualstudio 2.2.0 测试运行工具Moq 4.7.10 模拟框架 什么是单元测试? 确保软件 ...
- 锐捷客户端下虚拟机VMware无法联网的问题
打开VMware,选择右下角的网络适配器,设置为NAT模式. 如果还不能上网,则打开电脑的任务管理器,保证VMwate的服务保持开启. 但是锐捷客户端,会自动检测并且关闭VMware NAT Serv ...
- Qt中QMenu的菜单关闭处理方法
Qt中qmenu的实现三四千行... 当初有个特殊的需求, 要求菜单的周边带几个像素的阴影, 琢磨了半天, 用QMenu做不来, 就干脆自己用窗口写一个 然而怎么让菜单消失却非常麻烦 1. 点击菜单项 ...
- 如何查看第三方apk的信息
很多时候,我们需要获取别人的apk的信息.但是我们看不到apk的代码,对于apk的信息并没有直接的方法获取.那么,我们要怎么获取apk信息呢? 这里,我整理了两个方法,亲测可用. 第一种,直接使用An ...