Posts filed under 'XHTML+CSS'

CHE168首页制作经验

这次http://www.che168.com的首页上线是混合了老的首页和新的首页。

导航部分大概是半年前做的。

从导航一直到“厂家热点”是这次上线的新页面。

从“厂家热点”一直到最后还是老的首页上面的内容。

页面属于7拼8凑的那种，看的难免有些不和谐。

老的页面只是简单修改了链接的颜色和排行榜的数字图标。老的页面在两年的风风雨雨中经过好几个人的努力，CSS终于增加到了60多K。因为他还要存在，所以索性都懒的删掉它了，等等都换新的，彻底的干掉他把，先让它在占一个请求吧，在firebug里面查看，只有11K（被服务器压缩过了）。

现在首页的导航大概是在半年前做的了，大部分的频道页面已经都用这个导航了，当时写这个导航的时候就考虑到冲突的问题，所以命名都是比较长的。这个导航被存成了SSI文件，CSS也直接写在页面里面，其他页面直接SSI这个导航。

从“车型大全”到“厂家热点”是这次新作的。简单说一下做的时候遇到的问题。

index1

这个地方的所有的车系频道模块都是一个li循环出来的。有人肯定喜欢把“更多”链接放到最后一个li里面，然后在smarty模板里面控制最后一个li输出“更多”链接，其实可以充分利用那个margin的负值，写成这样margin：34px 0 0 -100px就能解决这个问题，把这个“更多”链接抛出ul外。

做之前我们同事就要求了，不要用A链接来做这个tab，否则点击过后总是会A链接的那个虚框。那干脆直接就用的li来做吧，以前总喜欢还在里面套一个A，不过我还喜欢他看起来像一个按钮的样子，给他加了个手的形状。这个tab的JS程序是我一直在用，个人感觉写的比较简单通俗易懂。

index2

这个是JS的图片切换。以前的flash的，后来有同事反应，点击过后在IE7浏览器里面不能弹出页面，被浏览器拦截了，影响了流量。没办法只能改成JS了，大概是3个月前做的这个东西。这个改成JS可改的崩溃了。页面里面有一个这样的JS程序还好，但是有的页面会有2个JS的情况，我这找资料呀，边找边学习。最后还是没有搞定，没办法，当时就用了最笨的办法修改成不同的变量。

index3

这两个地方也是结构和样式一样，可以把那个“往日回顾”的小标题绝对定位一下，这个其实也能用margin的负值来解决。

index4

这个地方的十字行虚线，让我感觉很崩溃，于是我铺了一个大的背景。这个地方本来很想是用li来写，结果中间那个空隙的间距的高度我怎么写都无法保证所有浏览器的兼容，后来就改用p来写了，中间那个距离用了一个div来写了。

index5

这个地方用的是table写的，估计会有人去用li或者div等元素去拼凑这些东西。其实这本来就是一个table的表现形式，而且程序去循环的时候也很方便，一个tr就出来了。

index6

这个地方的listImg我用的是li来做的，很方便控制里面的图片和文字的样式，同样也方便了程序用一个li就可以循环出所有的。

index7

这个地方所有的小图标都切在一张图里面，用了css背景定位的方式来做的。真的希望他们在别的频道页面也能用这个样式的图标。

我们的页面时需要左右的模块对齐的，但是我们的模块又是相似性不大，没办法为了保证对其，我最后给每个模块有个高度，方便以后的调试。

页面上线前又修改了好多的小地方。一般是不到上线的时候问题都是看不出来的，哈哈。

如果页面的结构写的良好，是不需要那么多的css hack的。我只有是在最后为了调齐两个模板一样高的时候，实在找不到原因了，无奈我才用css hack

这次页面的smarty模版是我自己的做的，半年的程序不是白学的，哈哈。孙宇帮我模拟好了很多假数据给我，然后我自己套了模板页面。其实我觉得让我前端开发开做smarty模板也是一样不错的事情，前端开发对HTML很熟悉，对自己做的页面结构很清楚，做起来是很快的，不会出现最后缺少闭合标签的情况。这个模板估计也就做了大概半天的时间。

上线后孙宇跟我说我们页面的请求太多，有200多个，让我合并一些CSS背景图。

