css position实现自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:100px; height:600px; background:#ccc;position:absolute; left:0; top:0}
.main{ height:600px;margin:0 210px 0 110px; background:#9CF}
.right{ height:600px; width:200px; position:absolute; top:0;right:0; background:#FCC;}
</style>
</head>

<body>

    <div class="left">left</div>
    <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样,我们将网页看作一张报纸,一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的,你可以领会要点,举一反三。</div>
    <div class="right">right</div>
</body>
</html>

时间: 2024-12-05 23:24:11

css position实现自适应的相关文章

CSS position 属性

实例 定位 h2 元素: h2 { position:absolute; left:100px; top:150px; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有主流浏览器都支持 position 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.

CSS position的absolute和relative的解析[转]

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义:在CSS中关于定位的内容是:      position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top,bottom,

css position(定位)

一个定位元素(positioned element)是其计算位置属性为 relative, absolute, fixed 或 sticky 的一个元素. 相对定位元素(relatively positioned element)是计算后位置属性为 relative的元素. 绝对定位元素(absolutely positioned element)是计算后位置属性为 absolute 或 fixed 的元素. 粘性定位元素(stickily positioned element)是计算后位置属性

HTML CSS——position学习终结者(二)

在博客<HTML CSS--position学习终结者(一)>中我们认识到如果某一absolute作用的元素的父对象(或曾祖父,只要是父级对象)设置了position属性且position的属性值为absolute.relative或者fixed,那么这个子元素会参照离它(指子元素)最近的且position的属性值为absolute.relative或者fixed的父元素进行定位,子元素的定位点为父元素的左上角,学习过padding的人可能会这样想:这个时候如果父元素设置了padding样式,

转:css:Position

http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html CSS Position 定位属性 本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍position的四种定位方式:绝对.相对.固定.默认. 3. 总结 position:以示例的方式展示position. 1. 介绍 1.1 说

CSS position绝对定位absolute relative

常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构   -   TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对

前端开发必知必会:CSS Position 全解析

当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来. CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细

CSS position:fixed 实现html元素固定于某位置

本文章通过实例向大家讲解position:fixed 实现html元素固定于某位置.实例中div将固定于网页右下角,主要使用到css position:fixed 属性,需要的码农可以参考一下. CSS实现div固定于网页右下角实例代码:将一个元素固定于网页右下角的效果使用非常频繁,比如返回顶部的按钮,或者说是信息提示框之类的,下面就介绍一下如何使用CSS实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <title>C

css position全解析

1.position:static 所有的元素的默认定位都是position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置. 2.position:relative 如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素.[意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了] 3.position:absolute 当指定 positio