复杂的DIV布局模板·曾加的blog·足迹2008·高端品牌网站设计-

复杂的DIV布局模板

本内容为曾加原创，尊重劳动者劳动，转载请加上链接，来自51add.com！

通过这个案例，我学到了二个东西，一是margin在FF不起作用的问题，以前一直不明白，这个案例终于研究出来了，有两种方法，一种是自己研究出来的，就是<DIV class="ClearFloat"></DIV> ；另一个是网友帮助的，虽然很简单的道理，但是以前一直忽视了，height: 586; /*-- 这里设置固定高度也可以解决margin在FF中没有作用的问题 */ 大家通过下面案例可以看得到效果；

另外还学到的就是文本的垂直居中了，这个以前也搞不明白，这次终于有了解决办法，就是把文本行距设置于div高度一致，然后，使用 text-align: center;
vertical-align: middle; 就居中了；

<!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=utf-8" />
<title>复杂的DIV布局</title>
<style type="text/css">
<!--
body{
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
*{
margin: 0px;
padding: 0px;
}
.ClearFloat{
clear: both;
}
#top{
background-color: #333333;
height: 50px;
width: 100%;
}
#header{
width: 960px;
height: 60px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
line-height: 60px;
}
#notice{
width: 960px;
background-color: #efefef;
height: 24px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#main{
width: 960px;
height: 586;            /*-- 这里设置固定高度也可以解决margin在FF中没有作用的问题 */
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear: both;
}
/* 内容区左边样式   */
#Mleft{
float: left;
height: 586px;
width: 780px;
background-color: #999999;
}
#M_Left1{
background-color: #000000;
float: left;
height: 170px;
width: 560px;
}
#M_Left2{
float: right;
height: 170px;
width: 217px;
background-color: #333333;
}
#M_Left3{
background-color: #666666;
float: left;
height: 100px;
width: 257px;
margin-top: 3px;
margin-right: 3px;
line-height: 100px;
color: #33FF00;
text-align: center;
vertical-align: middle;
}
#M_Left4{
background-color: #666666;
float: right;
height: 100px;
width: 260px;
margin-top: 3px;
  line-height: 100px;
color: #33FF00;
text-align: center;
vertical-align: middle;
}
#M_Left5{
background-color: #666666;
float: left;
height: 100px;
width: 257px;
margin-top: 3px;
margin-right: 3px;
  line-height: 100px;
color: #33FF00;
text-align: center;
vertical-align: middle;
}
#M_Left6{
background-color: #666666;
float: left;
height: 100px;
width: 257px;
margin-top: 3px;
margin-right: 3px;
  line-height: 100px;
color: #33FF00;
text-align: center;
vertical-align: middle;
}
#M_Left7{
background-color: #666666;
float: left;
height: 100px;
width: 257px;
margin-top: 3px;
margin-right: 3px;
  line-height: 100px;
color: #33FF00;
text-align: center;
vertical-align: middle;
}
#M_Left8{
background-color: #666666;
float: left;
height: 100px;
width: 257px;
margin-top: 3px;
margin-right: 3px;
  line-height: 100px;
color: #33FF00;
text-align: center;
vertical-align: middle;
}
.M_LeftList{
background-color: #CCCCCC;
height: 100px;
width: 127px;
margin-top: 3px;
margin-right: 3px;
float: left;
line-height: 100px;
text-align: center;
vertical-align: middle;
color: #FF0000;
}

/* 内容区右边样式 */
#Mright{
float: right;
background-color: #CCCCCC;
height: 586px;
width: 177px;
}
#footer{
width: 960px;
height: 60px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999999;
clear: both;
padding: 0px;
}
-->
</style>
</head>

<body>
<div id="top"></div>
<div id="header">Logo</div>
<div id="notice">notice</div>
<div id="main">
<div id="Mleft">

    <div id="M_Left1"></div>
    <div id="M_Left2"></div>


    <div id="M_Left3">id</div>
    <div class="M_LeftList">class</div>
    <div class="M_LeftList">class</div>
    <div id="M_Left4">id</div>
    <div class="M_LeftList">class</div>
    <div class="M_LeftList">class</div>
    <div class="M_LeftList">class</div>
    <div class="M_LeftList">class</div>
    <div class="M_LeftList">class</div>
    <div class="M_LeftList">class</div>

    <div class="M_LeftList">class</div>
    <div id="M_Left5">id</div>
    <div class="M_LeftList">class</div>
    <div class="M_LeftList">class</div>
    <div class="M_LeftList">class</div>


    <div id="M_Left6">id</div>
    <div id="M_Left7">id</div>
    <div id="M_Left8">id</div>

</div>
<div id="Mright"></div>
</div>
<DIV class="ClearFloat"></DIV> 
<div id="footer">版权</div>
</body>
</html>

评论: 1 | 引用: 0 | 浏览: | Tags: DIV css 模板

点击这里获取该日志的TrackBack引用地址

IE和火狐的css兼容性问题归总  (2008-3-11 14:41:16)
CSS文本导航  (2008-2-29 13:43:34)
CSS常用网站布局实例  (2008-2-26 21:32:17)

1.chongzi
另外还学到的就是文本的垂直居中了，这个以前也搞不明白，这次终于有了解决办法，就是把文本行距设置于div高度一致，然后，使用 text-align: center;
vertical-align: middle; 就居中了；
---------------------
有时候vertical-align是不可行的，所以要想使用垂直居中，就要设置line-height
adding 于 2008-3-24 13:55:51 回复
谢谢chongzi的指点了！
2008-3-24 13:47:42 回复该留言

复杂的DIV布局模板

网站分类

最近发表

最近留言

最新评论及回复

文章归档

站内搜索

站点统计

友情链接