Archive for the ‘Web Developer’ Category
星期五, 06月 6th, 2008
当你加入到一个项目,相关的CSS文件可能会看得你头昏眼花。时间一长,修改了哪些内容,增加了哪些内容,也都弄不清,维护成本相当的高。正好我们国际站正在进行代码的规范工作。下面的这段代码注释的思路值得借鉴。
通常写法:
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999;
margin: 3px 0 3px 0;
padding: 3px;
}
注释的代码段:
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* ADDED Apr. 9, 2008 */
margin: 3px 0 3px 0;
padding: 3px; /* CHANGED Feb. 14, 2008 (Prev. 1px) */
}
上面的代码中,注释了增加代码的时间,修改代码的时间以及修改前的属性值。如果是多人协作,我建议还加上修改者的名称。当然,这样一直写下将带来过多的垃圾代码。需要定期的整理归档,保持文档的时效性。
Posted in Web Developer | 5 Comments »
星期一, 12月 10th, 2007
首先说明下范围
用Javascript来开发WEB页面的动画效果
该思路同时考虑页面效率、SEO,如果数据大,也可以缓解后端压力。
这个是程序设计思路
还谈不上思想,只是自己实践使用过的一个方法
Posted in Web Developer | 6 Comments »
星期一, 12月 10th, 2007
作者: jacky
css里关于浏览器的兼容问题一直困惑着我们初级的css用户(高手可直接绕过),这里想根据我前段时间拜读的李超的书籍《css网站布局实录》里学到的有关处理浏览器兼容的问题,根据我前段时间在公司minisite项目里碰到的一些问题和解决方法分享给大家。浏览器兼容性的问题,我想一直是困绕我们设计师的棘手问题,css的难点就在这里。解决好这个问题,我想你的css水平一定会得到大步的提升。
自从W3C标准推出以后,现在新的一些浏览器多多少少在使用这套web的新标准,但在各自对新标准的执行上并不统一,这就给我们设计师带来很多的问题。目前世面上主流的浏览器还是IE和firefox,这两个浏览器几乎占领着整个浏览器的市场。而IE下面大部分人在用IE6和IE7两个版本的浏览器,而这两个版本对css的支持有非常多的差异之处,这种差异是最需要我们设计师注意的,因为它跟我们的日常设计息息相关。我在实际的制作过程当中遇到的问题有绝大部分是出现在IE6和IE7的css兼容性问题上。IE6,IE7在加上firefox2.0,如果能把这三个浏览器都搞定了,也就基本上满足95%以上的用户了。在下面我列举了一些我在项目里碰到的实际的问题和解决的方法,其中有很多是css高手GL的处理思路和解决方法,非常值得吸取和借鉴,因为这为我们解决今后遇到类似的问题提供解决问题的思路。建议先阅读《css网站布局实录》这本书,现在出了新版本《css网站布局实录2》,要仔细阅读哦,相信我,的确能让你收益非浅。下面列举一些事例,希望能给大家提供一些借鉴:
Posted in Web Developer | 13 Comments »
星期一, 11月 26th, 2007
<div class="A" style="position:relative;">A (relative)
<div class="logo" style="position:absolute;z-index:99999;"></div>
</div>
<div class="B" style="position:relative;">B (relative)</div>
最近做minisite项目时,碰到了个奇怪的定位问题: 以上的A,B两个盒子是相对定位,
标牌logo是A的子级,基于A做绝对定位
问题描述:我们希望标牌logo显示在最上面,但在IE下logo标牌部分被B区域遮住,B在最上层显示,调整logo的z-index的数值调整无效,firefox下显示正常。
解决方案:先了解一下所涉及到的几个定位特性(非官方解释):
1. 相对定位元素默认的z-index的数值是0。
2. 当两个相对定位同时出现时,代码靠后的z-index优先。
3. 子级遵循父级设定的z-index;如果子级设定了绝对定位、z-index,可以冲破父级显示
这个问题主要是ie对上面第3条错误解释导致的---在ie下子级的z-index不能冲破父级。网上解决这个bug的办法一般用hack使B为负值,来降低 B 在IE下级别,这种方法绕了一个大圈:z-index为负值时,产生了新的ie bug。
按照定位的特性,ie的这个bug是可以回避的,从表面上看 B 遮住了logo,实际上是 B 遮住了logo的父级 A ,只要将 A 的z-index设定大于B即可。
<div class="A" style="position:relative;z-index:1;">A (relative)
<div class="logo" style="position:absolute;"></div>
</div>
<div class="B" style="position:relative;">B (relative)</div>
Posted in Web Developer | 6 Comments »