Archive for the ‘Web设计’ Category

最近手头的项目就是WAP的改版,之前的版本也对UCWEB进行过专门的适配,为了适应UCWEB,有些效果进行了调整。最新UCWEB的版本更新到V7.1.0.42,所以有些样式又不支持了。但是用andriod平台下的ucweb,这个解析就相当好,大家有条件的话可以作自行测试。下面例举一些日常工作中碰到的问题,希望对大家有用:
1、传统的TAB做法会换行,如像koubei网的。

代码如下:
<div id=”nav”>
<p>
<a href=”/store.do?m=index&amp;sid=9b4a753e-90ab-49fb-9418-3ebe990913d7″>美食娱乐</a>
<a href=”/bar.do?m=index&amp;sid=9b4a753e-90ab-49fb-9418-3ebe990913d7″>点评吧</a>
<a href=”/info.do?m=index&amp;sid=9b4a753e-90ab-49fb-9418-3ebe990913d7″>生活资讯</a>
</p>
</div>
解决方法:用table td将每个A定位<td><a>美食</a></td>要解决换行,虽然效果不是很好,但是只能这样,效果可以参考图2,至少不会换行,又解决了当然选项卡的定位。
2、网上有文章说UCWEB不支持粗体font-weight:bold;的样式,在此版本中是支持的,大家可以看上图中的首页两字就是粗体的。
3、图片左右排会比较麻烦,有时候正常,有时候却不正常,好像无法解析width,见下面图文左右排的样式,右边的文字明显向右靠了。大家请参考淘宝的列表页面,好像是解析错误,不知是不是淘宝进行了特殊处理,我曾经把淘宝的源码复制传到我空间里去,但解析出来的就是显示不正常,苦恼。

4、UCWEB支持text-align:center的CSS样式,但是不支持text-align:right;因些想把更多放在标题的右侧就要换个办法了,还是只能用TABLE。
5、UCWEB对于padding,margin都不支持,如果想弄个间距什么的,就要另想办法好了。
6、关于INPUT强制一行的解析,这个是相当痛苦的事情,大家可以参考淘宝的WAP站的做法,在UC下的解析还是比较满意的,至少我做的时候,都是如网上文章所述都是强制占一行的,因此还特意更改了了分页的形式,把输入页码跳转的功能去掉了。

