浏览 "Web front-end" 的文章
11月
23
2011

ZZ 高性能WEB开发 页面呈现、重绘、回流。

在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。

页面呈现流程

在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。

1. 浏览器把获取到的html代码解析成1个Dom树,html中的每个tag都是Dom树中的1个节点,根节点就是我们常用的document对象 (<html> tag)。dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构,里面包含了所有的html tag,包括display:none隐藏,还有用JS动态添加的元素等。

2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体,在解析的过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式,而firefox会去掉_开头的样式。

3、 dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree,但其实区别有很大,render tree能识别样式,render tree中每个node都有自己的style,而且render tree不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到render tree中的,因为visibility:hidden 会影响布局(layout),会占有空间。根据css2的标准,render tree中的每个节点都称为box(Box dimensions),box所有属性:width,height,margin,padding,left,top,border等。

4. 一旦render tree构建完毕后,浏览器就可以根据render tree来绘制页面了。 (更多…)

11月
23
2011

ZZ 真伪静态区别方法分析

有些用户觉得,伪静态和真静态实际被收录量会相差非常大,其实不然,从你个人角度,你去判断一下一个帖子到底是真静态还是伪静态?

1.关于伪静态的用处

  有些用户觉得,伪静态和真静态实际被收录量会相差非常大,其实不然,从你个人角度,你去判断一下一个帖子到底是真静态还是伪静态?

  估计非常难看得出,因为所谓静态的意思,就是地址中不带问号,不带问号的就是静态,管他是真的还是伪的?搜索引擎看得出吗?

  所以说,其实不论是真的还是伪的,其实对于搜索引擎来说都是相同的,搜索引擎没有说,你这个是伪的,我不收录你.

  揪根掘底的来说,为什么搜索引擎会不收录带问号的网址?因为搜索引擎怕由于问号而进入死循环(以前动网就有这样一个漏洞,蜘蛛进去出不来了),所以非常多时候带问号的地址是不会进去的,伪静态对于搜索引擎来说,其实就是静态,因为地址中没有带问号,所以没有真静态比伪静态收录得多的说法.

2.为什么选择伪静态

  有非常多用户说:

  真静态不好吗?

  为什么不用真静态?

  访问起来不是更快吗?

  负载不是更好吗?

  等等等等… (更多…)

11月
22
2011

网页嵌入flash在IE下显示不正常

网页嵌入flash,尤其是一些包装好的现成控件,通过js调用实现一些特殊效果,一般这类flash都支持长宽尺寸自适应,问题就出现这里

在IE下会发现flash展现位置和长宽的效果失常,经过调试发现是stage.stageWidth和stage.stageHeight等环境变量在IE下第二次打开,也就是刷新过后会取不到正确的值或者说取到为0.

这种境况仅仅出现在利用swfobject载入flash的时候出现,用<object>来载入就不会出现问题。

经过搜索基本找到解决方案:

ZZ From http://hi.baidu.com/phps/blog/item/cccbd12a08657b95023bf622.html

今天碰到一个让人吐血的事。在网页上嵌入一个flv播放器,几通浏览器都能正常,就IE8第一次播放正常,刷新就不显示了,或者一闪就没有了,找了很长时间原因,也没找着,因为单独调试这个FLASH是正常的,而且如果你用object标签来实现是也是没问题,就是swfobject动态加载才有的问题,原先认为是swfobject的BUG,现在我也分不清算谁的BUG了。不过主要原因算是找着了,因为我用的是一个开源的FLV播放器,就是上篇文章讲的,flvplayer。 后来配合着网页调试,因为他是取的舞台大小来初始化界面的,用swfobject刷新经常取到
stage.width 或 stage.height 的值为0,这样初始化后就看不到了,但是有声音。但然,如果你们做的东西不是播放FLV的,那就什么东西都看不到了。其实也是自己大意了,swfobject官方以经把这个问题描述了,也说明了解决方法,就是大意没看到。 (更多…)

7月
14
2011

ZZ 自适应浏览器窗口的页面背景

最近在做的一个项目中,客户要求网页的背景不管客户浏览器大小多大, 背景都要铺满全屏。在网上找了一下,有人已经研究出来了方法,不用js就可以做到。下面看代码:

CSS代码:

01 html, body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
02 body {/*为页面body添加一些基本信息*/
03     font-family:Arial, Helvetica, sans-serif;
04     font-size:14px;
05     color:#FFFFFF;
06     background:#DDDAD9;
07 }
08 #wrap{position:absolute;width:100%; height:100%;top:0; left:0; overflow:auto;overflowx: hidden; z-index:2;}
09 #background {position:absolute; z-index:-1; width:100%; height:100%;}
10 .container{width:960px;margin:0 auto;}

