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> ...

随机推荐

VMWare安装
1. VMware 的下载和安装 VMware Workstation 15 Pro for Windows(64 位)的下载地址如下: 官方试用版地址:http://www.vmware.com/c ...
Exception和解决方案
org.hibernate.HibernateException: No Session found for current thread sessionFactory org.springframe ...
DEA快速生成get&set方法
将下图UserInfo类中的几个对象全部生成 get/set方法: 方法步骤: 1. 将光放置空白区域,按 [alt + (fn+insert)] ,或 [ alt + insert] 键! 2. ...
linux 终端颜色代码
echo -e "\033[背景;字体颜色m 字符串\033[0m" eg : echo -e "\033[30m 黑色字 \033[0m" 字体颜色(30 ...
Hello_World
简单A+B #include <stdio> int main() { int a,b; scanf("%d%d",&a, &b); printf(&q ...
解析观察者模式在安卓程序中的应用——如何实现跨界面Handler通讯
这里特使用了github中的一个项目作为例子进行解析,地址为:https://github.com/LiqiNew/HandlerFrame/tree/master/handlerFrame/src/ ...
ST&倍增LCA
回顾st算法,它的一大功能是求区间最值.先将整个区间划分成若干个小的区间,求出最值,然后将小的区间合并成一个大的区间,我们这里要用到一个数组minn[i][j],划重点!如果我们要求的是区间最小值,m ...
C语言题库----指针
1.如果f是一个函数,请说明 f() 和f的意思. f是函数的地址,f()是函数 2.怎样理解数组的下标运算? 先偏移,后取址. 3.int *p,*q; int a[]={10,20,30,40}; ...
Missile Command 导弹指令
发售年份 1980 平台街机开发商雅达利(Atari) 类型射击 https://www.youtube.com/watch?v=nokIGklnBGY
spring事务详解（二）简单样例
系列目录 spring事务详解(一)初探事务 spring事务详解(二)简单样例 spring事务详解(三)源码详解 spring事务详解(四)测试验证 spring事务详解(五)总结提高一.引子 ...

css实现布局

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

随机推荐

热门专题