7、UCWEB支付border的样式,特别是对.cate td{border:1px solid #ddd}这样的样式定义也支持不错。
8、对普通按钮的处理:UC中对<a href=”#” style=”color:#fff; background:#FF0000″>这是测试效果</a>这样的解析也是默认一行的,解决的方案:
第一种方法:用form,把按钮作成submit,把链接放在action里,但是UCWEB不支持自定义button,系统会调用UCWEB自带的button样式。此方法不是很好。
第二种方法就是用图片。但是一图片尺寸大,二是不利于后期维护,修改文字、样式的时候需要修改图片。
以上只是工作上遇到的一些问题,我会不断完善,上面的问题仅限S60 V3 V7.1.0.42,我们希望UCWEB对CSS的支持越来越好,以减少我们的痛苦。也希望大家共同探讨更好的解决方案。

在网络发展领域,由于 jQuery 简单易学,易于使用和易于扩展的特点,因此正慢慢变得无处不在。以下是从一些 jQuery 相关文章中整理出来的 30+ 新鲜与惊奇的 jQuery 插件与教程。如果你正在寻找最新的 jQuery 信息,这些内容值得一读。

jQuery是使用最多的JS库之一,它有很多优点,比如轻量、易用、完善的Ajax、良好的浏览器兼容,以及它有健壮的选择器等。这些优点使得jQuery成为帮助前端开发人员的有力工具。越来越多的大型网站开始使用jQuery及其插件实现其前端交互。
这里,前端观察收集了20多个使用jquery交互的漂亮网站设计,它们不仅交互效果比较酷,界面设计的也很棒,希望能够给你的设计提供某些参考。当然,使用jQuery的优秀的网站并不只这些,如果你知道有很不错的基于jQuery的网站设计,欢迎与我们共享,多谢。
翻页、滑动、lightbox – serialcut.com

滑动、导航 – tearoundapp.com

滑动、导航 – mtvsticky.com

滑动、动画 – worldofmerix.com

滑动、拖拽 – icondock.com

滑动、导航 – directdesign.it

翻页、弹出 – jumpstartforbusiness.co.uk

滑动, Lightbox – 10bestthings.com

滑动 – paramoreredd.com

滑动 – bulletpr.co.uk

滑动、淡出、Ajax、导航 – bestbefore.ro

lightbox、Ajax – www.geochirp.com

滑动、导航 – eyedraw.eu

LightBox、Ajax、拖拽 – rachelbloch.ch

滑动、动画 – marfil.me

动画、提示 – jquerystyle.com

弹出、Ajax、提示 – virtuousquare.fr

滑动、动画 – bonadiesarchitect.com

滑动、热键 – pauljnoble.com

翻页、滑动、lightbox – ormanclark.com

提示、lightbox – tedxbucharest.com

jQuery JavaScript Library simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. On this collection we roundups 10 really cool, usable and accessible jQuery JavaScript and Ajax plugins that you can implement easily to your design or websites. You can also go to the official jQuery Plugin page for more [...]

jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件(完整图文版)。
拉洋片
在一个固定区域,循环显示几段内容,这种方式很像旧时的拉洋片,2009年,这种 Web 效果大行其道,jQuery 有大量与此有关的插件,以下插件无疑是最佳的。
AnythingSlider: 由 CSS-Tricks 的 Chris Coyier 设计,功能齐全,应用十分广泛。
Easy Slider: 这个 Content Slider 插件既包含传统“前后”导航模式,又包含页码式导航。
Coda-Slider 2.0: Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。
图片库
那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过,借助 jQuery,这种效果已经可以在本地实现,以下是本年度备受欢迎的几个 jQuery 图片库插件。
Galleria: 这是一个基于 jQuery 的图片库,可以逐个加载图片并显示缩略图。
jQuery Panel Gallery: 一个可以高度定义的图片库插件,无需对单个图片进行任何处理,这个插件会帮你完成一切。
slideViewer: slideViewer 会检查你的图片列表中的编号,动态创建各个图片的页码浏览导航。
Supersized: 一个令人惊讶的图片循环展示插件,包含各种变换效果和预加载选项,会对图片自动改变尺寸以适应浏览器窗口。
导航
我们相信,作为网站的导航系统,应该越简单,越易用越好,然而,假如你确实希望实现一些更炫的效果,jQuery 就是最好的选项,以下插件是09年最好的 jQuery 导航插件。
jquery mb.menu
Horizontal Scroll Menu with [...]

在国内,“前端开发”这个名词逐步被熟知,“前端开发”这个职位越来越被企业重视,表明国内的Web前端开发正在慢慢走向成熟,更好地学习提高自身的前端开发技术能力是必须的,整理8个国内优秀的前端开发设计网站给大家,也希望能看到你推荐的中文前端开发网站和社区。

关于模型盒子类的脚本(Modal Box Script),帕兰之前就为你介绍过一些,比如 Modalbox:增强Web应用交互的模块化风格脚本和Multibox:支持格式丰富的Flash Gallery。现在,将为你介绍两个Facebook风格的Modal box特效脚本,它们最大的特点就是拥有透明圆角的特效,看上去非常漂亮和华贵。

CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器,以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。

在工作当中,我们经常会碰到下面这种情况,把一个背景透明png图片插入网页中时,浏览的时候会发生如下这种情况,明明是透明的底,就是在一层灰灰的背景色。但是IE7和FF下却没有这种情况。是不是觉得很郁闷。网上也有很多类似的文章,但是操作性很不强,特别是用那个什么CSS滤错的,还有用JS实现的,但是我试了几次,都很不爽。

dotted和dashed有IE下没有什么区别,但是在Firefox下就区别明显了,dotted的属于就变成了solid,直线的一条,并不是点线。


  • 91526: 哥回的不是贴,回的是寂寞 [...]
  • 顶: 恩,不错,这些方面我的意见在我博客里也写过,可以交流一下。希望看到 [...]
  • 47tz: 第一条 不用加多余的标签,你只需要格式化 代码就可以了 如 [...]
  • 青菜: 应该是被墙了!所以国内打不开! [...]
  • nono: 新开Spreadsheets表单 连接打不开 怎么回事? [...]

最新评论

文章索引模板