div+css实例：布局网站首页(五)

从前面几篇文章开始我们都在制作一个网站首页，是以本站首页为列的。这一篇文章我们我们把网站首页的主体模块写完。
到前一篇文章结束我们将这个网站首页写到了搜索部分，这篇文章我们写完首页主体部分，友情链接部分和版权部分在下一篇全部写完。
先看下首页主体HTML代码：




教程/.html" style="color:#316301;">更多...



/_.html">

该栏目下还没有文章！









上面是我们的smarty模板，有些smarty方面的知识大家不知道的话可以到本站的PHP教程中学习smarty方面的知识。
下面是上面HTML代码的样式（与smarty模板无关）：
#main{
width:960px;
margin:0 auto;
overflow:auto;
margin-top:10px;
margin-bottom:20px;
}
#main_left{
width:710px;
float:left;
}
#main_left .column{
width:338px;
float:left;
margin-right:12px;
margin-bottom:10px;
border:1px solid #C2DBA4;
}
#main_left .column_title{
width:100%;
height:24px;
border-bottom:1px solid #C2DBA4;
background:url("../images/column_bg.jpg") repeat-x;
}
#main_left h3{
color:#316301;
float:left;
padding-top:5px;
padding-left:18px;
margin-left:4px;
font:12px Arial, Helvetica, sans-serif;
background:url("../images/tag_new.gif") no-repeat left center;
}
#main_left .more{
float:right;
margin-top:4px;
margin-right:10px;
}
#main_left .column_conn{
width:100%;
padding-bottom:4px;
font-family:宋体;
}
#main_left li{
padding-left:9px;
margin-left:1px;
margin-top:4px;
background:url("../images/li_bg_1.jpg") no-repeat left;
}
#main_left em{
margin-right:5px;
color:#316301;
font:12px Arial, Helvetica, sans-serif;
}
/*--主体右侧热点、最近更新样式:start--*/
#main_right{
width:240px;
overflow:auto;
float:right;
}
#main_right #recommend{
width:238px;
margin-bottom:8px;
border:1px solid #C2DBA4;
}
#main_right #update{
width:238px;
margin-bottom:8px;
border:1px solid #C2DBA4;
}
#main_right #hot{
width:238px;
border:1px solid #C2DBA4;
}
#main_right .right_title{
width:100%;
height:24px;
border-bottom:1px solid #C2DBA4;
background:url("../images/column_bg.jpg") repeat-x;
}
#main_right h3{
width:60%;
color:#316301;
float:left;
padding-top:5px;
margin-left:10px;
font:12px Arial, Helvetica, sans-serif;
}
#main_right h3.new{
background:url("../images/new.gif") no-repeat 55px 50%;
}
#main_right h3.hot{
background:url("../images/hot.gif") no-repeat 55px 50%;
}
#main_right .right_conn{
padding-bottom:5px;
}
#main_right li{
padding-left:8px;
margin-left:2px;
margin-top:4px;
background:url("../images/li_bg_2.jpg") no-repeat left;
}
网站首页的其余代码我们会全部在下一篇写完。 有用  |  无用 取消

猜你喜欢