常见div+css网页布局(float,absolute)
网页布局-常见
1, float布局
(1)常规方法
<div id="warp">
<div id="column">
<div
id="column1">这里是第一列</div>
<div
id="column2">这里是第二列</div>
<div
class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div
class="clear"></div>
</div>
CSS:
以下是引用片段:
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
(2)margin等于-100%布局
有margin-left:-100%和margin-right:-100%两种情况,淘宝都有用。
使用margin-left的有:screen-hd .head 里面包括logo、搜索框和二维码。
使用margin-right的有:screen-hd .cont 里面包括导航菜单右侧的部分。
<div id="center"
class="column">
<h1>This is the main
content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left
sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right
sidebar.</h2>
</div>
CSS:
以下是引用片段:
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}
我自己实现的例子:
<div class="wrap">
<div
class="l">lllllll</div>
<div
class="c"><div
class="c-wrap">cccccccccccccccccc</div></div>
<div
class="r">r</div>
</div>
.wrap{width: 600px; height: 300px;
background: #eee;}
.l{display:inline;float:left; width:180px;
background:red; margin-right:-100%;}
.c{display:inline; float:left; width:100%;
overflow:hidden;}
.c .c-wrap{margin: 0 180px 0 180px;
background:blue; }
.r{display:inline;float:left;width:180px; background:yellow;
margin-left:-180px;}
2,
position布局
#left { position:absolute; top:0px; left:0px; width:120px; }
#middle {margin:20px 190px 20px 190px; }
#right {position:absolute; top:0px; right:0px; width:120px;}
常见div+css网页布局(float,absolute)的更多相关文章
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- DIV+CSS 网页布局之:混合布局
1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...
- DIV+CSS 网页布局之:一列布局
1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...
- DIV+CSS 网页布局之:三列布局
1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
- DIV+CSS网页布局常用的一些基础知识
CSS命名规范 一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/I ...
- DIV+CSS网页布局常用的一些基础知识整理
CSS命名规范 一.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二.常 ...
- DIV+CSS 网页布局之:两列布局
1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...
- div+css网页标准布局实例教程(一)
今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
随机推荐
- ssh登录nat模式的VMware虚拟机
有时候本地PC是固定IP上网方式且无多余IP,而我们又希望使用putty登陆VMware中的虚拟机且虚拟机可以上外网,那么这时候就可以使用端口映射. 1.本地环境简述 本地PC IP:192.168. ...
- 视频 -> 帧 浅析
原创:转载请注明出处 关于帧率 首先以下几个概念必须弄清楚 1.一个帧就是一个画面 2.视频有无数个帧组成 3.表达时间的量 CMTime 的定义: typedef struct { CMTimeV ...
- AsyncTask异步加载和HttpURLConnection网络请求数据
//获得网络数据 private void huodeshuju() { //这里是使用线程,已注释掉 /*new Thread(){ public void ...
- fzu Problem - 2232 炉石传说(二分匹配)
题目链接:http://acm.fzu.edu.cn/problem.php?pid=2232 Description GG学长虽然并不打炉石传说,但是由于题面需要他便学会了打炉石传说.但是传统的炉石 ...
- 4D(DRG、DLG、DOM、DEM)数据 概念
抱歉原文链接未知 Technorati 标签: DRG,DLG,DOM,DEM 以下有不同的说法,但是意思都很相近. 一. DOM (数字正射影像图):利用数字高程模型对扫描处理的数字化的航空相片.遥 ...
- 如何参与Hibernate-ORM项目
1.注册 hibernate jira账户,hibernate中的issue和bug都会在此论坛发布 注册地址:https://hibernate.onjira.com 2.创建Hibernate-O ...
- Junit单元测试的简单使用(主要是在spring框架下的项目)
首先是解释什么是单元测试,单元测试是指对于一个大型项目里,对于单一模块或者单一接口的测试. 然后解释为什么要写单元测试,首先对于一个大型的项目,如果你每次都要重启一遍服务器调页面或者接口的bug,那就 ...
- 分类算法-----KNN
摘要: 所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用她最接近的k个邻居来代表.kNN算法的核心思想是如果一个样本在特征空间中的k个最相似的样本中的大多数属于某一个类别,则该样本也属于 ...
- strut1.X和spring整合的二种方法
第一种集成方法 原理:在Action中取得BeanFactory对象,然后通过BeanFactory获取业务逻辑对象 缺点:产生了依赖,spring的类在action中产生了依赖查找.(注意和依赖注入 ...
- win7 64位andriod开发环境搭建
本文转自:http://www.cfanz.cn/index.php?c=article&a=read&id=65289 最近换了新电脑,装了win7 64位系统,安装了各种开发环境, ...