html基本网页基本布局设计以及clientWidth,等等的区别
2013-11-18 14:59
525 查看
网页各种高度宽度汇集:
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
以上这些在用javascript书写功能展示模块时非常有用,这里我收集了一下。
下面是我设计的一个较为常用的html主节目设计模块,不专业,但是为了达到前端工程师的高度,学习一下也是很有必要的。
<html>
<head>
<title> New Document </title>
<style type="text/css">
body {color: #000;background: #fff;margin: 0;padding: 0;}
.head{height:100px;width:1200px;background:#ccc; margin:0 auto;border:2px solid #123123;}
.message{height:60px;width:80px;background-image:url(images/logo2.png) ;position:absolute;margin-left:10px;margin-top:10px;border:2px solid #fff;}
.logo{width:40px;color:gray;font-size:12px;position:relative;margin-top:70px;margin-left:10px;}
.login{width:200px;position:absolute;margin-left:1000px;margin-top:0;font-size:14px;}
.title{width:1200px;height:26px;background:blue;margin:0 auto;border:2px solid #fff}
.main{width:1200px;height:800px;margin:0 auto;border:2px solid #121212}
.leftmain{width:900px;height:800px;border:1px solid #333;position:absolute}
.rightmain{width:300px;height:800px;border:1px solid #555;margin-left:900px;margin-top:0px;}
.maincai{float:left;width:100%;padding:0;margin:0;list-style-type:none;}
.caidan{float:left;width:7em;text-decoration:none;color:white;padding:0.2em 0.6em;border-right:1px solid white;}
a:hover {background-color:#ff3300}
li {display:inline}
.ggao{width:200px;height:300px;border: 2px solid #666;float:left;background:gray;position:absolute;z-index:1}
.ggao2{z-index:2;margin-left:200px;margin-top:100px}
</style>
</head>
<body>
<div id="head" class="head">
<div class="login"><a href="http://blog.163.com/wujicaiguai@126/blog/#">登陆</a> <a href="http://blog.163.com/wujicaiguai@126/blog/#">注册</a> <a href="http://blog.163.com/wujicaiguai@126/blog/#">找回密码</a></div>
<div id="message" class="message">
</div>
<div id="logo" class="logo"><a href="http://blog.163.com/wujicaiguai@126/blog/#">www.myblog.cn</a></div>
</div>
<div id="title" class="title">
<ul class="maincai">
<li><a class="caidan" href="http://blog.163.com/wujicaiguai@126/blog/#">Link one</a></li>
<li><a class="caidan" href="http://blog.163.com/wujicaiguai@126/blog/#">Link two</a></li>
<li><a class="caidan" href="http://blog.163.com/wujicaiguai@126/blog/#">Link three</a></li>
<li><a class="caidan" href="http://blog.163.com/wujicaiguai@126/blog/#">Link four</a></li>
<li><a class="caidan" href="http://blog.163.com/wujicaiguai@126/blog/#">Link five</a></li>
</ul>
</div>
<div id="main" class="main">
<div id="" class="ggao">float div1</div>
<div id="" class="ggao ggao2">float div2</div>
<div id="leftmain" class="leftmain">divleft</div>
<div id="rightmain" class="rightmain">divright</div>
</div>
</body>
</html>
结果:
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
以上这些在用javascript书写功能展示模块时非常有用,这里我收集了一下。
下面是我设计的一个较为常用的html主节目设计模块,不专业,但是为了达到前端工程师的高度,学习一下也是很有必要的。
<html>
<head>
<title> New Document </title>
<style type="text/css">
body {color: #000;background: #fff;margin: 0;padding: 0;}
.head{height:100px;width:1200px;background:#ccc; margin:0 auto;border:2px solid #123123;}
.message{height:60px;width:80px;background-image:url(images/logo2.png) ;position:absolute;margin-left:10px;margin-top:10px;border:2px solid #fff;}
.logo{width:40px;color:gray;font-size:12px;position:relative;margin-top:70px;margin-left:10px;}
.login{width:200px;position:absolute;margin-left:1000px;margin-top:0;font-size:14px;}
.title{width:1200px;height:26px;background:blue;margin:0 auto;border:2px solid #fff}
.main{width:1200px;height:800px;margin:0 auto;border:2px solid #121212}
.leftmain{width:900px;height:800px;border:1px solid #333;position:absolute}
.rightmain{width:300px;height:800px;border:1px solid #555;margin-left:900px;margin-top:0px;}
.maincai{float:left;width:100%;padding:0;margin:0;list-style-type:none;}
.caidan{float:left;width:7em;text-decoration:none;color:white;padding:0.2em 0.6em;border-right:1px solid white;}
a:hover {background-color:#ff3300}
li {display:inline}
.ggao{width:200px;height:300px;border: 2px solid #666;float:left;background:gray;position:absolute;z-index:1}
.ggao2{z-index:2;margin-left:200px;margin-top:100px}
</style>
</head>
<body>
<div id="head" class="head">
<div class="login"><a href="http://blog.163.com/wujicaiguai@126/blog/#">登陆</a> <a href="http://blog.163.com/wujicaiguai@126/blog/#">注册</a> <a href="http://blog.163.com/wujicaiguai@126/blog/#">找回密码</a></div>
<div id="message" class="message">
</div>
<div id="logo" class="logo"><a href="http://blog.163.com/wujicaiguai@126/blog/#">www.myblog.cn</a></div>
</div>
<div id="title" class="title">
<ul class="maincai">
<li><a class="caidan" href="http://blog.163.com/wujicaiguai@126/blog/#">Link one</a></li>
<li><a class="caidan" href="http://blog.163.com/wujicaiguai@126/blog/#">Link two</a></li>
<li><a class="caidan" href="http://blog.163.com/wujicaiguai@126/blog/#">Link three</a></li>
<li><a class="caidan" href="http://blog.163.com/wujicaiguai@126/blog/#">Link four</a></li>
<li><a class="caidan" href="http://blog.163.com/wujicaiguai@126/blog/#">Link five</a></li>
</ul>
</div>
<div id="main" class="main">
<div id="" class="ggao">float div1</div>
<div id="" class="ggao ggao2">float div2</div>
<div id="leftmain" class="leftmain">divleft</div>
<div id="rightmain" class="rightmain">divright</div>
</div>
</body>
</html>
结果:
相关文章推荐
- 网页设计与布局(frame、frameset和iframe的区别)
- 网页设计:html布局学习1
- HTML布局定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全带图详解
- 网页设计中scrollHeight,offsetHeight,clientHeight在各个浏览器中的区别
- 网页设计与布局(frame、frameset和iframe的区别
- 网页设计与布局(frame、frameset和iframe的区别)
- 复习:前台页面设计——网页设计的布局、HTML常用的布局结构
- 学习网页设计与制作之HTML文档的基本结构
- XML的基本语法(XML实现html的网页布局的简单功能)
- rem、px、em之间的区别以及网页响应式设计写法
- window.innerWidth、document.body.clientWidth和html的大小的区别
- CSS+HTML网页设计与布局(学习笔记1)
- HTML布局定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全带图详解
- 作业_HTML标记基本应用与网页设计
- HTML布局定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全带图详解
- 作业_HTML标记基本应用与网页设计
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- 学习xhtml的第二课(html基本的模板,meta,uft-8与gb2312的区别等等)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理
- HTML之基本布局设计之三栏式、两栏式设计