过期主题 该主题因在两个月内没有任何回复而自动关闭。
如果您还对该主题感兴趣或者想参与对此主题的讨论,请您重新发表一篇相关的新主题。
主题工具  
LoeiFy
LoeiFy 的头像
Lorem ipsum
级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时
注册日期: 2010-04
来自: n/a
帖子: 214
致谢: 405
我更新了我的个人网站(多图), 2012-05-28, 00:36:07 #1 | TOP
博客地址:

这次更新花了不少时间,psd制作,还有考虑分辨率问题也让我头疼好久.

主要有3个页面,home,portfolio还有blog,最大更新是Responsive--自适应浏览器窗口大小,附件里是各个页面在不同分辨率下的浏览效果

页面最大为1200px,大屏幕浏览起来舒服很多,也照顾到手机的浏览,最小测试到320x480.

浏览器兼容到e7,其他现代浏览器应该没问题,测试环境: ie9(7.8),firefox 13, chrome 19

这里说下,WordPress会对上传图片加width,height属性,这个对Responsive很不利,要在function.php加上

psd设计稿提供下载参考,有兴趣的到我博客上下载

还有有些地方会有bug,大家提醒下了,谢谢了

还有就是想加些友情链接,大家懂的...
上传的图像
文件类型: jpg home1.jpg (177.2 KB, 46 次查看)
文件类型: jpg home2.jpg (145.1 KB, 10 次查看)
文件类型: jpg home3.jpg (97.7 KB, 8 次查看)
文件类型: jpg portfolio1.jpg (315.4 KB, 36 次查看)
文件类型: jpg portfolio2.jpg (419.6 KB, 10 次查看)
文件类型: jpg blog1.jpg (281.7 KB, 47 次查看)
文件类型: jpg blog2.jpg (201.2 KB, 9 次查看)
文件类型: jpg blog3.jpg (126.3 KB, 15 次查看)
回复时引用此帖
以下 9 位极客对 LoeiFy 此帖表示感谢:
ajjfwh (2012-05-29), fyi151 (2012-06-24), kmc (2012-06-24), nick8204 (2012-06-23), ongakuer (2012-05-29), RayFly (2012-07-20), vivianalive (2012-05-28), 小Q (2012-05-29), 西小西 (2012-06-25)
vivianalive 美女
vivianalive 的头像
NEVER EVER
级别:8 | 在线时长:442小时 | 升级还需:8小时级别:8 | 在线时长:442小时 | 升级还需:8小时级别:8 | 在线时长:442小时 | 升级还需:8小时
注册日期: 2010-04
来自: Vancouver
帖子: 167
致谢: 362
2012-05-28, 13:41:33 #2 | TOP
前排占座. ~~~~ Looks pretty cool!
另外,是否要Responsive,这也是个值得探讨的问题.
回复时引用此帖
以下极客对 vivianalive 此帖表示感谢:
LoeiFy (2012-05-29)
fortea
极客II
级别:3 | 在线时长:65小时 | 升级还需:35小时级别:3 | 在线时长:65小时 | 升级还需:35小时级别:3 | 在线时长:65小时 | 升级还需:35小时
注册日期: 2011-08
帖子: 51
2012-05-28, 13:46:10 #3 | TOP
前排支持,看来费了不少心思的。
回复时引用此帖
LoeiFy
LoeiFy 的头像
Lorem ipsum
级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时
注册日期: 2010-04
来自: n/a
帖子: 214
致谢: 405
2012-05-29, 10:24:38 #4 | TOP
关于Responsive,我只是看到最近这个东西比较流行,浏览起来舒服很多,以前总是弄960的.不过Responsive弄起来可比固定的复杂多了.
回复时引用此帖
ajjfwh 帅哥
ajjfwh 的头像
极客III
级别:8 | 在线时长:405小时 | 升级还需:45小时级别:8 | 在线时长:405小时 | 升级还需:45小时级别:8 | 在线时长:405小时 | 升级还需:45小时
注册日期: 2005-10
来自: 武汉-北京
帖子: 397
致谢: 751
2012-05-29, 17:52:38 #5 | TOP
关于Responsive(响应式)设计,有一套UI开发框架,可以参考下:


