很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局。

position 位置,来给div定位

1、position:fixed;锁定位置(相当于浏览器窗口的位置),默认层数最高。例如有些网站的右下角弹窗。

练习:在右下角做一个弹窗,锁定位置,不随网页滚动而滚动。

步骤:

一、先做一个文字的弹窗

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>格式与布局</title>
<style type="text/css">
.wtc
{
width:200px; height:150px; background-color:#F00;
border:yellow solid 6px;
line-height:150px; text-align:center;
}
</style>
</head> <body>
<div class="wtc"><b><u>Welcom To China!</u></b></div>
</body>
</html>

welcome to china

二、将弹窗放置在屏幕右下角并锁定位置(插入空行加长页面来已显示滚动条)——若不写position:fixed;代码,弹窗设置的位置无法确定相对于谁的位置

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>格式与布局</title>
<style type="text/css">
.wtc
{
width:200px; height:150px; background-color:#F00;
border:yellow solid 6px;
line-height:150px; text-align:center;
}
</style>
</head> <body>
<div class="wtc" style="right:30px; bottom:30px; position:fixed;"><b><u>Welcom To China!</u></b></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /> </body>
</html>

position:fixed

2、position:absolute 绝对位置

外层没有position:absolute(或relative);那么div相对于浏览器定位,外层有position:absolute(或relative);那么div相对于外层边框定位

练习:a、指定一个div,蓝色边框背景白色,内部再指定一个div,红色背景有文字,外部div不指定position,两个div都不指定position

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>格式与布局</title>
<style type="text/css">
.wtc
{
width:200px; height:150px; background-color:#F00;
border:yellow solid 6px;
line-height:150px; text-align:center;
}
</style>
</head> <body>
<div style="border:10px blue solid; width:500px; height:400px;"><div class="wtc"><b><u>Welcom To China!</u></b></div></div> </body>

不指定position

b、上述div,外部div指定一个position:absolute;后,外部div会带着内部div移动,且随着滚动条会移动位置,是相对于整个网页锁定了位置

absolute绝对位置,会跟随网页滚动而改变在窗口的位置,相对于整个网页位置不变

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>格式与布局</title>
<style type="text/css">
.wtc
{
width:200px; height:150px; background-color:#F00;
border:yellow solid 6px;
line-height:150px; text-align:center;
}
</style>
</head> <body>
<div style="border:10px blue solid; width:500px; height:400px; position:absolute; right:250px; top:100px;"><div class="wtc"><b><u>Welcom To China!</u></b></div></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>

外部div-position

c、上述div,外部div不指定position,内部div指定一个position:absolute;后,外部div没有改变位置,内部div相对于整个网页改变了位置

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>格式与布局</title>
<style type="text/css">
.wtc
{
width:200px; height:150px; background-color:#F00;
border:yellow solid 6px;
line-height:150px; text-align:center;
}
</style>
</head> <body>
<div style="border:10px blue solid; width:500px; height:400px;"><div class="wtc" style="position:absolute; right:25px; top:10px;"><b><u>Welcom To China!</u></b></div></div><br />
</body>

内部div-position

d、上述div,同时设置内外div的position,此时,外部div相对于网页确定位置,内部div相对于外边框(外部div)确定位置

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>格式与布局</title>
<style type="text/css">
.wtc
{
width:200px; height:150px; background-color:#F00;
border:yellow solid 6px;
line-height:150px; text-align:center;
}
</style>
</head> <body>
<div style="border:10px blue solid; width:500px; height:400px; position:absolute; right:250px; top:100px;"><div class="wtc" style="position:absolute; right:25px; top:10px;"><b><u>Welcom To China!</u></b></div></div>
</body>

内外position

3、position:relative;相对位置

a、输入三个div,仅指定长宽和背景颜色

<body>
<div style="background-color:#F00; width:200px; height:100px;"></div>
<div style="background-color:#CF0; width:200px; height:100px;"></div>
<div style="background-color:#0F0; width:200px; height:100px;"></div>
</body>

3个div

b、在a的基础上,设置第二个div黄色区域向下、向右移动,position用absolute定位,黄色区域相对于浏览器窗口定位,而绿色区域向上紧跟红色区域

<body>
<div style="background-color:#F00; width:200px; height:100px;"></div>
<div style="background-color:#CF0; width:200px; height:100px; top:50px; left:100px; position:absolute;"></div>
<div style="background-color:#0F0; width:200px; height:100px;"></div>
</body>

