html第五节课
格式布局
一、position:fixed
锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。
示例:
二、position:absolute
1.外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。
2.外层有position:absolute(或relative);那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素)。
示例:
三、position:relative
相对位置。
如下图,相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。
示例:
四、分层(z-index)
在z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。
在上面relative的示例中,我们看到了aa遮住了a,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让a盖住aa?如下:
示例:
五、float:left、right
Left、right时不用给他规定位置(left、top),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。
overflow:hidden; //超出部分隐藏;scroll,显示出滚动条;
<div style="clear:both"></div> //截断流
设置超链接的样式示例:
附:cursor:pointer 鼠标指到上面时的形状
© 版权符号©
半透明效果:
<div class="box">透明区域<div>
在样式表中的代码为:
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
<!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>
#a
{
border:2px solid blue;
height:100px;
width:100px;
background-color:#0F6;
right:60px;
bottom:70px;
position:fixed;}
.b
{
border:2px solid blue;
height:100px;
width:100px;
background-color:#0F6;
right:0px;
bottom:0px;
position:absolute;}
.c
{
border:2px solid red;
width:400px;
height:200px;}
.d
{
border:2px solid red;
width:400px;
height:200px;
position:absolute;}
#aaa
{
border:2px solid yellow;
background-color:#9F3;
height:100px;
width:100px;
left:30px;
top:30px;
position:fixed;}
#bbb
{
border:2px solid yellow;
background-color:#9F3;
height:100px;
width:100px;
left:30px;
top:30px;
position:relative;}
</style>
</head>
<body>
<div id="a">广告招商</div>
<div class="c">c<div class="b">b</div></div>
<div class="d">d<div class="b">bb</div></div>
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
</body>
</html>
<!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>
#aaa
{
border:2px solid yellow;
background-color:#9F3;
height:100px;
width:100px;
left:30px;
top:30px;
position:fixed;
overflow:visible;
}
#bbb
{
border:2px solid yellow;
background-color:#9F3;
height:100px;
width:100px;
left:60px;
top:60px;
position:relative;}
#ccc
{
border:#0C0 solid 2px;
height:300px;
width:100px;
float:right;}
#ddd
{
border:#0C0 solid 2px;
height:300px;
width:100px;
float:left;}
</style>
</head>
<body><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 />
<div id="ccc">广告位置招商</div><div id="ddd">广告位ddd</div><div id="ddd">广告位eee</div><div id="ccc">广告位置招商fff</div>
<!--<div id="aaa">aaa<div id="bbb">bbb</div></div> -->
</body>
</html>
最新文章
- [LeetCode] Merge Intervals 合并区间
- Python获取当前日期及时间
- 转换流——OutputStreamWriter类与InputStreamReader类
- 单机最大tcp连接数
- .NET设计模式(3):抽象工厂模式(Abstract Factory)(转)
- demo virdata 虚拟数据
- Java基础知识强化05:不借助第三个变量实现两个变量互换
- 安装VS2010后,如何设置老版本的项目文件不是默认用VS2010打开
- 变化Android系统属性SystemProperties.set(&;quot;sys.powerctl&;quot;, &;quot;shutdown&;quot;)关机分析
- 调皮的R文件,卑鄙的空格
- Runtime - ③ - 分类Category探究
- day_10初级函数
- Linux服务器GlashFish的Domain管理
- [转帖]SSH 的 三种代理功能.
- MT【262】一道常见错题
- eclipse连接手机一直连接不起
- 我不是机器人:谷歌最新版验证码系统ReCaptcha破解已开源
- flask,gunicorn,supervisor,nginx配置服务器接口
- 第一行代码 3-2-2 软件也要拼脸蛋-UI界面-更强大的滚动条- 卡片
- Chap2:二进数值与记数系统[Computer Science Illuminated]