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

呵呵，现在写这篇文章都有点小小的激动，这个网站首页的布局我们写了很久了，现在终于要写完了。虽然我的代码是写完了，但是大家一定要自己动手实践，我写的代码可能也存在不完善的地方，也欢迎大家批评指出。
先废话不说，放上我们的友情链接和网站底部版权部分的HTML代码：

友情链接



" target="_blank" title="">

暂无链接！

Copyright ©2011 http://www.xinge360.com">信鸽网 版权所有 Powered by http://liyaying.web-135.com" target="_blank">湘颖网络

联系我们：Tel:15197257681 qq:1093834463 地址：湖南湘潭雨湖区

邮箱：1093834463#qq.com 或 lyy163123#163.com 或 yaying560#gmail.com (请将#改为@)

本站原创和整理作品欢迎转载！[转载请注明出处] 本站力倡IT文化，崇尚互联共享，但是严禁网站镜像。

申明：本站部分作品由会员从互联网收集整理，版权归原作者所有！如侵犯了您的版权，请及时联系我们，本站将在第一时间内处理。

注意：上面HTML代码中有些是PHP模板smarty里的知识，建议大家看看本站有关smarty的教程。
下面是友情链接和版权部分的CSS样式：
/*--友情链接:start--*/
#flinks{
width:960px;
margin:0 auto;
overflow:auto;
margin-bottom:12px;
border:1px solid #C2DBA4;
}
#flinks .link_title{
width:100%;
height:24px;
border-bottom:1px solid #C2DBA4;
background:url("../images/column_bg.jpg") repeat-x;
}
#flinks h3{
color:#316301;
float:left;
padding-top:5px;
margin-left:10px;
font:12px Arial, Helvetica, sans-serif;
}
#flinks .join_links{
line-height:24px;
color:#316301;
float:right;
margin-right:10px;
}
#flinks .link_conn{
padding:6px 0 6px 6px;
}
#flinks li{
float:left;
height:20px;
margin-right:16px;
}
/*--友情链接:end--*/
/*--网页底部版权样式--*/
#footer{
width:960px;
margin:0 auto;
padding-top:10px;
padding-bottom:2px;
text-align:center;
border-top:2px solid #ECF7DE;
}
#footer a{
color:#316301;
font-weight:bold;
}
#footer p{
margin-bottom:2px;
}
好了，我们的网站首页终于写完了。对HTML和div+css布局不熟悉的朋友一定要反复的写代码，只有实践，亲自体会才能记住什么标签是什么样子的。
div+css布局是当前最流行的网页布局方式，相信通过不断的学习和写代码你将成为一个布局老手。

注释：这套网站首页的布局代码是小编自己写的，大家有好的建议或是代码中有不足的地方欢迎批评指正。
联系信鸽网：http://www.xinge360.com 有用  |  无用 取消

猜你喜欢