移动div-absolute定位

c、在a的基础上,设置第二个div黄色区域向下、向右移动,position用relative定位,黄色区域相对于原有位置定位,而绿色区域还在原黄色位置下方

<body>
<div style="background-color:#F00; width:200px; height:100px;"></div>
<div style="background-color:#CF0; width:200px; height:100px; top:50px; left:100px; position:relative;"></div>
<div style="background-color:#0F0; width:200px; height:100px;"></div>
</body>

移动div-relative定位

结合b和c,说明absolute绝对位置是相对于浏览器页面位置定位,此时div不占有实际位置,所以绿色区域紧跟红色区域;relative相对位置是相对于div原有位置定位,此时div是实际占有位置的,所以绿色区域保持在原来黄色区域下方。

4、分层(z-index)

屏幕显示窗口虽然是在二维页面上显示,但实际是三维显示,因为窗口是重叠的,有上下层之分,上层总是覆盖下层,就像是一摞纸。

在上述c中,黄色区域覆盖了绿色区域,如何让绿色区域覆盖黄色区域?在绿色区域div-style中添加代码“z-index:2; position:relative;”即可

<body>
<div style="background-color:#F00; width:200px; height:100px;"></div>
<div style="background-color:#CF0; width:200px; height:100px; top:50px; left:100px; position:relative;;"></div>
<div style="background-color:#0F0; width:200px; height:100px; position:relative; z-index:2;"></div>
</body>

z-index

5、float:left;(right)流式布局

left、right时不需要规定位置(top、right),直接相对于浏览器,若外部被包裹,相对于外部div的位置的左上或右上显示。

a、在新建的html中输入两个div,分别指定float:left;和float:right;

<body>
<div style="background-color:#0F0; width:100px; height:300px; float:left;"></div>
<div style="background-color:#FF0; width:100px; height:300px; float:right;"></div>
</body>

float:left(right)

b、用一个div包裹这两个div,并居中,这种样式就像网站中悬浮的广告框

<body>
<div style="border:#F00 solid 5px; width:700px; height:500px; margin:0px auto;">
<div style="background-color:#0F0; width:100px; height:300px; float:left;"></div>
<div style="background-color:#FF0; width:100px; height:300px; float:right;"></div>
</div>
</body>

用div包裹

c、在a的基础上,我们用边框代替背景色,复制粘贴多个float,发现,div是从左至右、从右至左的顺序进行排列

<body>
<div style="border:#F00 solid 5px; width:700px; height:500px; margin:0px auto;">
<div style="border:#0F0 solid 3px; width:100px; height:300px; float:left;">a</div>
<div style="border:#0F0 solid 3px; width:100px; height:300px; float:left;">b</div>
<div style="border:#0F0 solid 3px; width:100px; height:300px; float:left;">c</div>
<div style="border:#FF0 solid 3px; width:100px; height:300px; float:right;">d</div>
<div style="border:#FF0 solid 3px; width:100px; height:300px; float:right;">e</div>
<div style="border:#FF0 solid 3px; width:100px; height:300px; float:right;">f</div>
</div>
</body>

多个float

d、将多个div放在网页中,设置float

<body>
<div style="border:#0F0 solid 3px; width:100px; height:300px; float:left;">a</div>
<div style="border:#0F0 solid 3px; width:100px; height:300px; float:left;">b</div>
<div style="border:#0F0 solid 3px; width:100px; height:300px; float:left;">c</div>
<div style="border:#0F0 solid 3px; width:100px; height:300px; float:left;">d</div>
<div style="border:#0F0 solid 3px; width:100px; height:300px; float:left;">e</div>
<div style="border:#0F0 solid 3px; width:100px; height:300px; float:left;">f</div>
<div style="border:#FF0 solid 3px; width:100px; height:300px; float:right;">aa</div>
<div style="border:#FF0 solid 3px; width:100px; height:300px; float:right;">bb</div>
<div style="border:#FF0 solid 3px; width:100px; height:300px; float:right;">cc</div>
<div style="border:#FF0 solid 3px; width:100px; height:300px; float:right;">dd</div>
<div style="border:#FF0 solid 3px; width:100px; height:300px; float:right;">ee</div>
<div style="border:#FF0 solid 3px; width:100px; height:300px; float:right;">ff</div>
</body>

多个float

此时,缩小浏览器会发现,所有div像流水一样排列

e、练习