响应式设计我的理解是一套为了让应用适配大多终端而提供的解决问题思路(比如在手机上访问wordpress,适应各种分辨率,以及各种浏览器{最近在研究不同手机浏览器在各个平台下的兼容性,各种蛋疼,吐槽下})
回复时引用此帖
以下极客对 ajjfwh 此帖表示感谢:
LoeiFy (2012-06-02)
ongakuer
ongakuer 的头像
极客II
级别:7 | 在线时长:287小时 | 升级还需:73小时级别:7 | 在线时长:287小时 | 升级还需:73小时
注册日期: 2010-06
帖子: 94
致谢: 88
2012-05-29, 18:39:58 #6 | TOP
看到 ”WordPress会对上传图片加width,height属性,这个对Responsive很不利“ 觉得奇怪,貌似对响应式没有什么影响吧?给不同分辨率设定不同的 max-width,max-height缩放就好了。

然后进去一看,好吧,原来是图片是100%宽度的设定,流动布局了。

Good Job!
回复时引用此帖
以下极客对 ongakuer 此帖表示感谢:
LoeiFy (2012-06-02)
LoeiFy
LoeiFy 的头像
Lorem ipsum
级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时
注册日期: 2010-04
来自: n/a
帖子: 214
致谢: 405
2012-06-02, 12:25:41 #7 | TOP
其实刚开始弄的时候,我是没有用那个去掉width,height属性的函数的,我以为css定义width,height属性会覆盖img上的width,height属性,并且在电脑上浏览器测试良好,但是在别人电脑上的双核浏览器却出现问题了,要么图片高度定死,要么拉高很大.所以只能用函数去掉width,height属性,本来还想用JavaScript去掉的,不过发现可以php函数去掉.

还有个问题,那个双核浏览器的默认渲染核心是怎么确定的,有些网站用ie核心,有些用WebKit
回复时引用此帖
ongakuer
ongakuer 的头像
极客II
级别:7 | 在线时长:287小时 | 升级还需:73小时级别:7 | 在线时长:287小时 | 升级还需:73小时
注册日期: 2010-06
帖子: 94
致谢: 88
2012-06-02, 14:37:33 #8 | TOP
css优先级是: 直接写在html里的style > CSS控制的。

但img的height,width属性和style的数值的不是一个概念。


在CSS里给图片加上height,width相当于代码后面的style,只是独立出来写到了css里。你试一下,上面这样写图片会是500px * 600px的大小。

因为图片长宽未知,所以不要在CSS里直接设定img的height,width固定值。可以使用max-width等来控制缩放大小(但不兼容IE6)

你说的拉高很大,如果是使用 max-width的话,是不是忘记设置高度了?比如下面:



双核浏览器应该是厂家设置白名单来选择的,控制不了。
不过一般双核的IE核心,会使用IE兼容模式来渲染,相当于IE7,这个可以倒是可以强制使用最新的IE模式来渲染

此帖于 2012-06-02 15:06:33 被 ongakuer 编辑. 原因: 修正
回复时引用此帖
以下极客对 ongakuer 此帖表示感谢:
LoeiFy (2012-06-02)
LoeiFy
LoeiFy 的头像
Lorem ipsum
级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时
注册日期: 2010-04
来自: n/a
帖子: 214
致谢: 405
2012-06-02, 19:59:41 #9 | TOP


之前确实是忘了加height:auto; 现在看来只要


就可以使到图片随页面大小进行缩放了.并不需要PHP函数去掉图片的width和height属性.并且兼容ie6及以上.唯一不足之处是文章内容里面的图片如果宽太小也会拉伸到100%宽度(我这里是900px).所以要把width:100%换为max-width:100% ,不过这样的话ie6就有问题.ie6不认识max-width.所以最好是

