层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
注:单独使用CSS是无法实现QQ邮箱登录实例(CSS为样式代码)。
实例可以使用iframe代码实现QQ邮箱登录实例。
代码如下:
<!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>qq邮箱登录实例</title>
</head>
<body>
<p align="center" style="margin-top:0pxmargin-left:0">
<iframe width="1000" height="500" src="https://mail.qq.com" class="t-iframe" scrolling="no" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</p>
</body>
</html>
代码解释:
url是你要调用的网址,<p align="center" style="margin-top: -109margin-left: -109">是网页布局、其中margin-top: 0表示顶部缩进,margin-left: 0表示左边缩进。至于右边和底部缩进,很简单,修改<iframe>的宽度和高度就可以了。
唉,乱七八糟。忍不了了!
我先给你按照我的理解说下,然后给你网站去理解吧,我也是从哪里理解的!
文档流的几种:
1.正常文档流。
2.浮动文档流。
3.定位的文档流。
其中你问的是定位。
定位又分为2中:
相对很绝对。
相对定位的文档流,保持占位,仍占据原来正常文档流的位置。在此基础上进行的
left:100px top:100px //一个表示从原来的占位点,向右、下各平移100PX。
绝对定位会脱离文档流,也就是出现了层叠覆盖的情况。
left:100px top:100px 它究竟跑哪里了呢?
这个坐标是以最近定位父元素为参考点的。
知道了这点你就可以计算了。
一般你需要先设置一个相对定位元素,然后在其里面定位绝对定位,这是最常见的!
几个例子:
<div style="width:100px height:100px background-color:#c00">
<p style="width:50px height:50px">
<span style="position:absoluteleft:0 top:0 display:inline-block width:10px height:10px">我绝对定位了</span>
</p>
</div>
这个运行后
没有遇到已定位的父元素,于是BODY作为参照。
<div style="width:100px height:100px background-color:#c00">
<p style="width:50px height:50px background-color:yellow position:relative">
<span style="position:absoluteleft:0 bottom:0 display:inline-block width:10px height:10px background-color:blue"></span>
</p>
</div>
这个例子你自己运行吧。
还有:
<div style="width:100px height:100px background-color:#c00position:relative">
<p style="width:50px height:50px background-color:yellow ">
<span style="position:absoluteleft:0 bottom:0 display:inline-block width:10px height:10px background-color:blue"></span>
</p>
</div>