1. 问题

前几日,一个网站客户提出,文本右边凹凸不齐,不好看,有没有办法让行尾对齐呢?
我的第一反映是不太可能吧,要计算字数和长度如何如何想得很复杂.其实无知很可怕…

2. 解决

问:你知道text-align属性可以取几个值吗?
答:left,right和center.

还漏下一个:justify.当text-align取了justify含义是分散对齐,会略微地对单词和字母之间的距离做调整.

3. 效果

2009-04-10_10421
不加text-align: justify;的效果

2009-04-10_10431
加了text-align: justify;的效果

4. 讨论

值justify可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。不过在CSS中,还需要多做些考虑。
要由用户代理(而不是CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。例如,有些浏览器可能只在单词之间增加额外的空间,而另外一些浏览器可能会平均分布字母间的额外空间(不过CSS规范特别指出,如果letter-spacing属性指定为一个长度值,“用户代理不能进一步增加或减少字符间的空间”)。还有一些用户代理可能会减少某些行的空间,使文本挤得更紧密。所有这些做法都会影响元素的外观,甚至改变其高度,这取决于用户代理的对齐选择影响了多少文本行。
CSS也没有指定应当如何处理连字符(注1)。大多数两端对齐文本都使用连字符将长单词分开放在两行上,从而缩小单词之间的间隔,改善文本行的外观。不过,由于CSS没有定义连字符行为,用户代理不太可能自动加连字符。因此,在CSS中,两端对齐文本看上去没有打印出来好看,特别是元素可能太窄,以至于每行只能放下几个单词。当然,使用窄设计元素是可以的,不过要当心相应的缺点。
注1:CSS中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则,而是干脆不提这个问题。

5. 参考资料

  1. CSS text-align 属性

ie-bug

1. size,padding和margin距离异常

在IE6中,各种size,padding和margin总是感觉怪怪的,有时候死活差那么几个像素.这时候可以使用单独为IE准备的CSS文件来纠正.只需要在页面头部加类似这样的CSS文件即可:

[code=’html’]

[/code]

其中的ie.css是对主CSS文件中,那些在IE6下显示异常的元素,重新定义的CSS.

2. 块元素居中问题

在现代浏览器中,一个块元素,假设是一个p,设置了宽度,设置左右margin都是auto之后,渲染效果应该是居中.但是在IE中,必须对其父元素,假设是body,加text-align:center;才能看到居中效果:

[code=’css’]body { text-align: center; }[/code]

并且,你还要在子元素p里把继承的居中纠正回来:
[code=’css’]p { text-align: left; }[/code]

3. div最小高度不能低于12px的bug

如果你需要一个高度很小的div,假设说做一个分隔线之类,你会发现div最小高度不会低于12px.这时候要设置div的line-height: 0;才行.

[code=’html’]

[/code]

如果还是不行,你要在div里套一个p,并且指定这个p的line-height: 0;.

[code=’html’]

[/code]

4. 浮动元素的双倍margin距离bug

这是一个非常严重的bug.你会发现你的侧边栏总会跑到第二行去显示,或者明明你计算好宽度,平分两半,还预留了些空隙,在Firefox显示正常,在屏幕左右分布的两个块元素,在IE下非换行不可.说起来应当是IE的float块元素,margin加倍渲染的bug.
这样的代码:
[code=’css’]
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}
[/code]

正确的渲染应该是这样:

marg-norm

但是在IE5和IE6里,margin的100px被加倍,渲染成这个样子:

marg-doubled

margin被加倍成了200px.
浮动元素的双倍margin距离bug的出现条件和特点是:

  1. float块元素
  2. margin方向与float方向相同,即float: left;的块只会加倍margin-left的值.
  3. 这个float块与其父容器的内边之间夹着这个margin的情况下,才会加倍.当前行的第二个float块,因为其左边不是父容器的内边,就不会出现这个bug.
  4. 浮动元素的双倍margin距离bug具备左右对称性.

修复很简单,在所有float的元素的CSS中加入display: inline;即可.其实根据W3C对float的定义,当float具备left或者right时,display效果应当是不起作用的,除非是display: none;,但是指定了display: inline;确实让IE6正确显示了margin.

5. 盒模型的bug

看这样一段代码:

[code=’css’]
div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
}
[/code]