回复时引用此帖
sx200
失踪极客
级别:0 | 在线时长:0小时 | 升级还需:10小时
注册日期: 2012-06
帖子: 8
2012-06-09, 10:39:16 #10 | TOP
楼主,你就是牛呀。我实在是搞不了,在这向你学习了呀
回复时引用此帖
2853206
极客I
级别:3 | 在线时长:64小时 | 升级还需:36小时级别:3 | 在线时长:64小时 | 升级还需:36小时级别:3 | 在线时长:64小时 | 升级还需:36小时
注册日期: 2011-09
帖子: 6
2012-06-21, 08:55:33 #11 | TOP
GOOD ,也想做一个WORDPRESS博客。但自己只简单的了解一点
Drwamweaver, LZ能推荐一些WORDPRESS的教程吗?
回复时引用此帖
nick8204
nick8204 的头像
极限原创团队
级别:12 | 在线时长:859小时 | 升级还需:51小时级别:12 | 在线时长:859小时 | 升级还需:51小时
注册日期: 2005-02
帖子: 601
致谢: 1,509
2012-06-23, 23:38:17 #12 | TOP
非常不错,页面设计的很有感觉!脚本也非常厉害!
回复时引用此帖
以下极客对 nick8204 此帖表示感谢:
LoeiFy (2012-06-25)
oumu 帅哥
oumu 的头像
极客II
级别:4 | 在线时长:103小时 | 升级还需:47小时级别:4 | 在线时长:103小时 | 升级还需:47小时级别:4 | 在线时长:103小时 | 升级还需:47小时级别:4 | 在线时长:103小时 | 升级还需:47小时
注册日期: 2010-12
帖子: 72
致谢: 54
2012-06-24, 07:32:44 #13 | TOP
看不懂代码的撸过……
喜欢呼吸一样的颜色变化和动态效果。
回复时引用此帖
ccinto
极客II
级别:2 | 在线时长:34小时 | 升级还需:26小时级别:2 | 在线时长:34小时 | 升级还需:26小时
注册日期: 2011-03
帖子: 60
致谢: 1
2012-06-25, 10:27:44 #14 | TOP
来学习学习
回复时引用此帖
LoeiFy
LoeiFy 的头像
Lorem ipsum
级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时
注册日期: 2010-04
来自: n/a
帖子: 214
致谢: 405
2012-06-25, 11:27:41 #15 | TOP
没有,建议先看看xhtml&css相关的教程

---------- 帖子于 11:27:41 更新 ---------- 之前内容发布于 11:27:08 ----------

你的几个站也非常不错呀
回复时引用此帖
redandy321
失踪极客
级别:0 | 在线时长:3小时 | 升级还需:7小时
注册日期: 2010-12
帖子: 14
2012-07-11, 14:14:27 #16 | TOP
学习。顶一个。
回复时引用此帖
DennisGuo
失踪极客
级别:0 | 在线时长:8小时 | 升级还需:2小时
注册日期: 2011-04
帖子: 4
2012-08-11, 09:31:04 #17 | TOP
来学习的,~~~,真希望楼主能出个视频教程。
回复时引用此帖
solarcellsky
solarcellsky 的头像
极客III
级别:6 | 在线时长:229小时 | 升级还需:51小时
注册日期: 2005-06
帖子: 395
致谢: 199
2012-08-20, 21:11:21 #18 | TOP
碉堡。。另外 skill 那块是怎么弄的 google chart api 吗?
→ "不良习惯:CTRL+ALT+Z"
春有百花秋有月,夏有凉风冬有雪,若无闲事挂心头,便是人间好时节。PlayHTML.COM
回复时引用此帖
LoeiFy
LoeiFy 的头像
Lorem ipsum
级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时级别:9 | 在线时长:508小时 | 升级还需:42小时
注册日期: 2010-04
来自: n/a
帖子: 214
致谢: 405
2012-08-21, 09:14:12 #19 | TOP
just JavaScript Library—Raphaël ,the link:
回复时引用此帖
过期主题 该主题因在两个月内没有任何回复而自动关闭。
如果您还对该主题感兴趣或者想参与对此主题的讨论,请您重新发表一篇相关的新主题。
主题工具
发帖规则
不可以发表新主题
不可以发表回复
不可以上传附件
不可以编辑自己的帖子

启用 BB 代码
论坛启用 表情符号
论坛启用 [IMG] 代码
论坛禁用 HTML 代码

论坛跳转:
Copyright ©2003-2014, THEMEX.NET [湘ICP备14009485号]
Powered by vBulletin® v3.8.3 ©Jelsoft Enterprises Ltd.
所有时间均为北京时间。现在的时间是 12:31:11