当前位置:首页 > 网页设计 >CSS >

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

发布时间:2021-04-30 10:24:08 作者:佚名 阅读:(29)

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

<div id="flinks">
   <div class="link_title"><h3 style="font-weight:bold;">友情链接</h3><!--<span><a href="#" class="join_links">申请加入</a></span>--></span></div>
   <div class="link_conn">
    <ul>
     <{section name=loop loop=$links}>
     <li><a href="<{$links[loop].url}>" target="_blank" title="<{$links[loop].webdesc}>"><{$links[loop].webname}></a></li>
     <{sectionelse}>
     暂无链接!
     <{/section}>
    </ul>
   </div>
  </div>
 <div id="footer">
   <p>Copyright &copy;2011 <a href=https://www.itbiancheng.com>吾爱编程</a> 版权所有 Powered by <a href="http://www.125jz.com" target="_blank">中国网页设计</a></p>
   <p>联系我们:Tel:********** </p>
   <p>邮箱:service#itbiancheng.com (请将#改为@)</p>
     </div>
 </div>

注意:上面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布局是当前最流行的网页布局方式,相信通过不断的学习和写代码你将成为一个布局老手。

欢迎分享转载→ div+css实例:布局网站首页(六)

© 2015-2021 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们