CSS:布局篇_两边顶宽中间自适应(圣杯布局&双飞翼布局)
CSS:布局篇_两边顶宽中间自适应(圣杯布局&双飞翼布局)
圣杯布局以及双飞翼布局解决的是两边顶宽中间自适应的三栏布局,且中间栏优先渲染。
圣杯布局实现思路:
用一个div作为容器依次包住中,左,右。中以width:100%作为主体,中左右div均以浮动float:left,左右均以margin负边距实现三栏并排。左右div使用相对定位,让各自的视图向相应方向偏移自身大小。
圣杯布局
html结构
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
</div>
<div class="left">
<h4>left</h4> </div>
<div class="right">
<h4>right</h4>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
html结构
css样式
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,.footer{
background: #ff9999;text-align: center;height: 50px;line-height: 50px;
}
.middle,.left,.right{
position: relative;
float: left;
min-height: 130px;
line-height: 130px;
}
.container{
padding: 0 220px 0 200px;
overflow: hidden;
position: relative;
}
.left{
margin-left:-100%;
left: -200px;
background: #99ffff;
width: 200px;
}
.right{
background: #ccff99;
width: 220px;
margin-right:-220px;
}
.middle{
width: 100%;
background: #ccffff;
word-break: break-all;
}
.footer{
}
</style>
css样式
双飞翼布局
双飞翼布局实现思路:
中以width:100%作为主体。中左右div均以浮动float:left排列。左右div均以margin负边距,让三栏并列,中(主体)div使用margin-left,margin-right压缩主体宽度。
html结构
<!--头部-->
<div class="header">
<h4>header</h4>
</div>
<!--主体-->
<div class="main">
<div class="main-inner">
<h4>main</h4>
</div>
</div>
<!--左侧-->
<div class="sub">
<h4>sub</h4>
</div>
<!-- 右侧 -->
<div class="extra">
<h4>extra</h4>
</div>
<!-- 底部 -->
<div class="footer">
<h4>footer</h4>
</div>
html结构
css样式
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,.footer{
border: 1px solid #333;
background: #f99;
text-align: center;
height: 50px;
line-height: 50px;
}
.sub,.main,.extra{
float: left;min-height: 130px;
line-height: 130px;text-align: center;
}
.sub{
width: 200px;background: #9ff;margin-left: -100%;
}
.extra{
width: 220px;background: #cff;margin-left: -220px;
}
.main{
width: 100%;
}
.main .main-inner{
background: #cf9;
min-height: 130px;
margin-left: 200px;
margin-right: 220px;
}
.footer{
clear: both;
}
</style>
css样式
CSS:布局篇_两边顶宽中间自适应(圣杯布局&双飞翼布局)的更多相关文章
- CSS(五)圣杯,双飞翼布局
双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; flo ...
- 三栏布局的三个典型方法(圣杯、双飞翼、flex)
聊聊三栏布局----左右定宽,中间自适应. 效果图: 圣杯布局 <!DOCTYPE html> <html> <head lang="en"> ...
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 个人总结出如下三种实现思路: 通过绝对定位实现 S ...
- 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- Python笔记_第四篇_高阶编程_GUI编程之Tkinter_4.布局
1. 绝对布局: 图示: 实例: import tkinter from tkinter import ttk # 创建主窗口__编程头部 win = tkinter.Tk() # 设置标题 win. ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- 中间自适应,左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- CSS经典布局——圣杯布局与双飞翼布局
一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...
- CSS_圣杯布局和双飞翼布局
参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...
随机推荐
- iOS 使用xcode11新建项目
1. 首先打开Xcode11,然后使用command + shift + n 快捷键创建一个新的工程 选择 Single View App 完成之后点击next 2. 会弹出 Choose opt ...
- 【Basic Knowledge】Self-Attention Generative Adversarial Networks
Note 这是一篇将Self-Attention应用到GAN中的paper,Self-Attention模块是卷积模块的补充,能够有助于建模跨图像区域的长范围.多层次依赖关系.文中主要提到4点: ...
- angular Ionic CLI项目开始
- c++ 跑酷小游戏之用户体验plus
#undef UNICODE#undef _UNICODE#include <iostream>#include <iomanip>#include <string> ...
- 结构型模式 - 外观模式Facade
1.tm的NT审核机制,满篇文章哪来的广告? 就算有也是你们自己加的吧?等财富能支持我自己的网站后,就是和你们说再见之时. 2.tm第二遍说,我接着提交,这个审核机制的傻逼设计者或者是程序敲出来的bu ...
- GitHubDesktop推送报错“SSL/TLS connection failed”如何解决
哈喽大家好,今儿提交Git的时候遇到个问题,查看了一会儿,算是解决了.这里记录一下,方便日后查看.和帮助到大家. 这篇博客后续会陆陆续续的更新内容,只要我遇到问题了,就会发上来. 报错内容: fata ...
- vue学习笔记(二) ---- vue实例的生命周期
vue实例的生命周期 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...
- 重学SpringBoot. step1 全注解的SpringBoot
参考:<深入浅出SpringBoot 2.x> 全注解的SpringBoot 用户可以通过注解将所需要的对象,存放到IOC容器中,然后SpringBoot可以根据这些需要使用的情况,自动注 ...
- HTTPS基础原理和配置-2
〇.概述 作为概述,以下是本文要讲的内容.HTTPS 是什么? 每个人都可能从浏览器上认出 HTTPS,并对它有好感.然后再讲一遍基础知识,再详细讲一下协议版本,密码套件(Cipher Suites) ...
- Redis 源码解读之逐出策略
Redis 源码解读之逐出策略 背景和问题 本文想解决的问题: redis 触发逐出的时机是怎样的? redis 逐出策略有哪些? 如何在海量的 key 中快速找到逐出评价值(idle)最高的key, ...