根据盒模型定义,这个div的宽度应该是2+10+100+10+2=124px.大部分浏览器也是这样解析的,唯独IE6认为它是100px宽.
这个bug会对布局带来严重影响.消除这个bug只需要在页首制定DTD即可.

[code=’html’][/code]

此前的一篇文章这样解释:在页首制定了DTD,浏览器就认定Web开发者知道并理解DTD,于是就会使用兼容标准的方式来解析和渲染页面.

6. PNG图片不能透明bug

在IE6中,PNG图片原本透明的部分被渲染成不透明的颜色.可以使用这篇文章提到的办法修复之.
其实这个bug只会出现在设置为alpha透明方式的png图片上,导引色透明方式在IE6中则不会出现不能透明的bug.

参考资料

概述. 在美国第44任总统就职日这个历史性的日子,让我们来分析一下新的白宫网站(whitehouse.gov)代码结构吧。网站基于ASP.NET构建。

[singlepic=18466]

whitehouse.gov网站使用IIS 6.0. 网站的HTTP头信息中包含键值对”Server: Microsoft-IIS/6.0″。网站并没有使用微软公司最新版本服务器软件,IIS/7。

whitehouse.gov网站使用ASP.NET 2.0. HTTP头中标识自己的程序版本为”X-Aspnet-Version: 2.0.50727″。这个信息可以去掉,这样可以为每次服务器响应节省30字节带宽。

whitehouse.gov网站使用JQuery 1.2.6. JQuery JavaScript库,使用了其最小集版本,位于/includes/文件夹下。很多开发者使用Google服务器托管的JQuery以便提升性能和减小下载脚本的延迟时间。这样做可以提升站点性能。

<script type="text/javascript" src="/includes/eop/jquery-1.2.6.min.js"></script>

whitehouse.gov网站使用GZIP压缩. 所有网站文本都采用了GZIP压缩,显著地提升了性能。

未压缩大小:  48218 bytes
压缩后大小:   8370 bytes
节省带宽:           ~80%

whitehouse.gov网站使用Vary: Accept-Encoding. 在HTTP头中添加Vary: Accept-Encoding是一种强制代理不向不能解码GZIP的客户端发送GZIP内容的手段。

whitehouse.gov网站使用Cache-Control: privatemax-age. 它使用了”max-age=85895“,大约1 天。这样,html页面应该只会在你的计算机中缓存1天。

whitehouse.gov网站使用Web Trends Live追踪技术. WebTrends声称是“领先的网页分析和客户为中心智能市场营销解决方案(leading provider of web analytics and consumer-centric marketing intelligence solutions)。”

whitehouse.gov网站使用meta keywords标记. 这样做很奇怪,因为Internet上的访问者很少有不知道这里是干什么的。meta标记如下:

<meta name="keywords" content="President, Barack Obama, White House,
United States of America, 44th President, White House history, President Obama,
Barck, Barek, Barak, Barrack, Barrak, Obma, Barack" />

这样并不会对提升whitehouse.gov网站的Google PageRank有多少贡献。我认为搜索Barack Obama的用户无论如何都会被导引到这个网站的。

whitehouse.gov网站使用ViewState. 这是一个隐藏表单,允许网站在浏览器中存储服务器端数据。ASP.NET自动解析发送到浏览器的ViewState信息。浏览器不应该解析这个信息。

whitehouse.gov网站使用WebResource.axd. 这是ASP.NET生成的一个脚本文件。通常它们不能被有效地缓存,并且我发现它们的确降低了性能。

whitehouse.gov网站包含了很多空白字符. 如果你的浏览器启用了GZIP,这并不会带来性能影响,但是如果去掉这些空白字符,网站代码可以减小20%以上。

whitehouse.gov网站包含注释标签. 网站使用了很多HTML注释分割页面代码区域。如果能将这些注释写在服务器端代码中,可以在编译页面时不将注释编译在最终页面代码中,从而提升效率。

<!-- Start -->
<!-- End -->

whitehouse.gov网站包含很长很长的ASP.NET ID. 页面中的很多元素包含非常长的ID,是浪费带宽的主要因素之一。这些长ID可以很容易地在服务器端替换成短ID。

<a id="ctl09_rptNavigation_ctl00_rptNavigationItems_ctl01_hlSubNav"...