HTML结构代码:

01 <div id=“wrap”>
02     <div class=“container”>
03         <div id=“header”>
04             这里是header
05         </div>
06         <div id=“content”>
07             这里是Main content
08         </div>
09         <div id=“footer”>
10             这里是footer
11         </div>
12     </div>
13 </div> 
14 <img src=“bg.jpg” id=“background” alt=“” />

解释一下上面的css和html,这个其实就是将html和body的滚动条取消,用div#wrap容器来模拟页面的滚动条。其实并不是用图片做背景的,是将background的图片z-index设置为-1;使它放在wrap页面的底部,这样既覆盖了body的背景色和背景图(如果有),又使内容区域的最上面。

点此查看demo

这样看起来没啥问题了,挺好。

但是,但是客户的要求是千变万化的,客户说:如果我的img的src地址出错了,怎么办,这样把,我再在body里面增加一个bg吧。然后css就变成了这样:

1 body {
2     font-family:Arial, Helvetica, sans-serif;
3     font-size:14px;
4     color:#FFFFFF;
5     background:#DDDAD9 url(images/bg.png) no-repeat center top;
6 }

点此查看#background没有背景的demo

但是,但是客户看了之后说:这个背景图要随着内容变化,也变化,不能让它固定在浏览器窗口上面。于是,再搜索信息,再修改:

在网上找到了一个外国佬写的一个Jquery插件Full Size Background Image jQuery Plugin

他做的一个demo: Full Size Background Image jQuery Plugin DEMO

具体使用方法:
CSS代码:

01 html {height:100%;}
02 body {/*为页面body添加一些基本信息*/
03     font-family:Arial, Helvetica, sans-serif;
04     font-size:14px;
05     height:100%;
06 line-height:1.5;
07     color:#FFFFFF;
08 #background {
09 position: fixed;
10 top: 0;
11 left: 0;
12 overflow: hidden;
13 width: 100%;
14 height: auto;
15 z-index: -1;
16 overflow: hidden;
17 }
18 #wrap{position:absolute;width:100%;height:100%;top:0; left:0; z-index:2;}
19 .container{width:960px;margin:0 auto;}

HTML代码:

01 <div id=“wrap”>
02     <div class=“container”>
03         <div id=“header”>
04             这里是header
05         </div>
06         <div id=“content”>
07             这里是Main content
08         </div>
09         <div id=“footer”>
10             这里是footer
11         </div>
12     </div>
13 </div> 
14 <img src=“bg.jpg” id=“background” alt=“” />

但是他这个插件有一个问题,当页面内容高度超过一个屏幕的高度,在ie6浏览器下会出现问题,背景图片只出现在了当前页面的当前窗口,当拉动页面右边的滚动条的时候,下面就没有背景了。请分别在ie6和其它浏览器里浏览:

点此查看demo

并且当添加的图片背景不存在的时候,ie6浏览器页面底部会出现一大块空白,查看下面没有背景的demo, 请分别在ie6和其它浏览器里浏览:

点此查看demo
于是又对页面css进行修改:

1 html {height:100%;_overflow:hidden;}增加overflow:hidden;
2 #wrap{position:absolute;width:100%;height:100%;top:0;left:0;_overflow:auto;_overflowx:hidden; z-index:2;}

添加了上面的代码之后,解决了上面的问题,当页面内容高度超过一个屏幕的高度的时候,ie6下面不会再出现问题,请看demo:

点此查看demo

但是由于在ie6下面这是用wrap模拟的滚动条,所以在ie6页面下,当#background标签没有图片的时候,body背景图会固定在窗口里不变。请看demo:

点此查看demo

总结:

文章前两个demo没有用js,纯css写的,唯一不足之处就是:当页面#background没有图片的时候,拉动右边滚动条,body的背景是不变的。

文章后面四个demo用了js,不足之处就是:ie6浏览器会出现一些问题,当然如果不考虑ie6的话,就可以这里的4个demo中的任意一个了。

其实这里我们考虑的body的背景问题,如果不考虑body的背景问题的话,我们完全可以用纯css的那个demo。

如果你有什么好的意见和建议,欢迎在下面的评论处与我交流。

转自:冰剑’s blog

7月
13
2011

ZZ 常用CSS缩写语法总结

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。

css缩写的主要规则如下:

颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:

  • #000000可以缩写为#000;
  • #336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

  • property:value1; 表示所有边都是一个值value1;
  • property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  • property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  • property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下:

  • border-width:1px;
  • border-style:solid;
  • border-color:#000;

可以缩写为一句:border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下:

  • background-color:#f00;
  • background-image:url(background.gif);
  • background-repeat:no-repeat;
  • background-attachment:fixed;
  • background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

  • color: transparent
  • image: none
  • repeat: repeat
  • attachment: scroll
  • position: 0% 0%

