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

随机推荐

初探OpenCL之Mac OS上的hello world示例
了解了深度学习的崛起,引起了目前OpenCL的需求,大致了解一下. 相关内容:http://blog.csdn.net/leonwei/article/details/8880012 本身OpenCL ...
前端的UI框架
iView 框架使用场景 iView 主要适合大中型中后台产品,比如某产品的运营平台.数据监控平台.管理平台等,从工程配置.到样式布局,甚至后面规划的业务套件,是一整套的解决方案,所以它可能不太适合 ...
HttpClient设置连接超时时间
https://www.cnblogs.com/winner-0715/p/7087591.html 使用HttpClient,一般都需要设置连接超时时间和获取数据超时时间.这两个参数很重要,目的是为 ...
Assembly Experiment3
AIMS & PREPARATIONS of THIS EXPERIMENT: 1st point of this experiment: realize the programme t1.a ...
Java中反射的实现方式
所谓反射,是指在运行时状态中,获取类中的属性和方法,以及调用其中的方法的一种机制.这种机制的作用在于获取运行时才知道的类(Class)及其中的属性(Field).方法(Method)以及调用其中的方法 ...
c# 实现 HSV 调色板
界面相关核心代码如下: public partial class Form1 : Form { public Form1() { InitializeComponent(); } private vo ...
华为4K机顶盒EC6108V9U从原联通更换为电信的IPTV账号成功经验
4K设备直接在淘宝上买30块钱升级4K机顶盒,i视视手机app控制电视和手机投屏硬件设备:EC6108V9U由X省联通更换为四川电信采坑经验: 1.要从现有的机顶盒获取mac地址.stbid.ip ...
Spring Cloud Alibaba正式入驻Spring Cloud官方孵化器
第一个版本发布内容如下: 开源组件(spring-cloud-alibaba开头): 服务发现(Service Discovery) 配置管理(Configuration Management) 高可 ...
express中遇到的一个小问题“403”
这样子的一个express简单项目文件执行会出现403 Forbidden的错误: var express = require('express'); var app = express(); app ...
LBA和CHS转换
磁盘填充,先填满一个柱面之后,再填下一个柱面.LBA是从0开始的. LBA = (C-CS)*HPC*SPT + (H-HS)*SPT + (S-SS) C, H, S: 当前的CHS值 CS, HS ...

css实现布局

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

随机推荐

热门专题