分类目录归档:web标准

DTD文档类型的声明对CSS样式的影响

前几天在改版一个站点时,发现里面的CSS样式表(部分原始的样式都是大写的)不生效,折腾了很久都没明白为什么?

后来还是fisher发现,它原始的页面是没有DTD文档类型的声明的,所以对于大写的样式,它是生效的;在我修改后加了DTD的文档声明,对大写的CSS就不认可了。

奇怪的是刚刚我单独的做了两个页面试了下,一个是有DTD声明的,一个是没有的,调用同一个CSS(用大写),结果在Firefoxt和IE下又都是生效的,这到底是怎么回事?有待进一步测试……

在搜索与上面相关的问题时,无意中看到下面这个问题,DTD文档类型(Document Type Definition)影响margin实现居中的分析,也是同一个话题,就贴出来分享下吧……详见(http://www.52css.com/article.asp?id=723

XHTML 1.0 Transitional示例的代码如下:

如果我们去掉DTD声明,发现页面就出问题了。看下面的运行效果:

如何才能让页面居中呢,同样的代码,同样的margin:0 auto;页面容器居左了,解决办法如下:

主要的定义样式:
body {text-align:center; }
#container {margin:0 auto; width:500px; background:#ccc;}
当您定义text-align:center;以后,会发现在IE下页面已经居中了,但是您会发现在mozilla下页面仍然是居左的,解决办法就是在子元素定义时候设定时再加上“margin:0 auto;”这样就可以完成页面容器居中的效果。

CSS兼容要点


IE vs FF

CSS 兼容要点:

DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集

使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

,关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}

就能解决大部分问题

4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为

type=”text/javascript

就可以了

更好的命名CSS样式

现总结命名规则如下,毕竟是外国人发明的啊 希望能大家有帮助!
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:register
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendLink
页脚:footer
版权:copyRight

