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

随机推荐

numpy的函数使用（一）：np.arrange()
arrange函数用于创建等差数组. 返回一个有起点和终点固定长的list e.g.[1, 2, 3],起点是1,终点是5,步长是1.步长相当于等差数列中的公差. 参数:可以接受1.2.3个参数. 注 ...
Gitlab迁移之数据库报错解决
Gitlab迁移需同版本迁移,恢复过程会出现如下提示: WARNING: no privileges were granted for "public" 解决方法: 1. 编辑/ ...
思科模拟器-使用vlan划分子网
此博客为初始化版本,未经完善,后续我再整理一下小技巧:有时候我们不小心执行了一条错误命令,可以尝试使用在该命令前加一个no进行撤销首先说一下网络设备的选择在该实验中我主要用到一台三层交换机(思科 ...
20175202 《Java程序设计》第三周学习总结
20175209 2018-2019-2 <Java程序设计>第三周学习总结教材知识点总结 1.编程语言发展阶段: 面向机器语言——面向过程语言——面向对象语言. 2.类声明: 类名必须 ...
第5章 Hyperledger Fabric功能
Hyperledger Fabric is a unique implementation of distributed ledger technology (DLT) that delivers e ...
reset Cisco 2960 password
详见:http://www.cahilig.net/2014/04/14/how-reset-cisco-2960-switch-password-without-losing-your-config ...
Python中安装MySQL
Windows 下Python3.6安装 mysql_python 存在各种不成功,切换到 SQLAlchemy也不行需要安装MySQL_python.需要安装mysqlclient. 执行 pip ...
MQTT研究之EMQ：【JAVA代码构建X509证书【续集】】
openssl创建私钥,获取公钥,创建证书都是比较简单的,就几个指令,很快就可以搞定,之所以说简单,是因为证书里面的基本参数配置不需要我们组装,只需要将命令行里面需要的几个参数配置进去即可.但是呢,用 ...
错误界面 SQL2008备份集中的数据库备份与现有的数据库不同，错误号码：3154。
转载来源 https://blog.csdn.net/zaocha321/article/details/8466735 因为我也用这个方法成功了.所以记录下来错误界面 SQL2005备份集中的数 ...
C#中CefSharp的简单使用
1. 创建32位winform项目必须指定32位或64位这里使用32位 2. 下载CefSharp相关文件 3. 复制CefSharp相关文件到项目debug目录并添加引用 https://blo ...

css实现布局

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

随机推荐

热门专题