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 ...
随机推荐
- python getpass模块：隐藏不显示输入的密码
不知道为什么,本机测试必须要在debug模式下才正常运行.. import getpass #用于隐藏用户输入的字符串,常用来接收密码 def checkuser(user,passwd): ': r ...
- codeforces 232D Fence
John Doe has a crooked fence, consisting of n rectangular planks, lined up from the left to the righ ...
- Dapper inner join
Dapper中的一些复杂操作和inner join应该注意的坑 上一篇博文中我们快速的介绍了dapper的一些基本CURD操作,也是我们manipulate db不可或缺的最小单元,这一篇我们介绍下相 ...
- 关于后台数据库正常存储中文通过Ajax方式传递到前台变成问号的处理
我的一个程序,用到的后台数据库MySql,字段是Varchar,Character Set是utf8,字段能且已经正确存储了中文. 从数据库取出信息后,在后台Java代码里Debug看到正确的中文. ...
- MSSQL BACKUP WEBSHELL
Title:MSSQL BACKUP WEBSHELL -- Long Long Ago. Version:MSSQL 2005 && + ';alter/**/database/** ...
- 关于function与closure
function 方式 scope function closure expression anonymous function class(this, prototype)
- [Android] 输入系统（二）
在上一篇文章的最后,我们发现InputDispatcher是调用了InputChannel->sendMessage把键值发送出去,那么相应的,也有接收键值的地方.接收函数是InputChann ...
- [Delphi]检查URL是否有效的函数
function CheckUrl(url: string): boolean; var hSession, hfile, hRequest: hInternet; dwindex, dwcodele ...
- moveToThread的最简单用法（依葫芦画瓢即可）（使得线程也更偏向于信号槽的使用方法）
/*! * \file main.cpp * * Copyright (C) 2010, dbzhang800 * All rights reserved. * */ #include <QtC ...
- Mysql 主从复制，读写分离设置
一个简单完整的 Mysql 主从复制,读写分离的示意图. 1. 首先搭建 Mysql 主从架构,实现 将 mater 数据自动复制到 slave MySQL 复制的工作方式很简单,一台服务器作为主机, ...