whitehouse.gov网站使用的GIF多于PNG. 网站使用的GIF图片多于PNG图片。PNG格式的图片可以更加优化,从而节省带宽和消耗。网站中使用了两个GIF动画。

whitehouse.gov网站使用了5个层叠式样式表(stylesheets)文件和12个JavaScripts脚本文件. 如果能把这两类文件合并成两个文件,网站可以更快而且更轻量级。当然这是针对访问首页的访客而言。奇怪的是,用于修饰管理页面的层叠式样式表也被加载进了普通用户的访问中:

/* admin styles */
/* cms */
.adminNavigation {width:996px; position:relative; z-index:100;}

whitehouse.gov网站使用了高度压缩的JPG. 如果你距离屏幕较远,或者视力不是那么好,这些图片看起来还行。开发者对JPG图片采用了高度压缩。这里显示的图片被放大并且轻微地二次压缩过。

[singlepic=18465]

whitehouse.gov网站使用了image sprites技术. 这项技术可以大幅提升站点性能,因为它将若干个小图片合并成了一张图片。这是一项先进的技术。采用了image sprites技术的图片是”nav-sprite.png“.

whitehouse.gov网站使用了Packer. Dean Edward的Packer是一个用于压缩JavaScript文件的工具。JavaScript脚本将在被下载时自动解压缩,这是一项很差的优化手段, 因为往往JavaScript经过GZIP压缩之后,比经过YUI压缩器(YUI Compressor)压缩之后更小。[参见 jquery-plugins.js]

