小小小小结

垃圾文章凑合着看很一般还不错精品 (暂时没有评价)
Loading ... Loading ...

一、关于高亮文字的写法：
下例中高亮了中国二字。
原来我自己的写法是这个
HTML部分

网吧生态链影响<span class="red">中国</span>互联网未来

CSS部分

.red{ color:#C60A00; }

最近看禅意花园觉得这么写更合适：
HTML部分

网吧生态链影响<em>中国</em>互联网未来

CSS部分

em{ font-style:normal; color:#c60a00}

这样在高亮某字的时候HTML部分少了好多代码就。看起来无所谓，但是我们要从小事做起吗～

二、布局代码复杂
原来的代码

  1. <div class="mainbody_res">
  2.             <div class="res_pic"><img src="images/lizi.png" class="" alt="" /></div>
  3.             <div class="res_right">
  4.                 <div class="res_title"><a href="#">网吧生态链影响<span class="red">中国</span>互联网未来</a></div>
  5.                 <div class="res_preview">- <a href="#" class="link2">预览</a></div>
  6.                 <div class="clear"></div>
  7.                 <div class="res_content">
  8.                 ... 人的面前，都有一个新世界。对于高速变化的<span class="red">中国</span>，网吧本身就是另外一个世界—— 一个在社会新闻和家庭宽带普及计划 天桥《传奇》点卡和史玉柱《征途》宝箱。即使来自硅谷的网络明星和风险投资者也经常说，在中国的时间里 ... 
  9.                 </div>
  10.                 <div class="clear"></div>
  11.                 <div class="res_url">www.yixoo.com/test/henchang/...../index.html  1K  2008-01</div>
  12.                 <div class="res_more">- <a href="#" class="link2">经济生活</a> - <a href="#" class="link2">类似网页</a></div>
  13.                 <div class="clear"></div>
  14.                 <div class="res_keyword">关键字：<a href="#" class="link2">中国特色</a> 中国硅谷 DELL实验室 测试内容 第五条内容</div>
  15.             </div>
  16.         </div>
  17.         <div class="clear"></div>

优化过的代码

  1. <li>
  2.   <div class="res_pic"><img src="images/lizi.png" class="" alt="" /></div>
  3.         <div class="res_right">
  4.      <p><a href="#">网吧生态链影响<em>中国</em>互联网未来</a> - <a href="#" class="link2">预览</a></p>
  5.                     ... 人的面前，都有一个新世界。对于高速变化的<em>中国</em>，网吧本身就是另外一个世界—— 一个在社会新闻和家庭宽带普及计划 天桥《传奇》点卡和史玉柱《征途》宝箱。即使来自硅谷的网络明星和风险投资者也经常说，在中国的时间里 ... 
  6.                 <br /><span>www.yixoo.com/test/henchang/...../index.html  1K  2008-01</span> - <a href="#" class="link2">经济生活</a> - <a href="#" class="link2">类似网页</a>
  7.                 <br />关键字：<a href="#" class="link2">中国特色</a> 中国硅谷 DELL实验室 测试内容 第五条内容</div>
  8.         </li>

但是不知道为什么右面的文字部分会被左面的图片影响在IE下会下沉20象素。才疏学浅不理解ing
为了看框架效果，我在代码里的manbody li属性后面加了一句边框宽度

  1. .mainbody li{ text-align:left; margin-bottom:15px; border: 1px solid #FFF;}

莫名其妙的就对齐了？为啥呢？
然后近一步发现，只需要 border-top: 1px solid #FFF;
边框效果可以是solid也可以是dobble，但是其他就不可以……扯淡无奈

三、链接的解决

  1. <li>
  2.  
  3.   <div class="res_pic"></div>
  4.         <div class="res_right">
  5.      <p><a href="http://db.2u.com.cn/detail_6313_8.html" target="_blank" title="国际象棋大师 11 学习的艺术截图【免友游戏库】" onclick="click_log(this)">国际<em>象棋</em>大师 11 学习的艺术截图【免友游戏库】</a> - <a href="getcache.cgi?words=象棋&url=http://db.2u.com.cn/detail_6313_8.html"  target="_blank">预览</a></p>
  6.                     免友游戏库提供最新最全的国际象棋大师 11 学习的艺术游戏截图、国际象棋大师 11 学习的艺术游戏图片、国际象棋大师 11 学习的艺术壁纸,更多精彩内容尽在中关村在线游戏库!"
  7.                 <br /><span>http://db.2u.com.cn/detail_6313_8.html    1K  2008-04-19</span> - <a href="http://db.2u.com.cn/" class="link2" target="_blank">db.2u.com.cn</a> - <a href="re?url=http://db.2u.com.cn/detail_6313_8.html" class="link2" target="_blank">类似网页</a>
  8.  
  9.                 <br />
  10.   </div>
  11.         </li>

想让预览二字使用不同的样式，但是由于定义了P的链接样式

  1. .mainbody p a:link{  color: #00c;outline:none; }
  2.    .mainbody p a:visited { color: #551a8b;outline:none; }
  3.    .mainbody p a:hover,a:active {  color: #00c;outline:none; }

所以“预览”二字也成了蓝色的。想起来CSS选择符的用法，加入如下代码，成功解决问题

  1. .mainbody p a+a:link{ font-size:12px; color: #666;outline:none; }
  2.    .mainbody p a+a:visited { font-size:12px; color: #666;outline:none; }
  3.    .mainbody p a+a:hover,a:active { font-size:12px; color: #666;outline:none; }

你可能对这个有点兴趣：

可乐发表于:04-21-08

看完了说点啥？