css div

<!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=gb2312" />
<title>自适应居中+头部+导航+尾部——</title>
<style>
body {font-family:Verdana; font-size:12px;margin:0 auto;}
#container {
margin:0 auto;
width:100%;
height: inherit;
}

#header {
height:70px;
background:#9c6;
margin-bottom:1px;
clear: right;
float: none;
width: auto;
}

#menu { height:20px; background:#693; margin-bottom:1px;}

#mainContent { height:665px; margin-bottom:1px;}

#sidebar {
float:left;
width:200px;
height:100px;
background:#cf9;
margin-left: 0px;
margin-right: 1px;
}
#sidebar2 {
float:right;
width:200px;
height:100px;
background:#cf9;
margin-right: 1px;
}
#content {
margin:0 202px;
height:100px;
margin-top: 0;
margin-right: 205px;
margin-bottom: 0;
margin-left: 205px;
background-color: #FFFFFF;
}
#footer { height:30px; background:#9c6;}

.STYLE1 {font-family: Verdana, Arial, Helvetica, sans-serif}

.text1 { border:1px solid #f60; color:#03C;}
.text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}
.text3 { border:2px solid #C3C; height:20px; background:#ffeeff url(icon9.gif) right 3px no-repeat;}
.text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(bg_9.gif) 0 0 no-repeat;}
.area { border:1px solid #F90; overflow:auto; background:#fff url(/bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;}

.btn02 { background:#fff url(btn_bg2.gif) 0 0; height:22px; width:55px; color:#297405; border:1px solid #90be4a; font-size:12px; font-weight:bold; line-height:180%; cursor:pointer;}
.btn04 { background:url(btn_bg2.gif) 0 -24px; width:70px; height:22px; color:#9a4501; border:1px solid #dbb119; font-size:12px; line-height:160%; cursor:pointer;}
.btn07 { background:url(submit_bg.gif) 0px -8px; border:1px solid #cfab25; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#660000;}
.btn08 { background:url(submit_bg.gif) 0px -64px; border:1px solid #8b9c56; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#360;}
.btn09 { background:url(btn_bg.gif) 0 0 no-repeat; width:107px; height:37px; border:none; font-size:14px; font-weight:bold; color:#d84700; cursor:pointer;}

#nav ul { list-style:none; margin: 0px; padding: 0px; height:31px; background:url(/upload/2010-07/05/13.gif) 0 bottom repeat-x; overflow:hidden;}
#nav li { float: left; margin-left: 5px; }
#nav a { display: block; float:left; height: 28px; line-height: 28px; text-align:center; color: #da4901; font-weight:bold;backgurl(13.gif) right -28px no-repeat; padding-right:18px; text-decoration: none; }
#nav a span { display:block; background:url(13.gif) left -28px no-repeat; padding-left:18px;}
#nav a:hover { background:url(13.gif) right 0 no-repeat; color:#fff;}
#nav a:hover span { background:url(13.gif) left top no-repeat;}

.home_tx {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(hometx_03.gif); PADDING-BOTTOM: 0px; MARGIN: auto; OVERFLOW: hidden; WIDTH: 950px; PADDING-TOP: 0px}
.home_tx IMG {BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px}
.home_tx DL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 10px 0px 0px; WIDTH: 61px; PADDING-TOP: 0px; HEIGHT: 37px}
.home_tx SPAN {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 830px; COLOR: #333333; LINE-HEIGHT: 34px; PADDING-TOP: 0px; HEIGHT: 37px; TEXT-ALIGN: left}
.home_tx SPAN B {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #990000; PADDING-TOP: 0px}
.home_tx A {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 35px; PADDING-TOP: 0px; HEIGHT: 37px}

</style>
<script>
//alert(document.documentElement.clientWidth)
//document.body.clientWidth

    var s = "";

    s += " 网页可见区域宽："+ document.documentElement.clientWidth+" \n";
    s += " 网页可见区域高："+ document.documentElement.clientHeight+" \n";
    s += " 网页可见区域宽："+ document.documentElement.offsetWidth + " (包括边线和滚动条的宽)"+" \n";
    s += " 网页可见区域高："+ document.documentElement.offsetHeight + " (包括边线的宽)"+" \n";
    s += " 网页正文全文宽："+ document.documentElement.scrollWidth+" \n";
    s += " 网页正文全文高："+ document.documentElement.scrollHeight+" \n";
    s += " 网页被卷去的高(ff)："+ document.documentElement.scrollTop+" \n";
    s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop+" \n";
    s += " 网页被卷去的左："+ document.documentElement.scrollLeft+" \n";
    s += " 网页正文部分上："+ window.screenTop+" \n";
    s += " 网页正文部分左："+ window.screenLeft+" \n";
    s += " 屏幕分辨率的高："+ window.screen.height+" \n";
    s += " 屏幕分辨率的宽："+ window.screen.width+" \n";
    s += " 屏幕可用工作区高度："+ window.screen.availHeight+" \n";
    s += " 屏幕可用工作区宽度："+ window.screen.availWidth+" \n";
    s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+" \n";
    s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+" \n";
    s += " window的页面可视部分实际高度(ff) "+window.innerHeight+" \n";
    alert (s);

</script>
</head>
<body>
<em></em>
<div id="container">
<div id="header">This is the Header</div>
<div id="menu">This is the Menu</div>
   <div id="menu">This is the SubMenu1</div>
<div id="mainContent">
    <div id="sidebar">This is the sidebar</div>
    <div id="sidebar2">This is the sidebar2</div>
    <div class="STYLE1" id="content">
  <input type="text" name="textfield" id="textfield" />
  这是默认样式
  <input name="textfield2" type="text" class="text1" id="textfield2" value="我是蓝色的" />
  这是改变边框的样式和文字颜色
  <input name="textfield3" type="text" class="text2" id="textfield3" value="看我大吧" />
  这是改变边框并设置高宽和字体大小的样式
  <input class="text3" type="text" name="textfield4" id="textfield4" />
  这是增加背景图片实例，也可放左侧
  <input class="text4" type="text" name="textfield5" id="textfield5" />
  这是增加了一个背景图片为gif动画
  <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
  <textarea class="area" name="textarea2" id="textarea2" cols="45" rows="5"></textarea>
  <input name="button" type="submit" class="btn02" id="button" value="提交" />
  <input name="button2" type="submit" class="btn04" id="button2" value="提交" />
  <input name="button" type="submit" class="btn07" id="button" value="提交" />
  <input name="button2" type="submit" class="btn08" id="button2" value="看看我的宽度有多宽" />
  <input name="button" type="submit" class="btn09" id="button" value="免费注册" />

  </p>

   <div id="nav">
     <ul>
    <li><a href="#"><span>首页</span></a></li>
    <li><a href="#"><span>新首页</span></a></li>
    <li><a href="#"><span>视频教程</span></a></li>
    <li><a href="#"><span>网页版式布局</span></a></li>
     </ul>
   </div>

</div>
</div>
<div id="footer">This is the footer
<span style="">foot
</span>
</div>
</div>
</body>
</html>

猜你喜欢