确实200多个请求有一些有问题，其中一些CSS背景图是可以合并，做页面的时候怕浪费时间，就没再制作的时候做合并的工作。还有大部分的是车型图片的请求大概有100多个呢，其中有一个“热点车系”这个tab标签里面就有88个图片请求。最后还要合并一下JS文件。

Add comment 六月 28th, 2009

全局CSS的写法

今天发现文章页面的一些问题，有一部分是因为全局的CSS影响到的。例如在全局里面写了 div,p,input,td { font-size:12px; }，这句也忘了是从哪抄过来的，反正一直都写上，也没什么错误。后来发现了问题所在，如果我定义了一个DIV的样式是font-size:14px; 正常的话，他里面的元素应该都继承是14px的字体，但是呢如果你里面出现了DIV,P,TD的话，这个DIV里面的字就变成12px了。所以全局里面干脆就别写这些东西了。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <style>
  7. body { font-size:12px; }
  8. div,form,img,ul,ol,li,dl,dt,dd,textarea,select,input {margin:0;padding:0;border:0;color:#333; text-align:left;font-size:12px;}
  9. table,td,tr,th,br{font-size:12px;}
  10. .box1 { font-size:14px; }
  11. </style>
  12. </head>
  13. <body>
  14. <div class="box1">
  15. 我反对发达 的
  16. <div>我反对发达 的</div>
  17. <table>
  18. <tr>
  19. <th>我是TABLE</th>
  20. <td>22222</td>
  21. <td>33333</td>
  22. <td>44444</td>
  23. </tr>
  24. <tr>
  25. <td>55555</td>
  26. <td>66666</td>
  27. <td>77777</td>
  28. <td>88888</td>
  29. </tr>
  30. </table>
  31. </div>
  32. </body>
  33. </html>

修改了一下全局的CSS，先试着用吧，应该是不会有什么问题了。

  1. body { font-family:"宋体",Arial; font-size:12px; }
  2. body,p,form,ul,ol,dd,h1,h2,h3,h4,h5,h6 { margin:0;padding:0 }
  3. li{list-style:none; }
  4. img { border:0; }

Add comment 六月 23rd, 2009

frameset 里面的 frame去掉滚动条

有的时候经常会出现在用frameset做的页面， 嵌入的frame会出现横向的滚动条，解决的办法就是在frame的页面里面的样式里加上html { overflow-x: hidden; overflow-y: auto; }

在网上查阅了资料发现这个原来是个IE的BUG。大概意思是说Windows平台的Internet Explorer 6.0以及Mac平台的Internet Explorer 5.0存在一个bug, 即框架或者弹出窗口中的页面即使在没有必要的情况下也会出现水平滚动条. 出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.

Add comment 六月 18th, 2009

螺旋钢管网

最近由于某些变故，让我有更多的时间了，不能让自己这么无聊，于是开始做个站玩吧。选好了目标，做螺旋钢管，原因是因为我们家那边有很多的钢管厂商，也许在未来的某天我能和他们一起做点生意，哈哈。
有空来看看我做的螺旋钢管网吧，现在就只放了一种钢管，都是些有关螺旋钢管的技术性文章，还没来得及加那些厂商信息之类的。 螺旋钢管网

2 comments 五月 27th, 2009

try catch的用法

以前以为try catch就和if语句的用法一样呢，后来才发现不是一回事。if后面执行的是正确的语句，而try后面跟的语句可能是不正确的。
例如今天修改的一个东西。别的网站要iframe我们的页面，我们页面上正好有一段用JS判断PV的代码。正好这样就出现了跨域的问题，有人反映一访问页面浏览器就死掉了。这里就只能用try catch来抛出错误了。

  1. try{
  2. if(window.top.location.href==window.location.href){
  3. document.write('<iframe id="PageView" src="" style="display:none;"></iframe>');
  4. setTimeout('PVSend()',3000);
  5. }
  6. }catch(e){
  7. }

Tags:

Add comment 五月 13th, 2009

URL的SEO优化

URL分为动态的URL和静态的URL两种。静态的URL也有的是apache rewirte做成的。一般都会认为这种静态URL是比较利于SEO的。
早期由于搜索引擎Spider的不完善，网站程序不合理，或部分人故意造成一种蜘蛛陷阱(spider traps)，导致Spider爬行时进入一个死循环。搜索引擎为避开这种死循环，减少对动态URL的读取，特别是带“?”符号的URL。
随着搜索引擎的完善，这种现象目前已经基本得以解决，Spider已经能够正常并顺利的读取动态URL地址，以及带“?”符号的URL。但是，目前对带过多环境变量(query string)的URL地址(如new.php?a=1&b=2&c=3&d=4……)仍不够理想(据相关资料称，Spider基本不读取带3个以上的环境变量的URL)。

1 comment 五月 7th, 2009

设置iframe高度自动和背景透明问题

在iframe页面里面加入这段JS。main是iframe的ID。

  1. function check_perent(){
  2.         try{parent.window.document.getElementById("main").height=document.body.scrollHeight;}
  3.         catch(e){}
  4.     }
  5.     window.onload = check_perent;

IFRAME的背景透明的代码

  1. <iframe src="iframe.html" frameborder="0" allowTransparency="true"  ></iframe>

Add comment 四月 16th, 2009

2009年玉渊潭樱花节

最近北京温度迅速升高，温暖的春日，玉渊潭的樱花当然也按捺不住，已经含苞待放了。3月24日，2009年玉渊潭樱花节将开幕，去年停办的夜赏樱花将在今年恢复。玉渊潭公园樱花主要分布在樱花园景区及南区的牡丹园景区，有20余种约 2000株，种植面积超过5000平方米。

Tags:

Continue Reading 2 comments 三月 20th, 2009

Jquey练习

最近一阵工作都在使用jquery，把经常用的列出来，以后自己查询方便。
jquery文档

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <script src="http://www.che168.com/js/jquery.js" language="javascript" ></script>
  7. </head>
  8. <style>
  9. .inputText { border:1px solid #f00; }
  10. .disabled { height:18px; background:#ebebe4; color:#aca899; border:1px solid #7f9db9 }
  11. </style>
  12. <body>
  13. <form id="form1">
  14.     <p><input id="t9" type="text" class="inputText"  value="10" /> 元</p>
  15.     <p><input id="t10" type="text" class="inputText" value="20" /> 元</p>
  16.     <p><input id="t11" type="text" class="inputText" value="30" /> 元</p>
  17.     <p><input id="t12" type="text" class="inputText" value="40" /> 元</p>
  18.     <p><input id="t13" type="text" class="inputText" value="50" /> 元</p>
  19.     <p><input id="t14" type="text" class="inputText" value="60" /> 元</p>
  20.     <p><input id="t15" type="text" class="inputText" value="70" /> 元</p>
  21.     <div><input type="submit"></div>
  22. </form>
  23. <script>
  24. //转换非数字类型为number类型。
  25. function numVal(num){
  26.     if(num=="")    {
  27.         return 0;
  28.     }else{
  29.         return parseInt(num);
  30.     }
  31. }
  32.  
  33. //foreach 的两种用法
  34. var arr = [100,200,300,400];
  35. var sum = 0;
  36. $.each(arr, function(i,n) {
  37.     sum += n;
  38. })
  39. alert(sum);
  40. var sum = 0;
  41. $("input[@type='text']").each( function(i,n) {
  42.     sum += numVal(($(n).val()));
  43. })
  44. alert(sum);
  45. //子选择器
  46. $("#form1 input[@type='text']") //选择type="text"的input的元素
  47. $("#t9, #t10") //选择t9或者t10节点。
  48. $("#t9").addClass('disabled'); //增加一个class样式
  49. $("#t10").attr('className','disabled') //开始用过属性的方法加，后来发现那么加太麻烦了
  50. $("#t11").removeClass('inputText'); //删除一个class样式
  51. </script>
  52. </body>
  53. </html>

Add comment 三月 3rd, 2009

弹出菜单的一个小BUG

今天在帮别人写一个简单的鼠标经过显示菜单的列子，我写弄了几个字做测试，结果发现曾经简单的JS，怎么今天就不好使了呢。 这是那个简单的HTML，CSS，JS代码。鼠标经过弹出菜单时总是隐藏起来，不应该呀。后来才发现必须要写上背景，如果没有背景颜色，写透明也行(background:transparent)， 这样整个DIV才算充满了内容。

Continue Reading Add comment 二月 11th, 2009

老版的BLOG请点击这里

老版BLOG

最新文章

最近评论

热点标签

牛奶咖啡 2009年玉渊潭樱花节 try catch

按日期查找文章