网页布局-常见

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)的更多相关文章

  1. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  2. DIV+CSS 网页布局之:混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  3. DIV+CSS 网页布局之:一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  4. DIV+CSS 网页布局之:三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  5. DIV+CSS网页布局常用的一些基础知识

    CSS命名规范 一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/I ...

  6. DIV+CSS网页布局常用的一些基础知识整理

    CSS命名规范 一.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二.常 ...

  7. DIV+CSS 网页布局之:两列布局

    1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...

  8. div+css网页标准布局实例教程(一)

    今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...

  9. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

随机推荐

  1. C++调用com控件方法

    转载自:http://blog.csdn.net/haijun286972766/article/details/6273414 最近要求做一个C++调用com组件的DEMO.由于自己对C++并无研究 ...

  2. python 第三方库下载

    C:\Python27\Scripts 路径下: easy_install.exe: C:\Python27\Scripts>easy_install.exe pycrypto pip.exe: ...

  3. hdu 1001 二叉树搜索

    Problem Description 判断两序列是否为同一二叉搜索树序列 Input 开始一个数n,(1<=n<=20) 表示有n个需要判断,n= 0 的时候输入结束.接下去一行是一个序 ...

  4. CodeForces 429 B B. Working out

    Description Summer is coming! It's time for Iahub and Iahubina to work out, as they both want to loo ...

  5. js 判断网页类型

    <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title ...

  6. redis 工具类 单个redis、JedisPool 及多个redis、shardedJedisPool与spring的集成配置

    http://www.cnblogs.com/edisonfeng/p/3571870.html http://javacrazyer.iteye.com/blog/1840161 http://ww ...

  7. jq的合成事件

    jq中有两个合成事件 hover()和toggle() 1.hover() hover方法用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函数(enter),当光标移出这个元素时,会触发 ...

  8. C# 经典入门12章-System.Collections.Generic命名空间

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtUAAAAsCAIAAAAl09PEAAAgAElEQVR4nOx95Vscyd7285cMPrg7Aw ...

  9. 关于jsp页面 title中文乱码问题的解决方法

    我知道了 我jsp饮用了html 是我2个页面都写了Title 然后冲突了 就乱码了 分享给大家

  10. 文件夹添加 IIS 应用程序池用户权限

    http://serverfault.com/questions/81165/how-to-assign-permissions-to-applicationpoolidentity-account ...