格式与布局
2016-03-23 20:06
423 查看
position:
1、fixed——position:fixed; /*根据显示窗口的第一显示界面进行定位 ,直接定死在页面上,跟着滚动条更换位置*/
2、absolute——position:absolute; /*固定显示,一直悬着,不随着滚动条更换位置 */
3、relative——position:relative;/*相对的定位,相对的是上一句代码,使用relati时要先看上一句代码结束的位置*/
View Code
1、fixed——position:fixed; /*根据显示窗口的第一显示界面进行定位 ,直接定死在页面上,跟着滚动条更换位置*/
2、absolute——position:absolute; /*固定显示,一直悬着,不随着滚动条更换位置 */
3、relative——position:relative;/*相对的定位,相对的是上一句代码,使用relati时要先看上一句代码结束的位置*/
<!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>360导航</title> <style> * { margin:0px; padding:0px;} #a { border:1px solid #999; width:1000px; height:100px; margin-top:75px; left:200px; position:absolute;} #b { border:1px solid #999; width:1000px; height:60px; left:200px; top:185px; position:relative;} #c { border:1px solid #999; width:200px; height:250px; margin-top:195px; left:200px; position:relative} #d { border:1px solid #999; width:790px; height:300px; margin-top:-252px; left:410px; position:relative} #e { border:1px solid #999; width:200px; height:100px; margin-top:-40px; left:200px; position:relative} #f { border:1px solid #999; width:790px; height:250px; margin-top:-50px; left:410px; position:relative} #g { border:1px solid #999; width:200px; height:1200px; margin-top:-190px; left:200px; position:relative} #h { border:1px solid #999; width:790px; height:800px; margin-top:-980px; left:410px; position:relative} #i { border:1px solid #999; width:790px; height:166px; margin-top:10px; left:410px; position:relative} #j { border:1px solid #999; width:333px; height:300px; margin-top:10px; left:200px; position:relative} #k { border:1px solid #999; width:333px; height:300px; margin-top:-302px; left:534px; position:relative} #l { border:1px solid #999; width:332px; height:300px; margin-top:-302px; left:868px; position:relative} </style> </head> <body> <div id="a"></div> <div id="b"></div> <div id="c"></div> <div id="d"></div> <div id="e"></div> <div id="f"></div> <div id="g"></div> <div id="h"></div> <div id="i"></div> <div id="j"></div> <div id="k"></div> <div id="l"></div> <br /> <br /> <br /> </body> </html>
View Code
相关文章推荐
- Python~函数
- 编译原理 —— 正则->NFA->DFA->MFA (Web)
- 记忆力发牌游戏
- Counting Bits---338
- 利用图形窗口分割法将极坐标方程:r=cos(θ/3)+1/9用四种绘图方式画在不同的窗口中
- 封装一个简单的轮播图
- 进制转换
- C++ String 深拷贝(传统写法+现代写法)
- KD树的python实践
- Spring MVC 中的 RedirectAttribute
- 【算法】- 动态规划的编织艺术
- 字符串编辑距离的几种实现
- mysql数据库函数用法简析
- 贪心算法之物品分组
- 层次建树(优先插入左端),求二叉树的深度
- 简单的Python网络爬虫程序
- [LeetCode 265] Count Univalue Subtrees
- iOS-UILable总结
- 第三周练习 随机数函数应用于游戏——计算器
- ReactJS[未完待续]