Dangbao's Blog

年度档案: 2008

2008的最后一天

2008的最后一天,发生了好几件事情。记录下来,以下排名不分先后:

1.我嗓子难受,家里太干,晚上准备去买加湿器了。
2.google的PR值更新了,本博飙升到5,狂喜不已。
3.备案达半年之久终于有消息了,被无情的拒绝了。
4.本博顺利从PJBlog3 2.8.5.157升级到PJBlog3 3.0.6.170 最终版。
5.网易2008年终致敬--无跟帖,不新闻。

通过W3C标准验证

干网页制作的应该都知道W3C的标准验证,XHTML和CSS都是W3C制定出来的。可是放眼望去,国内没几个通过W3C的在线验证的。我前段时间曾经提交了一下几大门户的首页的CSS,只有新浪的CSS通过了验证。虽然通过不通过不是什么紧要的事,但既然是国际性的组织规范,我们就要靠近。[face01]说到这里了,曾经看过一篇文章说是网页要是通过了W3C的认证,更利于搜索引擎。这事也就不多说了,有人说我的站就不标准。我的收录和排名照样是很好的。其实大家之所以不愿意去认证,是W3C的要求很严格,甚至有点琐碎[face10]哈,原谅我的无心,不是挑战权威哦。说到这里也不由的为前端感到一丝悲哀。俗点说吧,哪家公司招个写静态页面的,都希望越快做好。扔浏览器里不错位给程序就完事了,哪里顾得的你标准不标准。大家也都知道,我国目前的网页声明都是transitional.dtd,过渡期的当然会承上启下,兼容性强了。加以时日,世界上所有的网页strict.dtd的时候,我希望我们前端人员应该勇敢的站出来,因为机会是给有准备的人准备的。 全文

鼠标css属性

WINDOWS系统里,通过改变CSS样式里“cursor”属性来完成鼠标在页面上的各种形状:
属性   解释
default  默认指针
auto   鼠标按照默认的状态根据页面上的元素自行改变样式. 
crosshair 精确定位“十”字。
hand & pointer  手形
move   移动
e-resize 箭头朝右方
ne-resize 箭头朝右上方
nw-resize 箭头朝左上方
n-resize 箭头朝上方
se-resize 箭头朝右下方
sw-resize 箭头朝左下方
s-resize 箭头朝下方
w-resize 箭头朝左方
text   文本“I”形
wait   等待
help   帮助

HTML 5令人期待的5大功能

HTML自1999年发布HTML 4.01以来,其开发一直处于停顿状态,而1999年至今正好是Web飞速发展的时间,现在的HTML版本已经无法适应现在的 Web 内容与应用。HTML 5是超文本置标语言下一个重要版本,旨在提高 HTML的交互行,支持当前多样的,复杂的Web内容。同时它也会解决HTML 4 Web应用功能上的欠缺。

一点历史背景

HTML 5 的讨论开始于2003年,当时,W3C 对由 Web Hypertext Application Technology Working Group (WHATWG) 开发的 HTML 5 草案表示出兴趣,WHATWG 创始于2004年,由苹果,Mozilla 基金会,以及 Opera 公司的 代表组成。此后,W3C HTML Working Group 于2007年成立并着手开发 HTML 5。目前,开发工作仍在进行中,并将于2012年向 W3C 提交初步意见,不过现在已经有不少浏览器部分支持 HTML 5。本文介绍 HTML 5 的5大令人激动的新功能。

1. 一些帮助我们描述内容的新标签

Web 内容的多样性让 HTML4 力不从心,在描述一个网页时,HTML4 如下表现;HTML 5 将如下表现,这样,浏览器就知道一个网页的各个部分各代表什么,比如 nav> 部分是导航,而 article> 部分是主要内容 。除了更漂亮的 代码与语义标签,这种改变还带来更多好处,比如,搜索引擎可以更准确地知道一个网页的哪部分内容更重要。关于 HTML 5 新标签,IBM有详细的论述。

2. 改进的 Web 表单处理

HTML 5 推出 Web Forms 2.0,为开发提供许多新选项和新功能,以更简单更有效地处理表单的输入与发布。Web Form 2.0 最令人兴奋的功能是输入验证。目前,我们需要通过 JavaScript 或服务器端的逻辑,实现同样的功能。

比如有下面这样一个表单;在 HTML4 我们需要这样写代码,然后使用 JavaScript 或服务器端的脚本进行验证;而HTML5中的 required 与 email 属性可以直接实现验证,如下。

3. 为 Web 开发提供 API

HTML 5 将提供多个 API,如音频和视频标签可以让开发者不借助第三方工具直接播放 Web 视频和音频;

Opera 在者方面有不少研究并有视频播放 demo 推出

4. 标签将允许直接在上面用脚本绘图

人更容易从图片获得信息,如下面的信息通过表格和圆饼图两种方式显示,效果明显不一样;然而以往要实现这种效果,只能使用静态图片,无法对图片进行调整。使用 标签,你可以实时修改参数对图形进行修改,比如,根据用户的投票,实时生成圆饼图。

5. 用户可以编辑网页的部分内容并实现同网页的交互

