css布局之三栏布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>This is header.</header>
<section>
<div class="main">
<h3>This is main section.</h3>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
</div> <aside class="left">
<h3>left menu.</h3>
<ul>
<li>
<a href="">link1</a>
</li>
<li>
<a href="">link2</a>
</li>
<li>
<a href="">link3</a>
</li>
<li>
<a href="">link4</a>
</li>
</ul>
</aside>
<aside class="right">
<h3>Right menu.</h3>
<ul>
<li>
<a href="">link1</a>
</li>
<li>
<a href="">link2</a>
</li>
<li>
<a href="">link3</a>
</li>
<li>
<a href="">link4</a>
</li>
</ul>
</aside>
</section>
</body>
</html>
*{
box-sizing: border-box;
}
body{
background: #e1ddd9;
}
header, footer, .main, aside{
background: #fff;
padding: 10px;
margin-bottom: 10px;
}
section{
overflow: hidden;
padding-left: 210px;
padding-right: 210px;
}
section .main, section aside{
float: left;
}
section .main{
widows: 100%;
}
section aside.left{
width: 200px;
margin-left: -100%;
position: relative;
left: -210px;
}
section aside.right{
width: 200px;
margin-left: -200px;
position: relative;
left: 210px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<h1>This is header.</h1>
</header> <div class="main">
<div class="main-inner">
<h3>This is main section.</h3>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
</div>
</div> <aside class="left">
<h3>left menu.</h3>
<ul>
<li>
<a href="">link1</a>
</li>
<li>
<a href="">link2</a>
</li>
<li>
<a href="">link3</a>
</li>
<li>
<a href="">link4</a>
</li>
</ul>
</aside>
<aside class="right">
<h3>Right menu.</h3>
<ul>
<li>
<a href="">link1</a>
</li>
<li>
<a href="">link2</a>
</li>
<li>
<a href="">link3</a>
</li>
<li>
<a href="">link4</a>
</li>
</ul>
</aside> <footer>
<h1>This is footer.</h1>
</footer>
</body>
</html>
*{
box-sizing: border-box;
}
body{
background: #e1ddd9;
}
header, footer, .main, aside{
background: #fff;
padding: 10px;
margin-bottom: 10px;
}
.main, aside{
float: left;
}
.main{
float: left;
width: 100%;
overflow: hidden;
}
.main-inner{
margin: 0 210px;
}
aside.left{
width: 200px;
margin-left: -100%;
}
aside.right{
width: 200px;
margin-left: -200px;
}
footer{
clear: both;
}
css布局之三栏布局的更多相关文章
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- css 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- CSS实现两栏布局
写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...
- CSS布局——三栏布局
说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...
- CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
- 前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
- css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...
- css篇-页面布局-三栏布局
页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...
- 【CSS】三栏布局的经典实现
要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...
随机推荐
- ionic中使用Cordova Uglify 压缩js与css
参照:https://www.npmjs.com/package/cordova-uglify 安装:npm install cordova-uglify 安装完成之后,打开: hooks/uglif ...
- 324篇CSS应用效果集合（梦想天空，可同时应用于Web开发与Qt界面开发）
http://www.cnblogs.com/lhb25/category/146075.html http://www.yyyweb.com/
- 转:implementing cons/car/cdr without explicit storage
I know this is old wine but it’s just too cool! It elegantly demonstrates closure and higher-order f ...
- BestCoder Round #49
呵呵哒,1001的dfs返回值写错,wa了两发就没分了,1002显然是PAM可是我没学过啊!!!压位暴力可不可以...看看范围貌似不行,弃疗...1003根本不会做,1004想了想lcc发现不可做,那 ...
- 定义一个栈的数据结构，要求实现一个min函数，每次能够得到栈的最小值，并且要求Min的时间复杂度为O(1)
具体实现代码如下: stack.h内容如下: #ifndef _STACK_H_ #define _STACK_H_ #define NUM 256 typedef struct _tagStack ...
- Floyd 算法 打印路径模板
#include <iostream> #include <cstdlib> #include <cstdio> #include <algorithm> ...
- Java中join()方法的理解
thread.Join把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程. 比如在线程B中调用了线程A的Join()方法,直到线程A执行完毕后,才会继续执行线程B. t.join ...
- HDOJ(HDU) 2083 简易版之最短距离(中位数)
Problem Description 寒假的时候,ACBOY要去拜访很多朋友,恰巧他所有朋友的家都处在坐标平面的X轴上.ACBOY可以任意选择一个朋友的家开始访问,但是每次访问后他都必须回到出发点, ...
- 高性能web系统的架构和系统优化
07年毕业一直都在软件公司,14年来到一个互联网公司,给我的感受,区别主要在于: 软件公司需求相对稳定,能够按照计划按部就班的去实施,互联网公司需求相对来说不稳定,上线比较着急,大部分都是小迭代更新, ...
- Android Studio 遇见的第一个Error
最近在国内多次尝试在Eclipse下更新SDK无果后,最后终于通过FQ后结束了Google服务器无法访问的噩梦. 顺着墙外的梯子,一并下载Google的Android Studio尝鲜,安装成功后,就 ...