Dangbao's Blog

09年ICP备案成功

上次备案是06年,备案刚刚开始的时候,我只有一个米,提交了信息大约20多天就下来了,当时还是蒙ICP。来北京工作以后,大概去年自己提交了一次备案,可是最后是审核拒绝通过。原因是需要向当地通信管理局提交书面文件。前些日子联系了一下空间商,重新填了一份表单,让人家给提交备案信息去了。结果,不到一个月的时间备案就通过了,太令人欣喜了。果然是专业人士!需要说明的是ICP号码是一个,然后所有的域名共用一个号码。也就是说不用一个网站申请一个备案号了。希望各位早日通过备案![face50]

CSS Sprites之宽度自适应菜单

CSS Sprites的应用已经非常广泛,初衷是为了减少对服务器的请求数,将图片拼合在一张图上,不同Class通过不同的坐标值来显示需要的图片块。下面是某大型网站的Menu,图片设置宽一点,为分类名的宽度预留足够的宽度。然后我们的不管分类名多少,宽度始终是自适应的。li左浮动显示居左的图,Span左浮动显示居右的图,所有我们始终都会看到完整的背景左右边。当然,一般的分类名都不会很长,所有我们只要预留大约10个字左右的宽度足矣。
点击查看CSS Sprites之宽度自适应菜单

JavaScript中的CSS属性及命名规范

许多CSS样式属性的名字中都有连字符,在JavaScript中,连字符被解释为减号,因此,CSS2Properties对象的属性名和真正的CSS属性名有点不同。如果一个CSS属性名含有一个或多个连字符,在JS中则需要删除了连字符,并且原来紧接在连字符后的字母改为大写。要注意的是float是JS的关键字,所以在JS中float被写作cssFloat与或floatStyle。下面是CSS自身属性与JavaScript中CSS编码对照表:
盒子标签和属性对照:
[code]CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
border   border
border-bottom   borderBottom
border-bottom-color   borderBottomColor
border-bottom-style   borderBottomStyle
border-bottom-width   borderBottomWidth
border-color   borderColor
border-left   borderLeft
border-left-color   borderLeftColor
border-left-style   borderLeftStyle
border-left-width   borderLeftWidth
border-right   borderRight
border-right-color   borderRightColor
border-right-style   borderRightStyle
border-right-width   borderRightWidth
border-style   borderStyle
border-top   borderTop
border-top-color   borderTopColor
border-top-style   borderTopStyle
border-top-width   borderTopWidth
border-width   borderWidth
clear   clear
float   floatStyle(ie) cssFloat(FF) /*important*/
margin   margin
margin-bottom   marginBottom
margin-left   marginLeft
margin-right   marginRight
margin-top   marginTop
padding   padding
padding-bottom   paddingBottom
padding-left   paddingLeft
padding-right   paddingRight
padding-top   paddingTop[/code]颜色和背景标签和属性对照:
[code]CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
background   background
background-attachment   backgroundAttachment
background-color   backgroundColor
background-image   backgroundImage
background-position   backgroundPosition
background-repeat   backgroundRepeat
color   color
[/code]样式标签和属性对照:
[code]CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
display   display
list-style-type   listStyleType
list-style-image   listStyleImage
list-style-position   listStylePosition
list-style   listStyle
white-space   whiteSpace
[/code]文字样式标签和属性对照:
[code]CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
font   font
font-family   fontFamily
font-size   fontSize
font-style   fontStyle
font-variant   fontVariant
font-weight   fontWeight [/code]文本标签和属性对照:
[code]CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
letter-spacing   letterSpacing
line-break   lineBreak
line-height   lineHeight
text-align   textAlign
text-decoration   textDecoration
text-indent   textIndent
text-justify   textJustify
text-transform   textTransform
vertical-align   verticalAlign[/code]

cookie记忆-防刷新菜单

本人收集的一个效果,通过cookie记忆最后一个点击菜单的class,从而实现菜单当前选中的状态。在点链接的时候会出现难看的虚框,所以我更改了代码,使之看起来更加美观。当然这个效果并不适用于大型交互网站,因为它只是记忆上次点击来显示。如果本页内有其它菜单下的内容,那么它依旧会显示选中的是上次点击后的菜单。因此此效果用在交互性不是很强的网站,如展示型企业站和个人站。不想为每一个页面都新建一个头部,每个头部只是在被选中的菜单上加一个class。那么就用这个防刷新菜单吧。
查看cookie-menu

网页前端制作发展小漫谈

