网页布局——绝对定位布局

1.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>绝对定位布局</title>
 6     <style type="text/css">
 7       .wrap div{
 8             position: absolute;
 9             min-height: 200px;
10         }
11         .left{
12             left: 0;
13             width: 300px;
14             background: red;
15         }
16         .right{
17             right: 0;
18             width: 300px;
19             background: blue;
20         }
21         .center{
22             left: 300px;
23             right: 300px;
24             background: pink;
25         }
26
27     </style>
28 </head>
29 <body>
30     <div class="wrap">
31         <div class="left">left</div>
32         <div class="center">绝对定位布局</div>
33         <div class="right">right</div>
34     </div>
35 </body>
36 </html>

效果如下:

原文地址:https://www.cnblogs.com/jing-tian/p/10988931.html

时间: 2024-12-29 23:40:40

网页布局——绝对定位布局的相关文章

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式 精通CSS.DIV网页样式与布局(四) ——页面背景 精通CSS.DIV网页样式与布局(三)——中秋效果图 精通CSS.DIV网页样式与布局(二)—— 段落 精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究

精通CSS+DIV网页样式与布局--图片效果

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:     精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CSS文字效果 精通CSS

精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q

CSS+DIV网页样式与布局——文字样式&amp;段落(一)

一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字.让CSS控制网页中的文字,使它不再那么枯燥平淡,从此网页文字变得绚丽多彩. 一.文字样式 文字样式主要包括文字的大小.颜色.字体等,具体包括如下 写一个小例子,综合运用上述所有的文字效果样式: 代码: <html> <head> <title>文字字体</title> <style> body

移动端网页 rem 自适应布局

(function(doc , win){var DocElement = doc.documentElement;var RsizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';function ResetSize(){var deviceWidth = DocElement.clientWidth;if(!deviceWidth){return false;}DocElement.style.fo

网页四种布局方式

即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分: 对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.. 自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局.布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化. 你可以把自适应布局看作是静态布局的一个系列. 流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度

css布局之布局

一.流式布局(Liquid Layout) 流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变.代表作栅栏系统(网格系统). 网页中主要的划分区域的尺寸使用百分数(搭配min-*.max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px.图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真). 1.布局特点:屏幕分辨率变化时,页面里元素的大小会变

RelativeLayout相对布局 安卓布局技巧

http://blog.csdn.net/nieweiking/article/details/38417317 RelativeLayout相对布局 相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置,这是实际布局中最常用的布局方式之一.它灵活性大很多,当然属性也多,操作难度也大,属性之间产生冲突的的可能性也大,使用相对布局时要多做些测试. 下面是常用的一些属性 第一类:属性值为true或false android:layout_centerHrizont

CSS布局-圣杯布局

圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, .lzcrg {margin:10px 0; min-width:400px;text-align: center;color:#ffffff; } .left {background-color: #4DBCB0; padding:20px 0;} .aside, .center, .right {