Posts filed under 'xhtml&css'
这道题是我在论坛里看到的，有这么一段HTML，请挑毛病：
<P> 哥写的不是HTML，是寂寞。<br><br> 我说：<br>不要迷恋哥，哥只是一个传说
这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。
解答部分：
出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维 护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。这道题考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。
言归正传。这道题的考点：
考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。
这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。
考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp
考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期 无法再控制。正确的做法是用两个p表现两个段落。”我说”后面是正常的文字折行用br是合理的。
上面全答对，你就能拿到100分。
对原题改进的结果：
html 4.01:
<p>哥写的不是HTML，是寂寞。<p>我 说：<br> 不要迷恋哥，哥只是一个传说
xhtml 1.0:
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>
加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如”我 说”的话，可以用q标签标注。
<p>哥写的不是HTML，是寂寞。
<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>
我觉得这就够了，如果再进一步，”我”用cite标注，”HTML”用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也可以，再复杂就没必要了。
<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>
ShareThis
Tags: xhtml&css, yahoo
May 16th, 2010
5个很有用CSS属性，你可能很熟悉却不一定经常使用。这5个CSS属性是CSS2里浏览器广泛支持的clip、min-heigh、white-space、cursor和display。你可能会发现这5个属性远比你想象的功能强大。
1.CSS Clip
Clip属性就像一个面具，让你掩盖元素的内容在一个矩形框里。要使用Clip元素：你必须指定绝对位置。然后，指定元素的top、right、bottom、left对应值。
图片剪辑示例：
下面的例子会告诉你怎样使用Clip属性隐藏图片，首先，指定<div>元素position：relative。下一步，指定<IMG>元素position：absolute和相应的矩形值。
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
图片调整和剪辑：
原来的图片是矩形格式，把它的大小调整到50％，创建一个正方形格式缩略图。所以，就要使用宽度和高度属性来调整图像的大小的图像和使用Clip属相隐藏。然后，使用left属性把图片移到左边15px。
.gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}
2.min-height
min-height属性允许你指定元素的最低高度,当你需要平衡布局时它可就派上用场了。在Wordpress设计时可以确保内容区总是比侧边栏高。
.with_minheight {
min-height: 550px;
}
Min-height hack for IE6
注意：min-height不支持IE6,所以就有了Min-height hack
.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}
3.White-space
white-space 属性设置如何处理元素内的空白。例如：设置White-space:nowrap规定段落内的文本不换行。
em {
white-space: nowrap;
}
4.Cursor
cursor 属性规定要显示的光标的形状。如果你改变按钮的行为，同样应该也改变光标。例如,一个按钮被禁用，光标应该改为默认的箭头，表明它是不可点击的。因此，光标属性在Web应用程序开发中很有用。
.disabled {
cursor: default;
}
.busy {
cursor: wait;
}
.clickable:hover {
cursor: pointer;
}
5.Display inline / block
如果你不知道：Block元素会使文本出现在一个新行，而内联元素inline却使文本在同一行。 <div>、<h1>和<p>标签是块元素的例子。inline的例子有<em>、<span>和<strong>标签。你可以指定网页的显示风格display：inline或block。
.block em {
display: block;
}
.inline h4, .inline p {
display: inline;
}
原文：5 Simple, But Useful CSS Properties
ShareThis
Tags: css, xhtml&css
May 3rd, 2010
SuperPreview for Internet Explorer 是微软发布的一款免费软件，可以让用户在不同版本的IE浏览器下调试网站，测试网站在各个版本IE浏览器下的兼容情况。
软件是沉稳的黑色界面，可调试IE6、IE7和IE8以及单独的图片，两种元素高亮模式: 选框高亮和颜色高亮，一个是用线框住选中元素，一个是把选中元素的背景变暗。四种浏览模式: 上下两栏、左右两栏、覆盖模式和单栏模式，可以方便的显示选中元素的高宽和坐标，支持浏览器分辨率的快速切换。
SuperPreview for IE不仅可以显示各个版本IE浏览器对页面渲染，而且还能展示出元素的标签、大小和位置、应用的样式、在 DOM 树中的位置。通过 SuperPreview for IE 能很快找出页面错误。
此外SuperPreview for IE还有一些小功能比如：标尺、参考线、缩放和抓手等。实际上这个软件不错，很适合前台开发人员。如果你喜欢，不妨试试看吧，目前仅为英文版。
SuperPreview for IE(包括Microsoft .NET Framework 3.5 SP 1)下载：uushare|Dbank|skydrive
ShareThis
Tags: IE, Internet, microsoft, preview
December 22nd, 2009
PSPad是一位捷克人Jan Fiala开发的，它定位为程序员的编辑器，完全免费，兼顾文本和代码。软件更新很快，目前的最新版为4.5.5 (2374)。
这是一个很好用的代码编辑软件，其功能如下：
支持 Unicode ，多国语界面面，有分页功能 ，程序语法高亮度显示，可以让你直接编辑远端 FTP 的文件 。支持 Session，启动时可直接开启上次编辑的文件，可以对比两个文件内容的差异 ，支持 HEX 编辑，支持 HTML 验证及排版，支持PHP的正规表达表示式，内建 Google 搜索，编辑文章时允许你直接选取文件中的任意字词直接送到 Google 中做搜索，支持多项开发网页及程序时会用到的小工具，比如：ASCII 字码表、色彩格式转换器等等。支持 Extensions, 可扩充软件功能,且官网有Plugin供大家下载。
PSPad下载：uushare|dbank|skydrive
ShareThis
Tags: editor, php, pspad, ultraedit
December 13th, 2009
JCreator 是一款JAVA程序语言的编辑器，Rollom提到的版本为免费的LE版，若需要更高版本的功能，就必须要付费买更高阶的版本，届面可说是非常简洁，适合初学者使用，这是全英文版。在使用JAVA语言前，请先安装SDK套件及一些环境参数设定，就可以使用了。
JCreator LE 下载：uushare|skydrive|dbank
ShareThis
Tags: editor, java, jcreator, software
December 13th, 2009
FindBugs是一个在Java程序中寻找错误的开源软件。有了这个工具，您可以提高在Java开发过程中应用程序的表现和减少安全漏洞。 FindBugs使用静态分析，检查出现的Java代码错误模式。也就是说，FindBugs可以通过简单的检查找出程序中的错误代码中，执行程序是没有必要的，而且你甚至不需要程序的源代码就可以使用它。
FindBugs的程序是基于错误模式概念，一个代码成语常常是一个错误。错误的模式出现了故障如语言输出、错误的API方法、代码在维护过程中的各种错误和大量修改：变量、打字、使用了错误的布尔运算符等。
使用FindBugs，你需要java 2 标准版的运行环境runtime environment version 1.5以上，可以运行在GNU/Linux、Windows,、and MacOS X 平台。FindBugs完全开源，需要的朋友可以去下载。
ShareThis
Tags: analyze, code, software
October 11th, 2009
13 Opentype Fonts from Adobe（13MB)喜欢的朋友可以下载
Download下载：HotFile
ShareThis
Tags: adobe, font, opentype
September 28th, 2009
下面介绍几个比较好看的卡通图标组，可以用它们来替换桌面的那些已经让我们产生视觉疲劳的图标，自己挑着看吧。
所有这些图标都对个人免费，尽管下载。
上面的图标称为：Comic Tiger
上面的图标：desktoon，包含了31个手绘的图标。
上面的这组：Fantastic Dream图标
上面的这组图标：gartoon
上面的这组图标：SystemMartix
上面的这组图标：Margin
这几组图标我自己认为很不错，推荐给大家，希望喜欢。
卡通图标下载：uushare|
ShareThis
Tags: css, icon
June 16th, 2009
Older Posts
|