1.css ID 的命名外 套:  wrap
主导航:  mainNav
子导航:  subnav
页 脚:  footer
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainNav(globalNav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsideBar
右导航:  rightsideBar
旗 志:  logo
标 语:  banner
菜单内容1: menu1Content
菜单容量: menuContainer
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadCrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   login
功能区:  shop(如购物车,收银台)
当前的   current

2.另外在编辑样式表时可用的注释可这样写:
/* Footer */
内容区
/* End Footer */

3.样式文件命名主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

Web前端工程师技能列表

[转自] awflasher

要打造一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的”网页套接”是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:

通过许多实际项目,个人认为一个完备的前端产品开发团队,必须拥有如下的人才配备,也希望大家补充:

  • 团队全体成员达到所有技能中的a级标准
  • 团队全体成员必须掌握两项技能中的b级标准,并保证所有的b级标准在该团队中有50%以上成员能达到
  • 团队全体成员必须掌握一项技能中的c级标准,并保证所有的c级标准在该团队中有25%以上成员能达到

具体技能描述:

  • 【必备】UserInterface
    1. PhotoShop/Fireworks Design
      a – 配合美工将草图形成具体的符合WebPage的设计
      b – 有快速制作分层高品质PSD、PNG的能力
      c – 能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码
    2. Flash Design
      a – 基本动画效果
      b – 复杂的交互体系设计,了解第三方swf辅助设计软件
      c – 复杂的交互体系设计以及较强的对各类外埠资源(PNG、JPG、MP3、WAV等)的整合能力。精通部分第三方辅助设计软件(AE、SwishMax、Swift3D等)
  • 【必备】Browser-side (Web Application)
    1. XHTML/CSS
      a – 基本的layout实现
      b – 严格跨平台的layout实现以
      c – 优雅的HTML code,尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本保持一致。不要求了解各种CSS的hacks,但要求知道遇到问题应该如何查阅 资料以在第一时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构,让JS开发人员在开发的时候认为”一切都已经准备就绪了”,而不 是”捉襟见肘”。
    2. JavaScript/Ajax/DOM
      a – 基本的DOM操作,了解AJAX,可以实现数据通信
      b – 基本的DOM操作,能写高效率的OOP代码,以降低维护成本
      c – 基于需求,进行不同的开发,选择合适的框架,做到代码效率最高,用户体验最好,代码下载量最小,并且可以在单独甚至更多产品线中最大限度重用代码
    3. Flash Developement
      a – 基于Timeline的ActionScript操作,能实现简单交互
      b – 掌握a外,能实现数据层通信(与服务器以及本地SharedObject)
      c – 精通AS1-3,能根据需求进行各类RIA开发。无论是要求支持FlashPlayer8的,还是FlashPlayer9的,都能做到开发效率最高、灵活性最大(比如对HTML层的接口设计,等等)。
  • 【必备】Client-side (Desktop Application)
    1. Apollo
      a – 产品级的封装,基本技术了解(如何打包、如何加入HTML和JavaScript等)
      b – 掌握a的同时,能利用Apollo的API独立设计、开发OS的文件I/O功能。
      c – 掌握基本技能的同时,对”3D概念体系”有所认知。这里”3D”即:Design(设计)、Development(开发)、Deploy(产品部署)。能用Apollo
    2. Windows Presentation Foundation、WPF/E(Silverlight)
      (待定,欢迎补充)
  • 【增补】Server-side (修改:经考虑,这个技能不参与评级)
    本来列举了”1、Server端简单的技术、脚本”和”2、MediaServer(Red5)接口”作为”Web前端工程师技能列表” 的一种(服务器、数据逻辑层技能的)评判标准。但似乎很多朋友对于前端工程师是否应该掌握Server端技能的必要性表示怀疑。确实,要掌握好上述的展现 层技能不是意见容易的事情,而且前端工程师的确非常辛苦。但是,站在另一方面来说,辛苦的原因是什么,我不知道在你日夜奋战div+CSS的时候思考过没 有。就我的经验,前端的辛苦在于以下几个方面:
    1. 重复劳动多,大量的div+css都是重复的,即便可以复制粘贴,但几千行的div海洋中去寻找一个入口恐怕都非常痛苦
    2. 需求变更多,往往你折腾几个小时终于把跨平台问题解决好了,而且在IE6、7和Firefox下面都能显示同样的效果了,甚至连JavaScript交互都已经快搞定了。突然上面说需求要变。这无疑是莫大的痛苦。

    也许表面上看,这跟Server端技能无关,但我觉得有好的Server端的意识,一定会有所帮助(当然不可能解决所有的问题)。毕竟信息结构和数 据库是密切相关的,而Server是连接数据库的唯一渠道(至少大多数B/S应用是如此)。掌握Server端的基本技能,对于同逻辑层开发人员设计接口 是非常重要的。而且HTML表现层在开发时与数据的分离,也与Server端的各种模板技术有关。例如PHP中的Smarty模板(我曾经用的)、jsp 的model2概念等等。HTML结构如何设计,如何让HTML重用,甚至在HTML层进行OOP的开发(我现在在新产品线中设计的前端开发流程),都需 要Server端的支持。最起码,你要告诉php程序员你需要什么。如果你完全对PHP一无所知的话,那也无从谈起了。
    此外,对于创业团队,往往人手非常有限。为了让运营成本降到最低,所有的技术人员都有义务对Server端技术有所了解。如果为了修改一个网页的标题还要跑去喊PHP程序员连接Remote Server的话,那实在是增加了整个公司的运营成本。
    总结:我认为,可以不了解技术细节,但应该知道原理,最好能掌握一两套设计思想(毕竟数据逻辑都在这里走,光看HTML和JavaScript,对人的见识还是有局限的,这种局限限制了我自己很久的时间),那将是一比宝贵的财富。

  • 【增补】Mobile-side(不参与评级)
    1. Flashlite
      (待定,欢迎补充)
    2. Java?
      (待定,欢迎补充)