css+divフレームワークレイアウトの実装
20567 ワード
転載:http://blog.doyoe.com/
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>div Version2.0(Private) - Powered by title>
<meta name="Description" content=" frameset , div , css " />
<meta name="Keywords" content="div , div , " />
<meta name="author" content="Doyoe( ), [email protected]" />
<style type="text/css">
html,body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font: 14px/1.8 Georgia, Arial, Simsun;
}
html {
_padding: 110px 0;
}
#hd {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background: #999;
}
#bd {
position: absolute;
top: 110px;
right: 0;
bottom: 110px;
left: 0;
overflow: hidden;
width: 100%;
_height: 100%;
}
#side {
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: auto;
width: 200px;
_height: 100%;
background: #666;
}
#main {
position: absolute;
_position: static;
top: 0;
right: 0;
bottom: 0;
left: 210px;
overflow: auto;
_overflow: hidden;
_height: 100%;
_margin-left: 210px;
background: #666;
}
#content {
_overflow: auto;
_width: 100%;
_height: 100%;
}
#ft {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: #999;
}
/* , */
.tit-layout {
margin: 30px 0 0;
font-size: 18px;
text-align: center;
}
.copyright {
font-weight: bold;
text-align: center;
}
#feature {
width: 200%;
line-height: 4;
}
#feature .hd {
padding: 20px 15px;
}
#feature .hd h2 {
margin: 0;
font-size: 16px;
}
#feature .bd ol {
margin-top: 0;
}
#feature .bd h3 {
margin: 0;
padding: 0 15px;
font-size: 14px;
}
#feature .ft {
padding: 10px 15px 30px;
}
style>
head>
<body>
<div id="hd">
<h1 class="tit-layout">div Version2.0(Private)h1>
div>
<div id="bd">
<div id="side"> div>
<div id="main">
<div id="content">
<div id="feature" class="feature">
<div class="hd">
<h2>div Version2.0 :h2>
<span>update: 2008.09.22span>
div>
<div class="bd">
<h3> :h3>
<ol>
<li> div frameset, css li>
<li> web Standard Mode li>
<li> IE6,7,8; Firefox; Chrome; Safari; Opera , li>
<li> 100% 100% , :
<p><div class="main"><div
style="width:100%;"></div></div>p>
<p><div class="main"><iframe
style="width:100%;"></iframe></div>p>
li>
<li> : ; li>
ol>
div>
<div class="ft">
<a href="http://blog.doyoe.com/" title=" css div ">Morea>
div>
div>
div>
div>
div>
<div id="ft">
<address class="copyright">
Copyright © <a href="http://blog.doyoe.com/">doyoe.coma>
address>
div>
body>
html>