终于等到了 标准化交流会 的第二次会议的开讲.这次又学得了许多...

下面讲讲学到的:

因为CSS Sprite不同项目有不同的整合方式,这里只讲的个人觉得很不错的方式.

这里不得不提下 greengnn ,他在交流会里反复提到的单页单屏整合方式(可能他愿意并非这个,但我听的就是这意思),个人很有同感.

所谓的单页单屏整合,也就是只把同一个页面内在第一屏显示的背景图片整合到CSS Sprite中.这样可以避免因图片太大加载慢的情况,毕竟屏幕大小决定了能看的范围.如果有三四屏,在加载完第一张图片后自动会进行下面的图片的加载.这样可以解决速度的问题.

或许有人会提,这样做如果子页面有用共用部分如何处理--会上没人给出更好建议.

有人建议首页单独整合,其他根据结构 模板页 特定页 与特定栏目之间做权衡.

许多人提出css sprites还是要根据实际需要来合并图片,要考虑站点访问量,修改频繁度.没有一种通用的方式提供出来,也没解决如果更好的整合这一话题.

css sprites图片整合的奇淫技巧还需自己琢磨,慢慢积累,或许 应用 data url方式,此法有待进一步研究.

» 阅读全文

IE6双倍margin bug是 IE6 著名的bug之一。它出现条件是：父元素与子元素之间，子元素同时设置了浮动和外边距属性，子元素会出现此bug，兄弟元素之间则不会.(简说:子元素 浮动，且margin方向与浮动方向相同)

许多人给出的解决方法:
1、多写一行CSS HACK
如：margin-left:10px;_margin-left:5px;

这种方法虽然有效,对于要求完美的coder来说使用CSS HACK是不能接受的.

2、display:inline：
此法为许多人提及/并推荐的方法.
上面两种方法都没有错,但是能不能换一种思维来写呢?
上面已经说过 这 双倍 产生的原因.

例：css：