CSS和XHTML经过这几年在国内的发展,已经占据了主导地位。也成了网页前端必须掌握的技能之一。关于两三年前用TABLE布局好还是DIV布局好的争议已经烟消云散,已经完全没有必要提了。网站的各个职位要求似乎都跟CSS沾上了边,设计、程序都要会写几个样式。网页前端制作也一下子成了热门职位,即使在金融危机的困难风潮下,招聘前端职位的公司还是很多。毕竟作为一个新兴的职位,和其它职位比较起来,前端技能熟练的人还不能算是太多。不过新人学习的劲头也足一些,很多人为了换博客和空间的皮肤也开始学习CSS,所以也产生了好多CSS相关的网站、论坛、QQ群。也是个好现象吧。

CSS3标准的呼之欲出,将使得CSS也会发展成为一门弱编程语言。所以前端的难度也会更大,更多的样式和属性需要使用。而且各个浏览器也会推出自己有关CSS功能的额外扩展需要我们知道。未来的CSS会更加强大和健壮。当然,浏览器的兼容问题依旧存在。最近WEB界掀起了反IE6的运动,为推动W3C标准和更好的用户体验,建议升级IE6。而目前来说,IE8仍在测试阶段,对CSS3也提供了部分支持。而新版的火狐、Safari也开始支持CSS3。

JavaScript在最近几年也重新焕发了光彩,编程的要求也会越来越高,不过prototype、jQuery等JS插件的不断更新使我们更充满了想象力,也让代码书写更加从容简单。因而也是前端人员需要掌握的技能。不过IE的自身标准和W3C的标准不兼容问题,也需要我们从头开始学习。本博推荐JavaScript权威指南,比较详细的介绍JS核心内容和浏览器支持特性。

就我个人来看,网页前端在将来还会在网站中占据很大的空间和位置。网页前端的水准会走上一个新的发展历程。

css相关的seo事项

SEO的重要性会越来越重要,它已经渗透到网站的层层面面了,一个健康积极的网站会使得搜索引擎非常友好。下面来谈谈关于前端人员在写代码时的SEO事项,当然我不是SEOER,所以以下言论纯属个人体会,还请看客您指点指正。

  • 结构。良好的结构是搜索引擎所青睐的,代码结构层次分明,逻辑清楚。蜘蛛爬行的时候也会很顺当。这可能是每个搜索引擎都想要的吧。通常在写一个页面之前先构思一下整个的布局,选择一种合适的版式再来写结构,本着尽量少嵌套层的原则上进行。用最简洁的代码来描述出网页,相信对自己也是一种不断提高。
  • 标签。语义化的标签也是一种良好的习惯。弄明白每个标签该出现的合适地方。比如H1的重要性,但是不能因为它重要就疯狂使用,也许你是无意的,但是搜索引擎很可能以为你在作弊。保持页面标签的整洁和语义化,让爬虫能良好的阅读代码。请查看本博关于标签使用的一篇文章DIV癖
  • css命名规则。个人感觉良好的命名规则会让搜索引擎快速的识别理解本段代码。查看css命名规则
  • W3C验证。这项似乎可能有人会不认同。因为即使不通过W3C验证,网站也依旧很友好,收录很好。但是我想说,作为网页界统一标准和规范的权威机构,搜索引擎对网页质量的考核上也肯定会越来越重视验证服务的。这里我想提醒大家一点,尽量少在用页面中用style,需要写样式的地方要写在样式表中。请查看本博的通过W3C标准验证

以上各项的重要性依次递减,希望能对网页同仁有所帮助。

JavaScript学习笔记

  • JavaScript程序是用Unicode字符集编写的。16位的Unicode编码可以表示地球上通用人每一种语言。
  • JavaScript是一种区分大小写的语言。
  • JavaScript会忽略程序中几号之间的空格、制表符和换行符。
  • null表示“无值”,是JavaScript的保留字。undefined是在使用了一个并未声明的变量时,或者使用了已经声明但还没有赋值的变量,又或者使用了一个并不存在的对象属性时返回的值。
  • JavaScript的变量可以存放任何类型的值。没有类型规则。
  • JavaScript没有块级作用域。
  • JavaScript变量基本上和对象的属性是一样的。

本文会不定时更新……

入手JavaScript权威指南

