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

随机推荐

m个小朋友手拉手站成一个圈，从第k个小朋友开始报数，报到n的那个小朋友退到圈外，然后他的下一位重新报“1”。这样继续下去，直到只剩下一个小朋友，求解这个小朋友原来站什么地方。
约瑟夫环问题. package pack; import java.util.*; public class demo_2 { static int a[]; public static void m ...
关于使用git上传远程仓库的两种情况（新项目与老项目）
具体的git配置与github仓库ssh配置在这里就不再赘述,本次只讲自己之前遇到的两个内容 1.还没有项目,将远程仓库clone下来直接在里边写项目. 2.已有项目,将已有的项目直接添加到建立好的远 ...
windows下配置下burpsuite的小方法。
1.下载破解版burpsuite和正版burpsuite. 2.安装正版burpsuite(免费版) 3.打开安装路径 4.把破解版的burp拷贝到安装路径下 5.该路径下应该有个burpsuite_ ...
mybatis 中javaType和OfType 的区别
JavaType和ofType都是用来指定对象类型的,但是JavaType是用来指定pojo中属性的类型,而ofType指定的是映射到list集合属性中pojo的类型.pojo类: publiccla ...
MySQL和MySQL的注释方式
MySQL的注释方式 mysql 服务器支持如下几种注释方式: (1) # 到该行结束 # 这个注释直到该行结束 mysql> SELECT 1+1; (2)-- 到该行结束 ...
SQL Server 快速大数据排序方法
SQL Server 中虽然有 ORDER BY NewID() 方法,但对于数据量比较大的结果集来说,排序那慢的可不是一星半点. 微软官方给了一种方案,https://msdn.microsoft. ...
北京U3D外包团队 UE4红军抗战案例 Unity3D红军抗战案例 UE4下载和安装虚幻4游戏引擎
刚完整UE4红军抗战案例 Unity3D红军抗战案例,有在线演示(版权关系不方便发图),有UE4或Unity项目定制外包开发的欢迎联系我们进入虚幻4的官方主页(https://www.unreale ...
SQL脚本--总耗CPU最多的前个SQL --平均耗CPU最多的前个SQL
--总耗CPU最多的前个SQL SELECT TOP 20 total_worker_time/1000 AS [总消耗CPU 时间(ms)],execution_count [运行次数], qs.t ...
sql 查询结果自定义排序
sqlserver 使用case when then 语句来实现 select name from fruit order by case name end oracle 使用decode实现 ,,, ...
sql 查询结果转百分比
select convert(varchar,convert(decimal(10,2),迟到人次*1.0/在校生人数*100))+'%'

css实现布局

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

随机推荐

热门专题