首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 其他教程 > 其他相关 >

49期项目感受——小弟我的SmileMall

2012-09-03 
49期项目感受——我的SmileMallSmileMall,我的商城项目名称。本来是想叫Small,取麻雀虽小的意思,但太过小气,

49期项目感受——我的SmileMall

SmileMall,我的商城项目名称。本来是想叫Small,取麻雀虽小的意思,但太过小气,遂改S为Smile,小名仍旧Small。

Small的制作始于国浩老师的提醒,他说提前把模板做好,项目开始后会很轻松。前人的经验很是宝贵,现在的我对此深信不疑,于是开始干活。那应该是项目正式开始的一周前吧。

素材的收集得感谢ECSHOP和懒人图库,让我仅做了一个纯色按钮和两枚文字LOGO就搞定了商城的全部素材。之后的流程蛮顺利,两个晚上的空闲时间搞定首页,分割出头部、导航、尾部后,其他页面顺水推舟。此处省略流水帐千字余,仅一事需提起,且称作float君与absolute君在IE国的纠葛吧。

我习惯用chrome,本本是WIN7+IE9,当页面基本完成之时,闲逛D盘时发现IEtester躲在角落,遂将其拎出,扔入所有页面。运气不错,IEtester里的IE6-IE9显示基本正确,大喜过望之时总觉得哪里不对却又找不出,于是深呼吸,定睛再看,尼玛,我的导航按钮呢,咋就一个背景图片孤零零地守候,IE6/7/8,你们把我的按钮小弟们藏哪去了?此处省去喷字万余……

在chrome和FF下,出了问题还有devtool能寻到蛛丝马迹,那个坑爹的iedev根本没法用,你叫我到哪找小弟们。消失的按钮小弟被我装在一个 absolute的盒子里,背景图则在另一个平级的float盒子里,IE9/FF/chrome都好好的,偏偏在就IE6/7/8里玩起了躲猫猫,躲猫猫要命啊,我心甚急,心急乱投医,便在CSS里乱改一气。用其他的样式虽然能出来,但不能达到我要的效果,无意间瞥见我放在头部和导航条之间的 clear:both,信手拈来,刷新之!居然小弟们就乖乖地出现了,嘿嘿,得来全不费工夫。

总结如下:若两平级盒子,一盒子绝对定位,另一盒子浮动,则浮动盒子会被遮挡,处理办法就是中间加上一清除浮动层。

呃,蛋疼了,此时,就是写项目感悟的此时,突然发现IE没错啊,浮动层就是该浮上去呀,看来我是对IE预设立场了,唉,抱歉IE。但这也就是说,我上面的白写了,亏我还把这条记入TIPS了,算了,这么多字,实在不忍删去,留着吧。

接下来说下Hn标签,我在做模板的时候,就在想,这个H标签怎么放才好呢。

老大难的H1该往哪里放,隐藏掉还是加LOGO图片上或者干脆不用?最终决定将H1置于LOGO图片处,认真地在IMG中写上了TITLE与ALT属性。

H2被我放在导航栏的某个主推栏目上;

H3放哪里?从左至右的思路影响我太深,在main区域,代码从上到下,显示从左到右,左边左浮动,右边右浮动。但左边是些杂七杂八的东西,右边才是页面的主要内容,首页橱窗位。猛然想起桐正老师的良方,先写右边,右边右浮动,左边就扔左边,浮动都不用。

这样H3顺理成章地放在每行橱窗的标题上,三行橱窗三个H3,刚好。这样H1/2/3都在页面代码靠前位置且都放在主推内容上,不知效果会如何,自我感觉蛮好,毕竟格式正确啊。

接着再说一个IE的事,我记得在手册里看到,input type设为image时,这个input便成为提交按钮,传值为图片的长与宽的像素值,即x=imageX&y=imageY。

于是我按照标准格式将所有的图片按钮html写为<input type=”image” name=”submit” src=”text.jpg” />这个样子。因为这个无关页面样式的,所以在chrome下正常我就不管其他的了。

当前台功能基本完结时,我打算在IE下完整走一次前台流程。不试不要紧,这尼玛的IE!注册按钮是图片,死点无用;购买按钮是图片,点死无用;所有的所有的图片按钮都木有反应,难道我真要去茅山求道驱鬼符贴IE上不成。不过当天天色已晚,为了排除鬼神的影响,便将此问题扔到第二天解决。

第二天大早,阳光明媚,隐晦全无,是个查错的好天气。在缕缕光线的佑护下,直接把注册页面的$_POST var_dump出来,一下抓住了这只大虫。

原来,在IE下,如果在图片提交按钮中设置了了name,即<input type=”image” name=”submit” value=”submit” />

IE下的表单传值会变为submit-x=imageX&submit-y=imageY,imageX、imageY为图片长宽像素值,下同;而非IE中为submit=submit&x=imageX&y=imageY。

于是,if(isset($_POST[‘x’]))下IE下判断失败,无法获取传值。解决方法很简单,删掉name属性即可。这样,无论是IE还是非 IE,传递的值均为x=imageX&y=imageY这两个值,即直接写为<input type=”image” />,省时省事。

印象深刻的就是上面这两个问题了,都是兼容问题,第一个是我预设立场,错怪IE了,第二个怎么说呢,反正我是记住了。

程序上基本没什么问题,跟着桐正老师,一路顺风顺水。毕竟网络购物这么多年,还有神器ECSHOP做参考,商城的各项流程都比较清楚,唯一的麻烦可能就是经常被自己的一个八参数读库函数搞晕吧,不过它也替我省事不少。

在项目期第一周的周末吧,我记得好像是,前后台基本完工。

翻看着Small的代码,竟然有些陌生。一遍遍重复着前后台的流程,居然有些恍惚。虽然功能不多,虽然界面单调,虽然占用资源,虽然隐藏着太多的bug…

但这个小家伙,他就在那里,他的诞生,已让我收获太多…

热点排行