从当当网订购了这本书JS重量级的权威之作--JavaScript权威指南(第五版)。第5版针对Ajax和Web 2.0技术进行了全新的改版。本书一样紧跟时尚,最新的ajax,流行的js封装技术在本书都有详细说明。这本书同时具备教程和手册两用封面是o'reilly公司的动物系列--爪哇犀牛。书比较厚,共有954页。定价:109元,在当当是75折,所以是81.75元买的,很合适。前言、第一章、第一、二部分是用来学习的,后面的第三--六部分以及索引、词汇边等都是用来查阅的。本博也会陆续的去写阅读和学习的笔记。毕竟这是全球超过30万的JavaScript程序员的必备参考,JavaScript之父高度评价和强力推荐的权威之作。 全文

pjblog和z-blog使用浅评

使用asp个人Blog的大概都知道pjblog和z-blog。我来说说最新版本的PJBlog3v3.0.6.170和Z-Blog 1.8 Arwen Build 81206使用后的一点感受,仅供参考。

  • 使用。PJ用户在前台可以编辑、删除帖子,发新帖也在前台完成。ZB则是在后台完成。也可以通过插件实现在前台显示编辑按钮,但是还是会跳到后台编辑。ZB可以实现UBB和可视化编辑的自由转换,而PJ则是只能在发文章的时候选择好了要使用UBB还是FCK。
  • 界面设计。预置的前台皮肤来说,PJ的比较好看点。后台的美观度和易用性也是PJ比较好点。ZB的稍有不足。而且预置内容也稍差点。
  • 皮肤。双方的官网都有很多精美的皮肤。整体论设计水平高的皮肤,我还是选PJ。PJ的皮肤制作和修改也比较简单,就是CSS和图片,可以在线编辑静态模板和CSS。ZB的皮肤是一个专用的包。制作起来稍显复杂,里面包含静态的HTML。如果有人在模板里加入广告代码,对使用者来说也是不利的。不过其后台可以自动更新主题,功能不错。
  • 插件。双方的插件都可以在线安装和卸载。不过PJ的好多插件在开启了静态日志后不能使用。而且就插件的功能、实用度、水准、数量来说,ZB的明显占据优势。WilliamLong、巴士飞扬等大腕写的插件非常棒。
  • 模块。PJ的模块比较简单。可以自由添加内容和侧边的模块,并且对模块进行编辑
    。系统模块也比较多。日历、导航、档案、链接等常用的都有。不过系统模块是在每个页都显示的。添加的模块在静态页还无法显示,除非是改静态模板。ZB的则在后台没有这项功能,只能通过编辑静态模板来实现了。当然DIY性更高。
  • SEO。重点来了,关于这点我只能说下我的看法。PJ的SEO口碑一直不错。PJ3终于实现了静态化日志,后台有动态、半静态和静态三种模式自由切换。最新版的170则实现了日志别名和日志自动或手动填写keywords和description,相信会引起不错的反响。而新版的ZB则忽略了keywords和description,输出的HTML里完全没有它们的影子。大概通过插件能实现吧。不过ZB厉害的地方还是自定义静态日志目录配置了。可以生成http://www.dangbao.net/article/data/pjblog-z-blog/这样的地址。我们也都知道pjblog-z-blog/default.html权重要高于pjblog-z-blog.html。这点和WP还真有的一拼。当然日志的目录深度可以自定义。赞一个吧。其它的小东西嘛,PJ带的比较全面一些。

纵观全局来看,我个人认为PJBLOG更适合对可视化编辑要求高、对插件功能要求不高的用户;Z-BLOG则适合有一定基础、注重功能、喜欢DIY的用户。

避免浏览器差异和BUG消除技巧

  • CSS的优先权:style优先级大于id,id的优先级大于class。
  • FF下水平居中:margin-left:auto;margin-right:auto。
  • 网页编码为UTF-8,页面注释最好用英文。
  • 一个容器内有两个以上浮动元素注释时,容易引起IE BUG(莫名出现结尾字符)。解决方法:删除注释。
  • 浮动+margin在IE6下出现双倍边距,display:inline消除。
  • IE6不支持除A标签以外的伪类。
  • IE下容器边框有断裂的地方,容器加上宽度或者zoom:1即可。
  • IE6捉迷藏bug:预览页面的内容不会出现。全选后出现。给藏起来的容器使用宽度和高度,或者设置line-height即可。
  • line-height和height的高度相同时,不同的字体显示是居中效果也不同。
  • list-style-image无法准确定位,建议使用li的背景来实现。
  • 用vertical-align:middle来对齐文本与文本输入框。
  • 禁用文本框中文输入法的通用方法:ime-mode:disabled。

标签:

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