HTML 5 将支持用户的交互,contenteditable属性允许你设定网页的哪一部分可以编辑,在基于 Wiki 的 站点,这非常实用。延伸阅读
You can read the latest working draft of HTML 5 specifications on the W3C website (HTML 5最新工作草案).
Learn about the major differences between HTML 4 and HTML 5 on the W3C website(HTML4/5的主要区别).
IBM developerWorks has an excellent in-depth article on new elements in HTML 5.(IBM有一篇关于 HTML 5 的 深度 研究文章)
Read about the people in charge of developing HTML 5 specifications on the W3C HTML Working Group website.(W3C HTML 工作组成员)
Find out what you can do to help HTML 5 development on the WHATWG wiki website.(如何为 HTML 5 提供帮助)

css滤镜实现图片水印效果

现在利用CSS滤镜透明的效果来做东西的例子很多了,本博在“标题叠加在图片上面的几种显示方式”一文中用到过滤镜来半透明文本背景。本文的原理是将一张黑背景的水印图置为DIV的背景,然后设置DIV里图片的透明度为75%,然后就能看到水印图了,HOHO。模拟一下,供大家来交流讨论。实用CTRL+A全选后就可以看到图片的全部,水印就看不着了,当然也可以查看源文件看看图片的真实面貌。

.transp-block{background:#000 url(#) no-repeat right bottom;margin:0px auto;width:502px;height:377px;overflow:hidden}
img.transparent{filter:alpha(opacity=75);moz-opacity:.75;opacity:.75}

图片路径

sup实现css浮角

在菜单上添加一个右上角浮动的小图标,更加醒目的来提示用户,我给它起名为CSS浮角。当浮角只有一个的时候,我们可以用外框相对定位,浮角绝对定位来精准的定位小图标的位置。如果可能出现多个浮角的话,可以用sup标签来做。我看了淘宝和拍拍的代码,觉得这种方式做比较好。想显示浮角的地方后面直接加上SUP标签就能实现。而不用去计算定位的坐标。

body{font-size:12px;margin-top:30px;}
ul,li{list-style-type:none;margin:0;padding:0;float:left;}
#nav{height:30px;width:610px;margin-left:auto;margin-right:auto;}
#nav li{margin-left:1px;line-height:30px;background:#ff6600;}
#nav li a{display:block;float:left;text-decoration:none;color:#fff;padding:0 10px;}
sup{position:absolute;margin-top:-8px;margin-left:-13px;background:url(tag.gif);width:16px;height:16px}
sup放在LI内即可

中文配色方案生成工具

个人认为比较实用的一款工具。左面每选择一个颜色右面显示出相关的颜色值,并且可以对亮度、对比度等进行调和。而且左面也可以选择单色、补色、三元色、双补色和类似色,还可以切换到网页安全色。右下角则是针对的视觉人群,赞一个,感谢原作者。

点击查看在线的颜色配色方案生成器

用dl,dt,dd布局注册页

做到注册页的时候,很多设计师会选择左侧的名称右对齐,而右侧的文本域和按钮等则左对齐。那么我们写页面的时候就会考虑,用li设置了浮动来写结构比较麻烦。尤其是名称和textarea的对齐方式的问题。下面是yahoo的注册页代码演示。一起来学习一下。
点击查看在线的颜色配色方案生成器

国内各大网站的css reset

百度有啊:

/*baidu youa*/
body {font:13px/1.4 arial,helvetica,sans-serif;*font-size:small;*font:x-small;text-align:center;}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,
input,textarea,select,button,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
table {font-size:inherit;font:100%;}
input,select {font:100% arial,helvetica,clean,sans-serif;;}
button {overflow:visible}
th,em,strong,b,address,cite {font-style:normal;font-weight:normal;}
li{list-style:none;}
img,fieldset {border:0;}
ins {text-decoration:none;}

全文

css+div,请避免DIV癖

眼下,css+div已经成了一种行业典型说法,甚至已经成为职位名称。作为职业的页面重构工作者,不禁对此无奈的苦笑。无需多讲,我要说的主题也不是css+div有什么不对,我想说的是由此说法引来的误区和癖好。

绝大部分人开始学网页制作,只是一味用DIV标签来布局,DIV里再套DIV,也不知道注意什么标签语义化。这不是什么错,本来XHTML里使用最多的标签是DIV嘛。设计师出来效果图交给我们,很快就要求写出页面,那只能是一味地写,一味的在各种浏览器里做测试。测试通过,就交给程序完工。可是真的回头想想,如果我们的页面都是一味的DIV嵌套出来,仅仅的为了比TABLE做的页节省网页体积和样式的重复调用嘛?DIV布局的意义何在?HTML里的许多元素的意义何在?这是值得我们思考的问题。

在精通HTML一书里看到了这方面的讲解,目前最大的不良使用习惯就是:使用DIV来代替标题和段落之类的结构性标记。当要标记内容的时候,有很多不同的标记可以供选择。我们可以在CSS的开头进行各个元素的重置(CSS Reset),然后我们可以根据不同的情况来选择属于它们的标签。最典型的误区是将将标题放在DIV里,而不去使用h1-h6,慢慢的我们要更改页面里充斥的不必要的结构性标记。如果已经有非常好的结构性和语义性标记可用,那就再也没有借口使用了。HOHO,要写出语义化标签的页面来,我们还需要好好学习HTML,理解HTML。告别div癖(divitis)、span癖(span-mania)、class(classitis)癖。告别不合理、不必要的结构性标记!

标签:

android bom border css工具 css布局 display DW ff firefox fireworks fixed flashget html ie6 IETester IE开发人员工具 iis jQuery jq插件 win7 WordPress 分类信息 挂马 无线路由器