字体(fonts)

字体的属性如下:

  • font-style:italic;
  • font-variant:small-caps;
  • font-weight:bold;
  • font-size:1em;
  • line-height:140%;
  • font-family:”Lucida Grande”,sans-serif;

可以缩写为一句:font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

  • list-style-type:square;
  • list-style-position:inside;
  • list-style-image:url(image.gif);

可以缩写为一句:list-style:square inside url(image.gif);

转自:随网之舞

7月
12
2011

ZZ DIV布局常见错误汇总

在2003年开始接触网页设计,一直到今年十一才开始深入学习DIV布局模式。在这个需要转变思维的过程中,使用DIV布局时还带有不少操作表格时的思想和习惯,以至于出了不少的错误,在此把容易出错的一些细节整理出来,希望对初学的朋友能有所帮助。

1.最常见的DIV嵌套错误

因为xhtml 语法比较严格,诸如Firefox 之类的浏览器如果检查发现Xhtml里面有语法错误,那页面是不能正常显示的。刚刚开始学习DIV布局的时候经常会弄错DIV的嵌套关系。我们可以用Dreamweaver的验证功能检查一下有无这方面的错误。

2.由于粗心造成的标点错误
开始一味追求速度,在标点方面不太注意,到最后发现有些属性不起作用。最容易出错的例如:
正确:class=” “,错误:class=“ ”(标点的中英文切换)
正确:font-size: 12px;,错误:font-size: 12px;(标点的中英文切换)
正确:text-decoration: underline;,错误:text_decoration: underline;(是中划线而非下划线)
正确:img {border: 0;}错误:img {border: 0; (注意后边的”}”符号)
正确:<br /><img /><hr />错误:<br><img><hr>(这个错误只是个不好的习惯,不符合标准的写法,这种单标签一定要闭合) (更多…)

7月
12
2011

ZZ符合标准的表单设计

下午客户让我给他们帮忙设计一个客户反馈表,我找到了以前做的源码想直接发过去,打开源码后无意间看了一下之前写的一些表单结构和语法,发现好多都不符合WEB标准,于是就想写一下关于表单标准的设计思路。

  1. 使用fieldset和legend标签
    在form中,我们经常会对form中的信息进行分组,比如注册form,我们可能会将注册信息分组成基本信息(一般为必填),详细信息(一般为可选),那我们如何更好的来实现呢?我们可考虑在form中加入下面两个标签:
    fieldset:对表单进行分组,一个表单可以有多个fieldset
    legend:说明每组的内容描述
    例如:
    <form id=”demoform” class=”democss” action=””>
    <fieldset>
    <legend>Basic Register</legend>
    <p>First name: <input type=”text” name=”fname” value=”” /></p>

    </fieldset>
    <fieldset>
    <legend>Detailed Register</legend>
    <p>Interest: <input type=”text” name=”interest” value=”” /></p>

    </fieldset>

    </form>
    fieldset默认是带边框的,而legend默认一般显示在左上角。但在某些场合或许不愿意让fieldset和legend的默认样式或默认布局影响设计方案中的美观。
    解决方法:css中将fieldset的border设置为0,legend的display设置为none即可。 (更多…)
7月
11
2011

ZZ CSS布局命名规则

近半年来园子一直试着遵循WEB标准设计和制作网页,今天花些时间整理一下在布局过程中会频繁用到的一些命名规则,当然,这些命名并不是绝对的,只是园子认为有个良好的命名习惯无论是对网站后期维护还是团队协作方面都会有很大的帮助。

网站一般布局命名

  • 页头:header
  • 登录条:loginBar
  • 标志:logo
  • 侧栏:sideBar
  • 广告:banner
  • 导航:nav
  • 子导航:subNav
  • 菜单:menu
  • 子菜单:subMenu
  • 搜索:search
  • 滚动:scroll
  • 页面主体:main
  • 内容:content
  • 指南:guild
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 注册:regsiter
  • 状态:status
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 按钮:btn
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:friendLink
  • 页脚:footer
  • 版权:copyRight (更多…)
6月
29
2011

Cufon支持中文的办法

Cufon文字重绘是几种方法里面不错的,相比Fontface等,还算兼容性比较好,但是官方默认不支持中文,所以得想个办法。

1,下载现成的中文Cufon包,替换掉现有的字体,比如说我这个allTuts的主题,就不支持,修改header.php,找到这两句: (更多…)

页面:«123»

博客剩余工作

6,优化前台(YSlow) 2,404页面 3,IE6下兼容性问题很大 1,标签小工具行高有点儿问题 4,微博聚合 5,推广工作 7,CDN(cloudflare

分类

访问统计