如图,"发布摄影作品"为连接,图片为背景图,需要鼠标再图上的时候也能激活链接.这需要设置链接的display:block

HTML

<div class="upload"><a href="#">发布摄影作品</a></div>

CSS

.upload {width:150px; padding:0; font-size:14px; line-height:20px; background:url(bg.gif) no-repeat;}
.upload  a {display:block; padding:105px 0 0; text-align:center;}

这样再IE7和Firefox下是没有问题的,但在IE6下仅鼠标停留文字上时才能激活链接,要解决这个问题,只需为块状链接设置个高度或者宽度值,

.upload  a {display:block; padding:105px 0 0; text-align:center; width:100%;}

IE6的毛病真多,做购车中心时候弹出的层被下拉框遮挡,郁闷死,搞了半天终于找到了解决方案.

不管z-index的数值是多少,在IE6中select总可以挡住div.而z-index值较大的iframe可以挡住select;z-index值较大的div可以挡住iframe(真不知道IE6为什么要搞这样一物降一物的设计...),于是解决这个方法的思路就是用z-index值高于select的iframe挡住select,再用z-index值高于iframe的div挡住iframe.设置iframe的尺寸足够盖住select就可以了.

<iframe style="width:300px; height:300px; background:#c00; color:#FFFFFF; border:none; position:absolute; z-index:2;" ></iframe>
<div style="width:300px; height:300px; background:#000; color:#FFFFFF; position:absolute; z-index:3;" >haha,成功!</div>

<select name="select" id="select">
  <option>测试测试</option>
</select>

不知不觉间,07年就要过去了,或许是广州太暖和的原因,都不敢相信到了元旦.下班前换上了08年的台历和记事本,也开始在回想这一年到底做了些什么.

07年经历了太多事:从投简历,面试,实习,毕业设计,毕业,入职上班,从北方到南方来往了好几回.投简历时寄托希望;面时非常紧张;实习时候面对陌生的一切;毕业设计做得一塌糊涂的担心;毕业时有天天大吃大喝的痛快,拿到学位的喜悦,也有和同学分别时的伤心;入职时的兴奋和彷徨这些都历历在目.

现在觉得一切都挺顺利,工作还算得心应手,跟同事也混得蛮熟的,也交到了一些好朋友.周围的人都很有趣,工作内容我也很喜欢,除了偶尔觉得累,大多数时候还是觉得开心和幸福的.

最后,感谢这一年来所有帮助过我的人,祝你们新的一年里天天开心,嗯,我自己也是!HAPPY NEW YEAR!

今天公司洋溢着一片节日的喜庆,为了避免节日交通堵塞,提前到四点下班,公司实在太贴心了.现都已经回到家了,买了好多零食,准备自己在家好好放松一下.

在这里祝各位兄弟姐妹节日快乐哦,Merry Xmas!

为了配合有道正式版上线和网站的一些合作项目,新改动网易首页今天上线,个人认为不是非常成功.

首先是可读性问题.

这是页面在1024*768分辨率下的截图.页面的改动主要是导航部分加高变成了3行,另外有道搜索也凸显出来占据单独的一个区块.这两个改动导致页面头部较以前拉长了许多,新闻区域被挤出了第一屏.要阅读新闻必须向下拉滚动条.

第二个问题是导航设计不合理

看这个设计的意思应该会理解成蓝色的粗体是大类,黑色的是小类,但事实上并不是完全这样安排的,科技后面是数码,相机和游戏,汽车后面是车库和招聘.导航的逻辑结构和表现相差甚远导致这个导航相当混乱,不利于网友寻找自己想去的频道.

BTW,有道正式版速度和性能都提升了不少,大家可以去试试看哦.

为多个媒介做设计

在大屏幕上外观表现出色的页面不见得在小屏幕上也出色,但是让页面在质量上不做妥协又在小屏幕上表现出色也不会很困难.从一个普通的文档开始.按照合理的顺序编写了文档,编写时注意到了一些设备设计中特殊要点,再做一些额外的测试就OK了.

最好的工具是CSS的media属性,你可以为让指定的CSS只应用PC屏幕,打印输出,幻灯片演示或者手持设备.让你为其中某个媒介写好了代码,为下一个媒介做优化只是附加少少额外代码而已.

