css实现布局

1.两栏布局

　　两栏布局一般就是一栏定宽一栏自适应（也就是流动）。分的细的话还有左栏定宽右栏自适应、右栏定宽左栏自适应。

　　举个栗子：一栏定宽200px，一栏自适应。

 <head>

     <meta charset="UTF-8">

     <title>两栏布局</title>

     <style>

         .wrap{clear: both;height: 400px;font-weight:bold;">#e9e9e9;}

         .side{float: left;width: 200px;font-weight:bold;">#d4d4d4}

         .content{margin-left: 200px;font-weight:bold;">#ccc;}

     </style>

 </head>

 <body>

 <div class="wrap">

     <div class="side">这里定宽</div>

     <div class="content">这里是内容自适应这。。。。。。应这里是内容自适应</div>

 </div>

 </body>

最终效果：

如果右栏定宽，左栏自适应

 <head>

     <meta charset="UTF-8">

     <title>两栏布局</title>

     <style>

         .wrap{clear: both;height: 400px;background-color: #e9e9e9;}

         .side{float: right;width: 200px;background-color: #d4d4d4}

         .content{margin-right: 200px;background-color: #ccc;}

     </style>

 </head>

 <body>

 <div class="wrap">

     <div class="side">这里定宽</div>

     <div class="content">这里是内容自。。。。应这里是内容自适应这里是内容自适应</div>

 </div>

 </body>

如图：

这里特别说明：定宽的一栏先写，然后根据哪一侧定宽再向哪边浮动，自适应的再相应设置margin。

2.三栏布局

　　三栏布局一般是左右栏定宽，中间自适应。

核心问题，就是处理右栏的定位，并在中栏内容区大小改变时控制右栏与布局的关系。

方法一：

控制两个外包装容器的外边距。其中一个外包装包围所有三栏，另一个外包装只包围左栏和中栏。

第一个外包装宽度100%，第二个外包装宽度100%，右外边距设为负数，给右边栏流出位置，右栏固定宽度左浮动。

第二个外包装中，左边栏固定宽度左浮动，中栏宽度自适应设为auto，分别设置左外边距和右外边距，分别为左栏和右栏宽度，此处边距应是正数。

第二个外包装也要左浮动

代码如下：

 <head>

     <meta charset="UTF-8">

     <title>三栏流动布局</title>

     <style type="text/css">

         * {margin:0; padding:0;}

         body {font:1em helvetica, arial, sans-serif;}

         a{ text-decoration: none; color: #fff;}

         li{ list-style-type: none; }

         div#main_wrapper{min-width:600px; max-width:1100px;margin:0 auto;}

         header {padding:5px 10px;background:#3f7ccf;}

         div#threecolwrap {float:left;width:100%;}

         div#twocolwrap{ float: left; width: 100%; margin-right:-210px; }

         nav {float:left;width:150px;background:#f00;padding:20px 0;}

         nav > * {margin:0 10px;}

         article {width:auto;margin-left:150px;margin-right:210px;background:#eee;padding:20px 0;}

         article > * {margin:0 20px;}

         aside {float:left;width:210px;background:#ffed53;padding:20px 0;}

         aside > * {margin:0 10px;}

         footer {clear:both;width:100%;text-align:center;background:#333;}

     </style>

 </head>

 <body>

 <div id="main_wrapper">

     <header>页头</header>

     <div id="threecolwrap">

         <div id="twocolwrap">

             <nav>

                 <ul>

                     <li><a href="#">无序列表</a></li>

                     <li><a href="#">无序列表</a></li>

                     <li><a href="#">无序列表</a></li>

                     <li><a href="#">无序列表</a></li>

                     <li><a href="#">无序列表</a></li>

                 </ul>

             </nav>

             <article>

                 <div class="inner">

                     这里是一些文本元素这里是...这里是一些文本元素.

                 </div>

             </article>

         </div>

         <aside>

             <ul>

                 <li><a href="#">第三列导航链接</a></li>

                 <li><a href="#">第三列导航链接</a></li>

                 <li><a href="#">第三列导航链接</a></li>

                 <li><a href="#">第三列导航链接</a></li>

                 <li><a href="#">第三列导航链接</a></li>

             </ul>

         </aside>

     </div>

     <footer>页脚</footer>

 </div>

 </body>

方法二：

css3的单元格实现，给每栏设置 display：table-cell；如果是固定栏，再设置上宽度即可。但此方法只支持ie7以上版本

 <head>

     <meta charset="UTF-8">

     <title>三栏流动布局</title>

     <style type="text/css">

         * {margin:0; padding:0;}

         body {font:1em helvetica, arial, sans-serif;}

         a{ text-decoration: none; color: #fff;}

         li{ list-style-type: none; }

         header {padding:5px 10px;background:#3f7ccf;}

         nav,article,aside{display: table-cell;}

         nav {width: 150px;background:#f00;padding:20px 0;}

         nav > * {margin:0 10px;}

         article {width:auto;background:#eee;padding:20px 0;}

         article > * {margin:0 20px;}

         aside {width:210px;background:#ffed53;padding:20px 0;}

         aside > * {margin:0 10px;}

         footer {clear:both;width:100%;text-align:center;background:#333;}

     </style>

 </head>

 <body>

 <div id="main_wrapper">

     <header>页头</header>

     <div id="threecolwrap">

         <nav>

             <ul>

                 <li><a href="#">无序列表</a></li>

                 <li><a href="#">无序列表</a></li>

                 <li><a href="#">无序列表</a></li>

                 <li><a href="#">无序列表</a></li>

                 <li><a href="#">无序列表</a></li>

             </ul>

         </nav>

         <article>

             <div class="inner">

                 这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素.

             </div>

         </article>

         <aside>

             <ul>

                 <li><a href="#">第三列导航链接</a></li>

                 <li><a href="#">第三列导航链接</a></li>

                 <li><a href="#">第三列导航链接</a></li>

                 <li><a href="#">第三列导航链接</a></li>

                 <li><a href="#">第三列导航链接</a></li>

             </ul>

         </aside>

     </div>

     <footer>页脚</footer>

 </div>

 </body>

css实现布局的更多相关文章

css双飞翼布局
双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...
奇妙的CSS之布局与定位
前言关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则稍后在"技 ...
【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
用css进行布局
用css进行布局一,开始布局的注意事项 1.作为最佳实践,应把html(内容)和css(显示)分离: 2.网站设计主要有两大类型:固定宽度(基于像素)和响应式(也称流式,使用百分数定义) 二,构建 ...
CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
html/css 盒子布局 Margin 、Padding 、border 以及清除浮动的知识（学习HTML过程中的小记录）
html/css 盒子布局 Margin .Padding .border 以及清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
CSS+DIV布局初练—DIV元素必须成对出现？
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

随机推荐

The 19th Zhejiang University Programming Contest Sponsored by TuSimple (Mirror)
http://acm.zju.edu.cn/onlinejudge/showContestProblems.do?contestId=391 A Thanks, TuSimple! Time ...
c# 获取 com 引用真实组件地址
1.根据guid获取 var clsid = new Guid("63EA2B90-C5A8-46F4-8A6E-2F2436C80003").ToString("B&q ...
Linux----------mysql基础
目录一.数据库介绍 1.1 数据库的优点 1.2 数据库的基本功能 1.3数据库的类型 1.4 关系型数据的组成 1.5 关系型数据库的常用组件 1.6 SQL语句 1.7 mysql命令使用 1. ...
Yii2 设计模式——工厂方法模式
工厂方法模式模式定义工厂方法模式(Factory Method Pattern)定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个.工厂方法让类吧实例化推迟到子类. 什么意思?说起来有这么 ...
为s5pv210烧录镜像
1.使用九鼎提供的工具,在sd卡中烧录uboot 2.重启开发板,进入uboot命令行, fdisk -c 0 fastboot 3.电脑安装fastboot驱动 fastboot烧录镜像
左耳听风-ARTS-第1周
Algorithm https://leetcode.com/problems/longest-common-prefix/ class Solution { public String longes ...
Guava - Ordering
guava中Ordering类是对Compartor接口的实现,但它也只是一个抽象类. 当调用Ordering.natural()方法时,它就会返回一个NaturalOrdering的对象,Natur ...
内存问题-JVM调优思路
通常,内存的问题就是 GC 的问题,因为 Java 的内存由 GC 管理.有2种情况,一种是内存溢出了,一种是内存没有溢出,但 GC 不健康. 内存溢出的情况可以通过加上 -XX:+HeapDumpO ...
SQL 生日得到年龄
CREATE FUNCTION ufn_hr_getagefrombirthday ( @birthday DATE, @now DATE =NULL ) ) BEGIN IF (@now IS NU ...
Galaxy2D游戏引擎常见问题解答
◆Galaxy2D游戏引擎开源吗? Galaxy2D游戏引擎不开源. ◆Galaxy2D相对HGE有何优点? Galaxy2D相对HGE有以下优点: (1)自带音频播放功能,HGE ...

css实现布局

css实现布局的更多相关文章

随机推荐

热门专题