飞鱼一脸囧样滴说 : 受大猫的影响,辞藻难免淫荡,罪过罪过,此文章是篇技术文,额不对. 我的blog向来都是写技术的=.=
丁大哥的 关于em,strong以及dl,dt,dd的简要分析 突然让我想起一直想写的一篇的这篇文章.
在写过无数(无数~=10000行左右) css 代码后,你有没有尝试过这样:
打开FF(firefox), 在地址栏上敲入 你测试的url , 在菜单栏上 分别选择 查看-页面风格-无风格, 也就是让你可爱的网页 脱去 外套 露出那诱人的桐体 这时候,你的页面到底美不美, 完全暴露在你面前. (见最后附图,或者你可以尝试扒光~~我这可爱的blog页面的衣服看看>.<)
我想说的是,当一个页面没有样式的情况下,它应该也是 有层次的 有线条的 像婀娜多姿的少女…(题外话,私聊). 当你使用移动设备(可以使用手机用ucweb登录我的blog,^_^.www.qilei.org)访问网站时,是只加载部分字体样式的, 布局样式基本没有, 所以裸奔是非常重要的.
如何让 你的 “少女” 婀娜多姿呢?
- 充分利用html 权重性标签, 如 h 标题, p 段落 , ul 列表 等. 我的习惯是 h1当前页面的总概括(这个是看浏览国外网站时总结的). h2 用在组件标题, 类目标题. 以及内容页面标题上. h3 可以用在 组件内的内容标题,如:推荐文章, 还可以用在内容页面的内标题上, p 大多用在 推荐文章的简短描述上, 以及内容页面的段落; ul 相信大家都会用 就是 文章列表, 当然, 内容页面内 也可以用,可以方便提高阅读. 其他如em strong 等强调性的标签,可以根据需要来设置,以上是层次的一种表现方式.这样的话 页面 会被 字体大小等字体样式 区别开来.提高移动设备的用户体验.
- 调整html内容的显示顺序, 这点是比较重要的, 当你试用移动设备 来查看 网站的时候,一大堆垃圾信息让你翻得死去活来,才到主要内容的时候,相信你第二次就不会再回来了. 所以显示html的顺序 是要 做调整的. 就简单的拿blog来说吧: 尽量让文章内容的post显示在前,sidebar显示再后,这样用户就能看到你的最新更新了.
- 优化代码,使页面更加语义化. 就是让你的网页 没穿衣服像穿这衣服一样^_^.如下图,比如最后附图一样. 自己看图去,嘿嘿. 我就不解释了
- 不要太依赖列表标签li,记得刚学css那会儿05年,看大伙都满屏的li来li去.以为li 才是css. 后来慢慢才知道,其实不是一定要用li 有的时候 你用table 会更 清爽, 比如类似于 小型nav(导航) 完全只用文本链接来 实现 反而效果好. 因为li 有的时候挺变态的,让它躺好它偏偏撅起来,囧死.
- 尝试使用语义化的标签,就像h 代表标题一样 p 代表段落 strong代表加粗一样, 未来的即将要出来的html5 将有更多的语义化的标签. 这些标签,能从不同程度上 提高页面的浏览易读性. 并且对SEO. 还有人品值(PR值,PageRank.我喜欢反过来读^_^)有帮助
好了打完收工. 将图贴上
附图1
哟？不错哎 订阅飞鱼的RSS Feeds 回去慢慢看^_^
该文章已经被摸了216次。 共有 10 条评论
- – 你越來越淫蕩了,我得抓緊趕上
回复
飞鱼 Reply:
February 11th, 2009 at 10:44
还是你淫蕩“` 你淫蕩啊 我淫蕩“`
回复
都淫荡！
回复
飞鱼 Reply:
February 15th, 2009 at 9:35
嘎嘎,表这么说 会害羞的`/`
回复
葉子 Reply:
February 18th, 2009 at 20:42
淫贼师父啊，我····哭
回复
飞鱼 Reply:
February 19th, 2009 at 9:36
最近在 扫黄，blog里留言少写 那个yin 字，不然会被和谐滴
回复
一直只知道用web developer toolbar可以脱衣服，原来FF自带了此功能了呀？！
反正我的BLOG脱了很美，只要注重语义就很好搞
回复
飞鱼 Reply:
September 28th, 2009 at 10:34
Service Temporarily Unavailable
不用脱~~~ 你 blog 出错了吧·？
回复
HicroKee Reply:
September 28th, 2009 at 15:02
最近SPAM太厉害，空间的连接数受不了～
回复
飞鱼 Reply:
September 28th, 2009 at 15:31
嗯 还是 WP 好·啊·
回复
发表评论