html基本网页基本布局设计以及clientWidth,等等的区别

来源：互联网发布：知乎如何绑定邮箱编辑：程序博客网时间：2024/06/08 04:41

网页各种高度宽度汇集：
网页可见区域宽：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>&nbsp;&nbsp; <a href="http://blog.163.com/wujicaiguai@126/blog/#">注册</a>&nbsp;&nbsp;<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>

结果：