WAP2.0门户专题_minmin.pptVIP

WAP2.0门户网站专题 minmin 2009.11 * WAP2.0门户网站专题 概括 声明 页面宽度与边距 Logo 与 导航 标题 字号、行距 链接 底部导航、版权 关于一些标签表现、浏览器的总结 * 概括 新浪：表现技术较离领先，大胆运用了float、背景图片等高级的css样式表现导航、标题和项目符号。 空中：自动浏览器的适配，无版本选择链接；页面整体绚丽，使用图片较多。 淘宝：样式保守，注重实用操作。 网易、QQ：导航有细节上问题；QQ小图标处理不错，字体较大更易阅读。 * 不同版本比较(一)--新浪 3:3G版、彩版、简版 版本导航改版 WM自带 S60自带 * 不同版本比较--网易 3/：高档、普通、电脑版 图片较少，背景色、线条实现样式 版本有点乱 * 不同版本比较--空中 ：WAP版、3G版 版本的机型自适应，无导航 图片多，风格绚丽 * 声明 新浪:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN DTD/xhtml1-strict.dtd 空中、淘宝、网易、QQ：!DOCTYPE html PUBLIC -//WAPFORUM//DTD XHTML Mobile 1.0//EN /DTD/xhtml-mobile10.dtd * 页面宽度、边距 内页实例 * 页面宽度、边距--首页 12px左边距，空白较大 0px左边距，较拥挤 4px左边距 * Logo与导航 float:left; float:left; 图片 空格 * Logo与导航——空格 新浪:a href=http://3/新闻/a a href=http://3/体育/aCSS：a{padding:0 1px;} 空中:a href=/cp/小说/anbsp;a href=/cp/体育/a 淘宝：a href=/我的淘宝/a | a href=/帮助/a 网易:a href=/邮箱/a a href=http://3/博客/aCSS:a{padding:0 8px 0 3px;} QQ：a href=/g/s?新闻/aa href=/g/s?股票/aCSS:a{margin:0 7px;} 空格加微量css padding nbsp; 空格加 | 空格 加css padding css margin * Logo与导航——新浪的实现 使用float样式的版本导航效果较差 使用空格加微量css padding实现分隔，能在各浏览器下呈现较好的空格 * Logo与导航——空中的实现 无法选择版本 两个图片并列的导航，表现较好 使用nbsp;做分隔，能在各浏览器下呈现分隔 因为不能选择版本，无法在UC中对比效果 * Logo与导航——淘宝的实现 最简单的样式 * Logo与导航——网易和QQ的实现 网易使用float样式的版本导航效果较差 两个网站的栏目分隔在UCWEV下都表现不好 * 标题 不同浏览器下的表现差异主要在于粗体、下划线、padding、height的支持 ucweb@WM不支持strong定义的粗体，其他浏览器对css定义的中文粗体支持不好，so：css/html双重定义--font-weight、strong 下划线----UCWEB完全不支持下划线 * 标题---代码实现 空中：上padding、背景色、行距 新浪：上、左padding、背景色/图、线框 书城：左右padding、背景色/图、高度、行距、线框 淘宝：上margin、左padding、背景色/图、高度、行距 网易：下左右margin、背景色/图、行距、线框 QQ：左padding、上margin、背景图、高度、行距 背景、线框 * 字号、行距 各大浏览器对字号、行距的支持 各大门户的字号、行距设置 * 字号、行距 ie@WM font-size:12px line-height:18px font-size:12px line-height:1.5em font-size:12px line-height:1.3em font-size:无 line-height:无 font-size:14px line-height:20px 当字号一致时，行距是一样的。 * 字号、行距 S60自带 font-size:12px line-height:18px font-size:12px line-height:1.5em font-size:12px line-height:1.3em font-size:无 line-height:无 font-size:14px line-height:20px ① ② ② ④ ③ * 字号、行距 推荐：13px字号 * 字号、行距 S60自