第一步:用float:left;排5个灰色区域

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>格式与布局</title>
<style type="text/css">
.a
{
background-color:#; width:100px; height:100px; margin:10px; float:left;
}
</style>
</head> <body>
<div class="a">AA</div>
<div class="a">BB</div>
<div class="a">CC</div>
<div class="a">DD</div>
<div class="a">EE</div>
</body>

第二步:用一个div包含他们

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>格式与布局</title>
<style type="text/css">
.a
{
background-color:#; width:100px; height:100px; margin:10px; float:left;
}
</style>
</head> <body>
<div style="background-color:#0F0; width:300px; height:400px;">
<div class="a">AA</div>
<div class="a">BB</div>
<div class="a">CC</div>
<div class="a">DD</div>
<div class="a">EE</div>
</div>
</body>

一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float的更多相关文章

  1. HTML-★★★格式与布局fixed/absolute/relative/z-index/float★★★

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  2. css 定位(fixed > absolute > relative)与层级zIndex 的权限认知

    原则1: fixed > absolute > relative原则2: zIndex 越高越牛逼,不管你是谁无视身份.原则3: 青出于蓝而胜于蓝,儿子永远比父亲强原则4: 平台很重要. ...

  3. 2016/2/19 position: fixed absolute relative z-index float 半透明效果

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口.      显示效果  无论滚动条怎么移动  都固定在显示页面的一个位置不动 二.position:a ...

  4. 关于CSS格式与布局中的基础知识的简单操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 9月11日上午HTML有序列表、无序列表、网页的格式和布局

    样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...

  6. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  7. Android UI基础之五大布局

    Android  UI基础之五大布局 Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Andro ...

  8. css样式表:样式分类,选择器。样式属性,格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  9. css样式,边界和边框,格式和布局

    1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

随机推荐

  1. Zygote浅谈

    Zygote是什么 操作系统中,进程实际上是文件到地址空间的映射像.进程将要运行时,由操作系统将其映射到地址空间,完成这项工作的事物本质也应是一个进程,我们称这个进程为孵化进程,那么这个进程怎么收到消 ...

  2. BZOJ 2190: [SDOI2008]仪仗队

    2190: [SDOI2008]仪仗队 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 2689  Solved: 1713[Submit][Statu ...

  3. matlab FDR校正

    http://home.52brain.com/forum.php?mod=viewthread&tid=27066&page=1#pid170857 http://www.mathw ...

  4. shenben语录

    1.别让别人的一句话将你击垮! 2.任何人都不能替你做决定,除了你自己! 3.对于省选: 想去就去,文化课什么的都不是问题. 如果不去,二十年后的自己一定会后悔的.

  5. Log4net在类库中的用法

    app.config应当放置在解决方案的根目录下.具体流程如下: 第一步:应该下载log4net.dll并引入到你的项目中,下载见附件 第二步:需要配置相关的配置文件App.config或Web.co ...

  6. Tree Traversals

    Tree Traversals 原题链接 常见的二叉树遍历的题目,根据后序遍历和中序遍历求层次遍历. 通过后序遍历和中序遍历建立起一棵二叉树,然后层序遍历一下,主要难点在于树的建立,通过中序遍历和后序 ...

  7. scala 学习笔记(04) OOP(上)主从构造器/私有属性/伴生对象(单例静态类)/apply方法/嵌套类

    一.主从构造器 java中构造函数没有主.从之分,只有构造器重载,但在scala中,每个类都有一个主构造器,在定义class时,如果啥也没写,默认有一个xxx()的主构造器 class Person ...

  8. 浅谈设计模式--建造器模式(Builder Pattern)

    建造器模式,是于创建带有大量参数的对象,并避免因参数数量多而产生的一些问题(如状态不一致-JavaBean的setter模式). 如果参数多且有些是必须初始化的,有些是不一定需要初始化的时候,创建对象 ...

  9. c++多重继承小结

    如果一个类从两个不同的类里继承两个同名的成员,则需要在派生类中使用类限定符来区分他们. 即在从A和B派生出来的c类中使用a::Show()和B::Show()来区分从这两个类那里继承的show()方法 ...

  10. 后记:Cookie安全大辩论总结

    前天,我发布在博客园上的某知名电商网站的Cookie漏洞引发园友们的热议,学到了很多知识,现在整理一下其中比较激烈的技术讨论.谁对谁错每个人自己心中都有一把称,很多时候都是我无法说服你,你也无法说服我 ...