手持设备的样式
使用CSS,可以讲相同的HTML在不同的媒介中产生不同的呈现方式.最有效的方式是讲CSS表拆分为一个样式表与一个媒介相对应的形式.这样设备只下载符合自己的样式而不能加载到幻灯片演示的样式或者桌面PC的样式了.

<!-- 该样式将在所有媒介显示 -->
<link rel="stylesheet" href="all.css">

<!-- 该样式仅会在PC屏幕中显示 -->
<link rel="stylesheet" href="desktop.css" media="screen">

<!-- 该样式只会在打印时使用 -->
<link rel="stylesheet" href="printout.css" media="print">

<!-- 该样式是为幻灯片编写的 -->
<link rel="stylesheet" href="presentation.css" media="projection">

<!-- 该样式会被设备采用-->
<link rel="stylesheet" href="phone.css" media="handheld">

有很多其他不同的方式可以使用,这是一个针对设备的简单实例:

<!-- 该样式使用在所有媒介上 -->
<link rel="stylesheet" href="all.css">

<!-- 但是对于设备有一些特别的规则  -->
<link rel="stylesheet" href="small.css" media="handheld">

有可能样式表需要列出需要应用的媒介,这是一个样式表针对所有可交互媒介,一个样式表针对打印输出.

<!-- 针对有屏幕的媒介 -->
<link rel="stylesheet" href="screen.css" media="screen, projection, handheld, tv">

<!-- 一些针对打印的特殊规则  -->
<link rel="stylesheet" href="printout.css" media="print">

文档顺序
当你使用了一个好的文档顺序时,为多种媒介设计页面变得简单了许多.文档顺序就是HTML代码编写的顺序.大多数情况下页面是按照这个顺序显示的.文档前面的内容显示在上面,后面的内容显示在下面.相邻的元素也显示为相邻的元素.

有一个例外就是表格,表格是以从左到右的顺序显示单元格,再从上到下显示每一行.要是单元格尺寸比较大,那么两个元素可能就会离得很远,即便是他们在代码里看来是挨在一起的.比如下图中的单元格3和4,他们在代码里面相邻,却在页面内隔得很远,而1和4虽然在代码里面隔得远但在页面中看来却很近.

PC屏幕常常能同时显示数列表格的内容,而设备就不同了,因此表格通常需要重新定义一下以便能按照正常顺序阅读.

还有一个例外就是CSS中的float和position,float可以随意把区块浮动到左边活右边,position则可以把元素显示到任意位置包括盖在被的元素上面或者隐藏到别的元素下面.float和position很少用在设备中,另外如果你以不当心,元素可以就被显示到屏幕外面,用户不得不通过滚动条来操作了.

比较好的编写顺序是把重要内容写在HTML的前面,还要附加一些必要的代码,方便用户跳转.

-END-

让页面在手持设备中有良好表现(1):为移动设备书写文档

让页面在手持设备中有良好表现(2):为移动设备书写文档

真是千呼万唤使出来啊,今天终于拿到了由网易科技频道和美术中心联合倾力打造的

,扑克牌人物是从众多中国互联网界的风云人物,经历了漫长的海选,最终根据票数排名得出,限量发行,极具有收藏价值.

在刚刚结束的

上首次向到场嘉宾派发了扑克牌,收到强烈反响,很多到会嘉宾拿到牌后爱不释手,想要多几副回去馈赠亲朋好友,无奈数量有限,我们都不能成人之美,真是对不住大家啊.

来之前已经有超过5位的同事叮嘱,一定要拿到网易的互联网扑克牌.不过24日早消息,扑克牌要凭名片来换,每次只发放500副,每人只能换取一到两副.网易的朋友说,没办法,单位要求的很死,我们也不太好搞,这个太热门了.

哈哈,看看扑克的真面目吧

1. 创建一个页面
2. 用Opera打开这个页面
3. 在菜单中选中工具>首选项>浏览,勾选在"标题显示网页大小"
4. 调整窗口为设备大小

1. 创建一个页面
2. 在Opera中打开这个页面
3. 在菜单中选择查看>小屏幕 (Shift+F11,在Mac中是Shift+Alt+F11)

1. 创建一个页面,至少包含一张midea="handheld"的表
2. 用Opera打开这个页面
3. 在菜单中选择查看>小屏幕

