DIV+CSS布局
近来在研究一下DIV+CSS
源网文章地址:http://www.wzsky.net/html/Website/CSS/39193.html
以下是我写的,一般网上都是分:头部,内容,顶部.
再细分就是内容部分进行切分左右,或左中左
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<style>
body{
font:12px Tahoma;margin:0px;text-align:center;background-color:#fff;
}
#container{
width:100%;
}
#header{
width:800px;margin:0 auto;height:80px;border:thin;}
#mainbody{
width:800px;margin:0 auto;height:400px;border:thin;
}
#sidebar{
width:160px;height:300px;text-align:left;float:left;clear:left; overflow:hidden;
}
#mainbar{
width:640px; height:300px; text-align:left;float:right;clear:right;overflow:hidden;
}
#footer{
width:800px;height:300px; margin: 0 auto;height:50px; border:thin;
}
.a0{
color:black;
}
.a1:hover{
color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainbody">
<div id="sidebar"></div>
<div id="mainbar">
<a href="#" class="a0 a1">hello</a>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<style>
body{
font:12px Tahoma;margin:0px;text-align:center;background-color:#fff;
}
#container{
width:100%;
}
#header{
width:800px;margin:0 auto;height:80px;border:thin;}
#mainbody{
width:800px;margin:0 auto;height:400px;border:thin;
}
#sidebar{
width:160px;height:300px;text-align:left;float:left;clear:left; overflow:hidden;
}
#mainbar{
width:640px; height:300px; text-align:left;float:right;clear:right;overflow:hidden;
}
#footer{
width:800px;height:300px; margin: 0 auto;height:50px; border:thin;
}
.a0{
color:black;
}
.a1:hover{
color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainbody">
<div id="sidebar"></div>
<div id="mainbar">
<a href="#" class="a0 a1">hello</a>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
还要继续学习研究
-------此处无银三百两------