eval(function(p,a,c,k,e,d)...

使用Packer的决定不像是一个深入了解GZIP或者文本压缩技术的人做出的。压缩之前的文件确实变小了,然而这导致了最终需要被下载的文件变大了。[http://dean.edwards.name/packer/]

whitehouse.gov大小821 KB, 在我的线路上(cable modem)使用了1.58秒完成加载。这个数字大约是新的、基于图片的网站的平均值。

加载时间:  1.58 seconds
总计大小:  821 KB

whitehouse.gov网站包含了几个隐藏链接. 在源文件里,大部分是在JavaScript中,大约嵌入了6个链接。这样,这些幸运的人就得到了来自白宫网站的外链(译者注:PageRank 9啊!9!)。

www.youngpup.net
http://sorgalla.com/jcarousel/
http://billwscott.com/carousel/
http://www.codylindley.com

whitehouse.gov网站使用了一个不透明的favicon.ico. 为了站点在加入书签后具有更好的视觉效果(译者注:对很多非IE浏览器而言,无论是否加入书签,favicon文件都会显示在标签栏),一个具有透明背景的favicon是更好的选择。这项改变对于一个知道怎么修改的人来说可以在10分钟内完成。

结论是,whitehouse.gov网站还是很吸引人的。虽然它并不算是一个非常有效率的站点,并且过多地注意了视觉效果。一个网站优化专家可以在几天之内将它的加载速度提升到现在的两倍。

最后,记住本届政府和奥巴马总统并不是写这些代码的人。

翻译自:http://dotnetperls.com/Content/whitehouse-gov-Site.aspx

这几天有点小活,要求是ASP.NET的,虽然我不怎么看好ASP.NET,但是人家要求了我也就照做吧。
最复杂的部分是一个TreeView。出于兼容性和简单性考虑没有用ASP.NET的TreeView控件,而是参考一篇文章自行写了一个出来。

[singlepic=18460]

技术指标如下:

  • 实现:Div+CSS+JavaScript+ASP.NET(C#)
  • 功能:可以实现无限级的TreeNode
  • 标准:在IE 7和Firefox 3.1下显示效果相同,兼容XHTML 1.0 Strict最严格的网页标准

效果如左图所示。最后一个函数可能会因为超宽看不到全部,具体请参照文章附件中的源代码。
附件下载:http://download.nocoo.us/Download/Archive/TreeViewCode.rar

TreeNode.cs

[code=’c#’]
///

/// TreeView结点类
///

public class TreeNode
{
private string name;
private string href;
private List subNodes = new List();

///

/// 结点名
///

public string Name { get { return name; } }
///

/// 结点链接
///

public string Href { get { return href; } }
///

/// 下级结点个数
///

public int Count { get { return this.subNodes.Count; } }
///

/// 获取或者设置下级结点
///

/// 序号 /// 下级结点
public TreeNode this[int index]
{
get { return subNodes[index]; }
set { subNodes[index] = value; }
}

///

/// 构造函数
///

/// 结点名 public TreeNode(string name)
{
this.name = name;
this.href = null;
}

///

/// 构造函数
///

/// 结点名 /// /// 结点链接 public TreeNode(string name, string href)
{
this.name = name;
this.href = href;
}

///

/// 添加下级结点
///

/// 新结点 public void Add(TreeNode node)
{
subNodes.Add(node);
}
}
[/code]

TreeView.cs

[code=’c#’]
///

/// TreeView
///

public class TreeView
{
private List nodes = new List();

///

/// 填充测试用数据
///

public void FillTestData()
{
TreeNode node1 = new TreeNode(“中国”, “#”);
TreeNode node11 = new TreeNode(“华北地区”, “#”);
TreeNode node111 = new TreeNode(“河南省”, “#”);
TreeNode node112 = new TreeNode(“河北省”, “#”);
TreeNode node113 = new TreeNode(“山东省”, “#”);
TreeNode node1131 = new TreeNode(“青岛市”, “#”);
TreeNode node1132 = new TreeNode(“济南市”, “#”);
TreeNode node11321 = new TreeNode(“市中区”, “#”);
TreeNode node11322 = new TreeNode(“历下区”, “#”);
TreeNode node11323 = new TreeNode(“槐荫区”, “#”);
TreeNode node11324 = new TreeNode(“天桥区”, “#”);
TreeNode node11325 = new TreeNode(“长清区”, “#”);
TreeNode node1133 = new TreeNode(“菏泽市”, “#”);
TreeNode node1134 = new TreeNode(“济宁市”, “#”);
TreeNode node1135 = new TreeNode(“德州市”, “#”);
TreeNode node12 = new TreeNode(“东北地区”, “#”);
TreeNode node13 = new TreeNode(“西北地区”, “#”);
TreeNode node14 = new TreeNode(“华东地区”, “#”);
TreeNode node15 = new TreeNode(“西南地区”, “#”);
TreeNode node16 = new TreeNode(“华南地区”, “#”);
TreeNode node17 = new TreeNode(“华中地区”, “#”);
TreeNode node18 = new TreeNode(“港澳台地区”, “#”);

node1132.Add(node11321);
node1132.Add(node11322);
node1132.Add(node11323);
node1132.Add(node11324);
node1132.Add(node11325);

node113.Add(node1131);
node113.Add(node1132);
node113.Add(node1133);
node113.Add(node1134);
node113.Add(node1135);

node11.Add(node111);
node11.Add(node112);
node11.Add(node113);

node1.Add(node11);
node1.Add(node12);
node1.Add(node13);
node1.Add(node14);
node1.Add(node15);
node1.Add(node16);
node1.Add(node17);
node1.Add(node18);

nodes.Add(node1);
nodes.Add(new TreeNode(“俄罗斯”, “”));
nodes.Add(new TreeNode(“美国”));
nodes.Add(new TreeNode(“韩国”));
nodes.Add(new TreeNode(“澳大利亚”));
nodes.Add(new TreeNode(“印度”, “”));
nodes.Add(new TreeNode(“加拿大”, “”));
}

///

/// 获取TreeView的html代码
///

///
public string GetHtmlString()
{
StringBuilder sb = new StringBuilder();
sb.AppendLine(“

    “);
    for (int i = 0; i < nodes.Count; i++) { sb.AppendLine(GetNodeHtml(nodes[i], 1, (i + 1).ToString())); } sb.AppendLine("

“);
return sb.ToString();
}

private string GetNodeHtml(TreeNode thisNode, int depth, string id)
{
StringBuilder sb = new StringBuilder();
bool hasSub = (thisNode.Count > 0) ? true : false;
sb.AppendLine(string.Format(“

  • “, depth, id));
    sb.AppendLine(string.Format(

    {3}

    “,
    hasSub ? “closedir” : “nodir”,
    depth,
    id,
    (thisNode.Href == null || thisNode.Href.Equals(“”)) ? thisNode.Name : string.Format(“{1}“, thisNode.Href, thisNode.Name)
    ));
    if (hasSub)
    {
    sb.AppendLine(string.Format(“

    “, depth, id));
    sb.AppendLine(“

      “);
      for (int i = 0; i < thisNode.Count; i++) { sb.AppendLine(GetNodeHtml(thisNode[i], depth + 1, string.Format("{0}_{1}", id, i + 1))); } sb.AppendLine("

    “);
    sb.AppendLine(“

    “);
    }
    sb.AppendLine(“

  • “);
    return sb.ToString();
    }
    }
    [/code]

    ASP.NET页面调用:

    [code=’c#’]
    <% CMC.TreeView list = new CMC.TreeView(); list.FillTestData(); Response.Write(list.GetHtmlString()); %>
    [/code]

    ASP.NET页面JavaScript:

    [code=’js’]
    defaultNodeState();

    function defaultNodeState()
    {
    var nodeState = getCookie(“nodeState”);
    if(nodeState == null)
    {
    nodeState = “,|,|,”;
    setCookie(“nodeState”,nodeState);
    }
    var layer = nodeState.split(‘|’);
    for(var i=0;i

    火狐,你大概知道~
    英伟达呢?第一印象会是个沿海服装或者皮鞋厂吧…
    Anyway,英特尔之后大家都喜欢给自己起个中文名,尤其是在中国设立研发机构的公司都迫不及待地起个中文名以便与总部划清界限(没错,说的就是谷歌)。
    Firefox和Nvidia看起来好像是完全不相干的两个公司嘛。其实不然,总感觉这两个公司的产品现在越来越有着相似的一面。
    哗哗哗时间过去三五年当云计算成真,当我们的个人终端已经不需要所谓的主机而变成一个屏幕的时候,当网线和电线早就集成在一起,要上网只要插电源的时候,Google所谓网络操作系统(其实就是Google Chrome或者其他浏览器,比如Firefox)大行其道的时候,当我们的所有东西都运行在说不清楚在什么地方的服务器的时候,Firefox就取代了Nvidia,接下了为用户渲染呈现视觉效果的重任。
    我们还是看看现在的JavaScript已经强大到了什么地步吧!

    2D

    [singlepic=18425]

    JavaScript Super Mario Bros.
    没错,JavaScript版的马里奥兄弟。也许你还记得,天朝的JavaScript开发者早就推出了网页版仙剑。

    [singlepic=18427,600,425]

    JSLab Plot Tool
    JavaScript版Matlab。

    “3D”

    [singlepic=18424]

    http://processing.org/learning/3d/
    3D的JavaScript库

    [singlepic=18426]

    10款让你震撼的图片展示js代码
    Apple Cover Flow效果的JavaScript实现,这似乎已经不算是什么了。

    猜一下吧,以下的哪一个会成为几年之后的Nvidia?

    The following ones are the new generation JavaScript engines for web browsers, all implementing just-in-time compilation (JIT) or variations of that idea:

    WordPress有多好多强大?WordPress可以用完全自定义的HTML页面来呈现内容,你只需要遵循那么一点点规矩,放到合适的位置即可。
    长久以来,我都被个人简历页面里面杂乱无章的呈现方式纠结不已,无奈实在没什么好办法,最多用ul去简单组织那么一下下,效果还是远远不够的。
    自从HTML感悟了之后,其实就是昨天晚上,决心重整个人简历页面,毕竟那是脸面啊。
    经过近乎一整天的编写,算是写了个我比较满意的页面出来。当然,XHTML 1.0 Strict。
    很多人问我写HTML的时候用什么工具,其实就是普通字处理软件,Notepad,UltraEdit,最多Visual Studio 2008而已。下面那棵树,是我第一次用AI做出来的东西哦~

    我从来不用QZone,也从来不觉得用QZone的人有多么明智,因为QZone是我见过最囧的博客程序。在我心目中,只有90后脑残的人们,和中科院的院士,才是QZone的用户。
    今天QQ上提示有两个QZone提示消息,不把提示消灭成0我不甘心,终于点进去了。
    第一囧,QZone居然在Firefox里成功打开,让我有了一丝好感,不错,有进步,要知道以前用Firefox开QZone总是进入一个RSS Feed的地方,很怪。
    第二囧,我在右上角发现这个:

    [singlepic=18061]

    恬不知耻的腾讯向我示威:“您打开空间所用时间仅为3.966秒,速度相当快喔!”
    我终于出离愤怒,关掉QZone,站起身来,终于明白为什么挂牌的人会指定一个条件:毕业后打算去腾讯的不要。