DIV+CSS 网页布局之：三列布局
1、宽度自适应三列布局
三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。
同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
height:50px;
background:blue;
}
#main{
width:100%;
overflow:hidden;
}
#main .main-left{
width:25%;
height:800px;
background:red;
float:left;
}
#main .main-center{
width:50%;
height:800px;
background:lightgreen;
float:left;
}
#main .main-right{
width:25%;
height:800px;
background:pink;
float:right;
}
#footer{
height:50px;
background:gray;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div id="main">
<div class="main-left">左列</div>
<div class="main-center">中间</div>
<div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>
</body>
</html>
2、左右两列固定宽度，中间内容宽度自适应
要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两边固定中间自适应布局</title>
<style>
*{margin:0;padding:0;}
#herder{
height:50px;
background:blue;
}
#main{
width:100%;
position:relative;
}
#main .main-left{
width:200px;
height:800px;
background:red;
position:absolute;
left:0;
top:0;
}
#main .main-center{
height:800px;
background:lightgreen;
margin:0 310px 0 210px;
}
#main .main-right{
width:300px;
height:800px;
background:pink;
position:absolute;
right:0;
top:0;
}
#footer{
height:50px;
background:gray;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div id="main">
<div class="main-left">左列</div>
<div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。</div>
<div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>
</body>
</html>
DIV+CSS 网页布局之：三列布局的更多相关文章
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- 慕课笔记利用css进行布局【三列布局】
三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...
- DIV+CSS 网页布局之：一列布局
1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...
- DIV+CSS 网页布局之：混合布局
1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- div+css网页标准布局实例教程（一）
今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
随机推荐
- 如何使用iframe实现隐藏的CSRF
1.攻击者在“页面1”中http://www.b.com/indexb.html中写下如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 来试试这个来自静态代码分析工具PVS Studio提供C++的小测验吧
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:来试试这个来自静态代码分析工具PVS Studio提供C++的小测验吧.
- ARR状态监控脚本
##################################################################################### # THIS IS SAMP ...
- ThinkPHP3.1新特性： 多层MVC支持
ThinkPHP基于MVC(Model-View-Controller,模型-视图-控制器)模式,不过均支持多层(multi-Layer)设计. 模型(Model)层:默认的模型层由Model类构成, ...
- Redis学习手册(实例代码)
在之前的博客中已经非常详细的介绍了Redis的各种操作命令.运行机制和服务器初始化参数配置.本篇博客是该系列博客中的最后一篇,在这里将给出基于Redis客户端组件访问并操作Redis服务器的代码示例. ...
- php连接oracle数据库(linux)（转）
php连接访问Oracle是用过oci函数,以下是整理的文档 1.安装Apache和php包 yum install -y httpd php* 2.下载Oracle组件 oracle-instant ...
- android学习资料
在线查看android源码 1. https://github.com/android 2. http://grepcode.com/project/repository.grepcode.com ...
- Cookie中用户登录信息的提示
public class LoginServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpSe ...
- android的activity的跳转
1.无参数的跳转 先在layout下建立一个factivity.xml,在里面添加2个Button按钮和一个TextView,并添加属性 , 然后建立以个sactivity.xml文件, 在src下建 ...
- 关于调用系统照相机Activity被销毁问题解决
<activity android:name=".visitplan_finish" android:co ...