让页面在手持设备中有良好表现(3):为移动设备书写文档

1. 使用简单有效的标记
2. 避免使用框架
3. 避免使用弹出窗口
4. 避免自身属性
5. 为图片指定高度和宽度值
6. 为图片指定alt
7. 为JavaScript及动态效果预留退路

1. 用桌面版的Opera在小屏视图下进行测试
2. 在关闭图片显示下进行测试
3. 在关闭JavaScript下进行测试
4. 在无鼠标状态下进行测试

1. 根据构思中的文档顺序进行设计
2. 依据"小屏幕,大内容"原则,最大化页面的可读性
3. 为小屏幕网页配置专门的图片
4. 特别要注意颜色,字体以及对齐方式的使用

• No frames
• As a list
• All frames

No frames意思是Opera使用<noframes>里面的内容代替框架.要在这种情况下使用正常,必须是<noframe>里面的内容是有用的,而不单单是提示用户必须打开框架以显示页面内容.

As a list意思是每个框架是个单独的窗口,顺着浏览器像列表一样排列下去.为了让它更好的被使用,需要为每个框架添加一个不同的而且有意义的名称.比如logo,navigation,content而不是未命名1,未命名2,未命名3.

All frames就是保持桌面电脑上显示的样子.

窗口管理,弹出窗口
特别要避免弹出窗口.弹出窗口指使用JavaScript打开新窗口.弹出窗口会非常麻烦,因为设备只有一个单独的窗口可以被显示(译注:而不能像Windows下一样非常方便切换).

右键菜单
很少有设备使用右键菜单,在很多情况下Opera根本不支持,不要依赖于右键菜单.


输入不便
移动设备通常只配备很小的键盘或者没有键盘.输入数据会非常缓慢.谨慎设置输入数据的时间限制,并且不要让用户输入过多的数据

没有鼠标
设备也没有鼠标,所以不要期待用户在设备上做出跟PC一样精确的交互.

事件管理
指点笔和触摸屏只能触碰,它没有具体的鼠标,所以mouseover和mouseout事件不能应用.有触摸屏的设备可以接触产生的是click事件,而别的设备只能通过按键触发click事件.mouseup和mousedown事件也是不易触发的,也不要依赖双击和单击右键来触发事件.有的设备是有虚拟键盘的,但是你也不要通过指定按键来触发事件.可用的UI事件是:获取焦点,失去焦点和应用(译者注:即确定,相当于PC上按下ENTER键).

传统的UI事件可以用在设备上,但是不要太理想化了,"按下Y键继续"在没有Y键的设备上是没有用的.


处理器,内存和存储器
快速的处理器更耗电,为了省电,设备的处理器相对比较慢.意味着一些在PC上方便实现的效果在设备上会难以实现.用户必须花费很多事件等待浏览器解析这些复杂的脚本和多层嵌套的表格.未经专门设计的页面可能会导致问题.

内存是个很大的制约.设备通常没有硬盘,内存和存储器是共用的,这显得太少了.大的复杂的页面耗费很多的内存,图片的页面同样如此.大体积页面会占用更多的存储空间.

Java和插件
设备可以支持Java和一些常用插件比如Flash或者PDF,但是很少可以同时显示页面和Java或者Flash.因此设备上要避免完全建立在插件上的页面.

可移动性
当所有页面在设备上都可用了,并且有的页面看上去似乎比在电脑上更好用了,使用设备可以在你需要的时候得到准确的信息了.

交流导向信息,比如含有电话号码,email和地址的联络方式页面,短信联系方式可能对于设备来说更有用.
有一些功能只能用在设备上,比如HTML代码<a href="sms:12345678">给我发短信</a>启动设备的短信编辑器,向号码12345678发短信.这个在PC上很罕见,在没有短信功能的设备上你可以设置这个链接只能在手持媒体上看到.


让页面在手持设备中有良好表现(2):为移动设备进行测试

让页面在手持设备中有良好表现(3):为移动设备书写文档

1. 卓越的性能
2. 典雅的用户界面
3. 易用的书签
4. 弹出窗口拦截
5. 内嵌查找
6. 标签浏览
7. SnapBack
8. 自动填表
9. 内置 RSS
10. 可调整的文本框
11. 私人浏览
12.  安全性