刘红刚的博客

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body { font-size:12px; }
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;}
table,td,tr,th,br{font-size:12px;}
.box1 { font-size:14px; }
</style>
</head>
<body>
<div class="box1">
我反对发达的
<div>我反对发达的</div>
<table>
<tr>
<th>我是TABLE</th>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>55555</td>
<td>66666</td>
<td>77777</td>
<td>88888</td>
</tr>
</table>
</div>
</body>
</html>

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

body { font-family:"宋体",Arial; font-size:12px; }
body,p,form,ul,ol,dd,h1,h2,h3,h4,h5,h6 { margin:0;padding:0 }
li{list-style:none; }
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来抛出错误了。

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

Tags: try catch

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。

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

IFRAME的背景透明的代码

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

Add comment 四月 16th, 2009

我喜欢

我喜欢早上起来洗漱的时候开大大的摇滚音乐，
我喜欢在上班路上听飞鱼秀，
我喜欢在晚上的时候听刘杨的北京不眠夜，

我喜欢晚上自己一个人静静的呆着，
我喜欢幻想，

我喜欢流行音乐，
我喜欢看现场版的摇滚音乐，
我喜欢TVB的电视剧，

我喜欢独自出去旅游，
我喜欢独自出去拍照，
我喜欢新环境，
我喜欢和狐朋狗友们一起坐着聊天，

我喜欢不叠被子，
我喜欢把家里按我的方式搞的乱乱的，

我喜欢圆脸的漂亮姑娘，
我喜欢怀旧，

我喜欢没有规律的瞎写东西。

Add comment 四月 2nd, 2009

机遇&缘分

今天看了一篇关于机遇与才能的文章，大概意思就是说，如果一个人光有才能没有机遇，才能也会慢慢的被埋没了，如果一个人没有才能，但是有机遇，才能也会在不断断的努力下锻炼出来的。我比较相信这句话，其实无论工作还是爱情都是需要机遇和缘分的。

刚毕业的时候我都没有想过自己要当一个互联网的程序员，我觉得自己能力不足不敢去想象。那个时候梦想的工作就是做个类似联想的callcenter，每天坐在自己的工位上接听着许多人的求助电话，我可以滔滔不绝的告诉是怎么怎么回事，我觉得是一件很有成就感的事情。三年前网友天下给我了机遇，让我进入了互联网公司，开始做html，半年前CHE168给了我机遇让我去做PHP程序员，虽然现在还不是一个合格的程序员。这其中有很多人给我了机会去帮助我去做这项工作。其实合适做程序员的人很多，想做程序员的也很多，只是他们没有遇到好的机会。

什么是缘分？有人问隐士。隐士想了一会说：缘是命，命是缘。此人听的糊涂，去问高僧。高僧说：缘是前生的修炼。这人不解自己的前生如何，就问佛祖。佛不语，用手指天边的云。这人看去，云起云落，随风东西，于是顿悟：缘是不可求的，缘如风，风不定。云聚是缘，云散也是缘。

关于爱情也是一样，其实在这个世界上合适你的人很多很多，只是看缘分能不能走在一起了。有人是有缘有份的，有人是有缘无份的，更有的是无缘无份的，其实这三种情况都挺惨的。不管你是努力追求着爱情，还是等待着爱情的到来，都一样，是要等待着缘分的到来的。在合适的时间遇到了合适的人，经过双方对爱情的努力，OK就可以结婚了。

我们每个人做每件事情的时候都可能会改变我们未来的生活。
（以上仅个人观点，如有雷同纯属缘分，哈哈）

Add comment 三月 22nd, 2009