<!-- <style>
ul { width:248px; border:1px solid #000;height:40px;}
ul li {list-style:none;float:left;margin-left:5px;}
ul li a { display:block; width:100px; height:40px; text-align:center; background:#d7d7d7;}
</style>
<ul>
 <li><a href=”#”>测试</a></li>
 <li><a href=”#”>测试</a></li>
</ul> -->

如下,图中上为IE6的效果,下为IE7,细看可看到左边的间距有所不同.

» 阅读全文

CSS Sprite的基本原理是把网站上用到的一些图片有规划地整合到一张或多张单独的图片中,从而减少你的网站的HTTP请求数量.图片使用CSS background和background-position属性渲染.
对于当前网络流行的速度而言,图片的大小与多少决定所需载入的时间,所以要考虑这个问题.通过CSS Sprites方法将多张图片有规划地整合到一张或多张单独的图片中,可以有效减少HTTP请求的次数.

但CSS Sprite却是一个复杂的话题.
首先,图片的整合不当,会造成文件多空白.
其次,让人头痛的还是文件的维护.只要CSS Sprite图片中有图片要修改,尺寸发现了变化,痛苦热情的拥抱你了,这无疑会增大工作量.
再次,一个我未曾实验过的话.--CSS Sprite调用的图片不能被打印，除非在@media中特别添加 print声明——by RichB.

由此,我觉得CSS Sprite的整合,可以分下面来实践.

1. 图站的icon类图片-特定大小的图片
如网站一些icon图片.
典型如文本编辑器,小图标特别多,并且大小一制,不存在重复修改的可能性.

2. 图片反转
触发切换图片的需求，可以避免因从新请求而产生间瞬.如有些导航的图片反转,button按钮的反转.

3. 把颜色较近或相同的组合在一起,有效的降低颜色数，相应的可控制CSS Sprites图片的大小.
尺寸相同的CSS Sprites图片中留有较大空隙，一定程度上多数情况会增大体积，所以CSS Sprites的图片尽量避免留有大空隙.

--话外,话说如果图太大会造成吃内存的现象.这是用户体验那部分了.

» 阅读全文

昨天在水区看到一个帖子,先不管效果图为何样..

先看结构

<div>
<div class="pagebar">
 <div class="pagebar_center">
 第8/201頁
 <a href=""><img src="images/prev.gif" alt="上一頁" /></a>
 <a class="pagenum" href="">3</a>
 <a class="pagenum" href="">4</a>
 <a class="pagenum" href="">5</a>
 <a class="pagenum" href="">6</a>
 <a class="pagenum" href="">7</a>
 <a class="pagenum" href="">8</a>
 <a class="pagenum" href="">9</a>
 <span class="pagenumon">10</span>
 <a class="pagenum" href="">11</a>
 <a class="pagenum" href="">12</a>
 <a href=""><img src="images/next1.gif" alt="下一頁" /></a>
 </div>
 <span>共<span class="pagenumon">255</span>筆</span>
</div>
</div>

分析这结构的不好之处.
1. 外框div包着里面的子元素,但div定class.
2. 从最终效果上看可以得出可为分三部分--1>、第8/201頁  2>、上一頁 12345678.。0下一頁  3>、共255筆.这里却把 第8/201頁 放到了 页数中.
3. 最大的败笔--用img放修饰图片.(在禁用图片的形式下,能看到上一页 与 下一页么?)
4. <span>共<span class="pagenumon">255</span>筆</span> 此结构完全可以换一东方式思考.为什么不在外面的span定 class 而定里面的?
5. 不明白到10了为什么就不用a了呢?<span class="pagenumon">10</span>......

» 阅读全文

曾经有几个人问我, 标题与更多之间,怎么样才能把 更多 放到 右边.我的回答是 float:right;可随之而来的是 他告诉我这样不行.会换行..之后就是等等问题.

在这把用过的总结下,只针对 给出的图片.

第一种:

<div class="clear"><h1>深度报道</h1> <a href="#">更多</a></div>

切图为 2px 背景平铺.H放标题前的按钮.

<style>
.clear:after{
     content:".";
     display:block;
     height:0;
     clear:both;
     visibility:hidden;
}
div {background:url(./img/) 0 0 repeat-x;width:300px;}
h1 {float:left;background:url(./img/) 0 0 no-repeat;}
a {float:right;height:36px;}
</style>

优势:在扩展与重用性强.符合语义化.
缺点:标签有人觉得多了.得清浮动或者触发

第二种:

<h1>深度报道<a href="#">更多</a></h1>

切图为整张.

<style>
h1 {position:relative;background:url(./img/) 0 0 no-repeat;width:300px;}
a {position:absolute;right:0;}
</style>

优势:标签刚够用结构合理,语义也行.
缺点:更多包在H里了,要重新定义其它属性

» 阅读全文

第一届web标准线下交流会

10.31号,欲波组织了greengnn的标准群之第一届web标准交流会.

此次交流会的主题是：WEB重构中文件的组织。下面讲一只自己认知的,错误是难免的...

说在之前:10.31一个阳光很充足的日子,交流会定在2.30分开始.由于时间上把握得不够以及交通工具选择的错误,本人很荣幸地成为了迟到的一员.在此向在会场等候的各位道歉...

转入主题,现场没记录--有些声音我真的听不到....:

工作中的WEB重构，CSS/(X)HTML/JS.关于他们的文件组织,这里只说发布之前的.

这里引入 一个站点加以说明:个人认为不管多大网站,都能分为若干个.比如 首页下来有频道页.咱们可以把首页-列表页-内容页做为一小节.频道-列表页-内容页为一节.如此.
(PS:此处所说的首页-列表页-内容页为举例.)此为个人所在环境造成,建站公司,很多时候注重的效率,本人也在其中找到了一点路数.

正因如此,

关于CSS,个人觉得不必把整站的文件都考虑在一起,如果这样,文件出现混乱的机率比较大,习惯大化小,本来频道与首页相同之部分很少.为什么要共用管理,分开不是更好?...

例如 首页

首页与列表页/内容页之间可用三个文件组织CSS -- reset,公用样式(一般为页头页脚),主体样式.

频道页--reset,公用样式(一般为页头页脚),主体样式.

如此分.在维护时可以快速找到对此文件,管理时能心中也有个概念.有人会但这样增加请求数.请注意这里说是发布前.

当然,大公司不在此例.

会上几位大牛说得我飘飘然然(当然是自己功力不够的原因造成没理解好),其中比较支持 greengnn 的观点:前端为一个多面手,要熟悉项目管理，产品，设计，后台开发，产品运营等，作为研发中的一个衔接层，更好的把产品构想和设计付诸实施。详情请看 第一届web标准线下交流会

» 阅读全文