09-1126

使用DIV+CSS重构解决在Firefox变形的问题

星期四, 十一月 26, 2009 14:18
文章发表自: 心得技巧
406次浏览　暂无评论
div+css重构
div+css重构

一直以来都是使用table来建立网站，繁重的工作，臃肿的代码，每次想修改的时候，要重头在photoshop切图，再重新编辑，实在是累人，而且到最后在浏览器测试的时候，发现错误，又要重新修改。而且还要考虑到兼容firefox浏览器的问题。
这两天买了金峰老师编写的《变幻之美：DIV+CSS网页布局揭秘》，如获至宝。虽然以前对DIV+CSS有基础的学习，但是对PSD图片切图到对HTML的编写过程不多。看了30页后，我就决定对淘宝的旺铺进行修改，从而解决在firefox中的table变性的问题。
按照思路，我先把结构重构代码是

  1. <div id="notice">
  2.      <div id="zuo"></div>
  3.      <div id="zhong"></div>
  4.      <div id="you"></div>
  5. </div>

把广告为左中右三个结构。然后继续晚上结构。

  1. <div id="notice">
  2.      <div id="zuo"></div>
  3.      <div id="zhong"></div>
  4.      <div id="you">
  5.                       <div id="youding"></div>                     
  6.                       <div id="youdi"></div>
  7.       </div>
  8. </div>

把右侧的上下架构定义出来。然后的工作就是做CSS的排版定位工作了。
CSS代码也是慢慢的完善，这里我学习了金峰老师的良好习惯，把每个部位都定义背景色，这样就可以在排版错误后，看清楚错误在什么地方，修改就很方便了。使用Dreamweaver的CSS代码编写工具，可视化编辑，非常方便，不需要记住繁琐的CSS代码。最后代码如下：

  1. #notice {
  2. clear: both;
  3. margin: auto;
  4. height: 220px;
  5. width: 738px;
  6. }
  7.  
  8.      #notice #zuo {
  9. clear: none;
  10. float: left;
  11. height: 220px;
  12. width: 461px;
  13. background-image: url(images/divnotice_01.jpg);
  14. background-repeat: no-repeat;
  15. }
  16.  #notice #zuo  p {
  17. height: 170px;
  18. width: 368px;
  19. margin-top: 23px;
  20. margin-bottom: auto;
  21. margin-left: 26px;
  22. float: none;
  23. font-size: 12px;
  24. color: #FFFF00;
  25.  }
  26. #notice #zuo  p  a {
  27. font-size: 12px;
  28. color: #FFFF00;
  29. text-decoration: none;
  30. }
  31. #notice #zuo  p a:hover {
  32. font-size: 12px;
  33. color: #FFFF00;
  34. text-decoration: underline;
  35. }
  36.  
  37. #notice #zhong {
  39. float: left;
  40. height: 220px;
  41. width: 143px;
  42. background-image: url(images/divnotice_02.jpg);
  43. }
  45. #notice #you {
  47. float: right;
  48. height: 220px;
  49. width: 134px; }
  51.           #notice #you #youding{
  53. clear: right;
  54. float: left;
  55. height: 111px;
  56. width: 134px;
  57.   background-image: url(images/divnotice_03.jpg);
  58. background-repeat: no-repeat;
  59. }
  61. #notice #you #youdi{
  62. background-color: #FF33FF;
  63. clear: both;
  64. float: left;
  65. height: 109px;
  66. width: 134px;}

搞定后，想去淘宝直接使用发现一个难题，原来淘宝对CSS文件，是要过滤屏蔽的。而且也不能直接在网页定义

  1. <style>

这个非常不爽。借鉴了一些装修店铺的方法，得到了解决之道。我把每个div层，都定义

  1. <div id="notice" style="这里复制层的CSS样式;">

这样就不需要引用外部的CSS文件了。最终代码如下：

  1. <div id="notice" style="clear: both;
  2. margin: auto;
  3. height: 220px;
  4. width: 738px;">
  5.     <div id="zuo" style="clear: none;
  6. float: left;
  7. height: 220px;
  8. width: 461px;
  9. background-image: url(http://www.yanwotang.com/taobao/divnotice_01.jpg);
  10. background-repeat: no-repeat; ">
  11. <p style="height: 170px;
  12. width: 368px;
  13. margin-top: 23px;
  14. margin-bottom: auto;
  15. margin-left: 26px;
  16. float: none;
  17. font-size: 12px;
  18. color: #FFFF00; "><img height="13" alt="第一" src="http://www.yanwotang.com/taobao/1.gif" width="13" />燕窝堂官方网站地址www.yanwotang.com，热线400-666-0092<br /><br />
  19.   <img height="13" alt="第二" src="http://www.yanwotang.com/taobao/2.gif" width="13" />购买燕窝堂的正价燕窝，可以获得96折优惠。(<a href="##" target="_blank">特价除外</a>)
  20.   <br /><br />
  21.   <img height="13" alt="第三" src="http://www.yanwotang.com/taobao/3.gif" width="13" />凡购买任意一两燕窝堂燕窝，送精美礼品。(<a title="最新优惠活动" href="http://shop34282253.taobao.com/shop/xshop/wui_page-16104846.htm">礼品请见最新活动</a>)<br /><br />
  22.   <img height="13" alt="第四" src="http://www.yanwotang.com/taobao/4.gif" width="13" />单品种燕窝购买一斤或以上，可按照批发价格购买，批发包快递。<br /><br />
  23.   <img height="13" alt="第五" src="http://www.yanwotang.com/taobao/5.gif" width="13" /><a href="http://auction1.taobao.com/auction/item_detail-db1-d26069e6a0ec7982fd166a302e12dc08.jhtml" target="_blank">办理成为燕窝堂金卡会员，可终生享受正价燕窝9折优惠。</a><br />
  24.   <strong><img alt="" src="http://www.yanwotang.com/taobao/taobaonew.gif" border="0" /></strong> 好消息:<a title="送燕窝食谱一本" href="http://item.taobao.com/auction/item_detail-0db1-6177dcee426637f311383fb708506df7.htm" target="_blank">买即免费送《燕窝与其他保健品食谱》一本</a><img alt="" src="images/icon_notice_new.gif" />
  25.     </div>
  28. <div style="float: left;
  29. height: 220px;
  30. width: 143px;
  31. background-image: url(http://www.yanwotang.com/taobao/divnotice_02.jpg); ">
  32. </div>
  35. <div id="you" style=" float: right;
  36. height: 220px;
  37. width: 134px;">
  38. <div id="youding" style=" clear: right;
  39. float: left;
  40. height: 111px;
  41. width: 134px;
  42.   background-image: url(http://www.yanwotang.com/taobao/divnotice_03.jpg);
  43. background-repeat: no-repeat;">  </div>
  44. <div id="youdi" style=" background-color: #FF33FF;
  45. clear: both;
  46. float: left;
  47. height: 109px;
  48. width: 134px;"><a href="##" target="_blank"><img src="http://www.yanwotang.com/taobao/divnotice_04.jpg" alt="收藏本店后,请通知我们客服送礼品" border="0"  /></a></div>
  50. </div>
  51.  
  52. </div>

这里纯粹记录我的学习过程，希望大家一起探讨CSS的乐趣。

你可以对这篇文章 发表评论, 或者 trackback 到你的网站.
Tags: ,

请发表您的意见:

«
»