收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 9047|回复: 53

[讨论] 一起来完成“蓝色理想”首页的“标准化”工作

[复制链接]
发表于 2009-6-10 16:54:24 | 显示全部楼层 |阅读模式
本帖请勿灌水


作为业内第一的“蓝色理想”,首页 http://www.blueidea.com 目前仍然没有进行“标准化”方面的改版,

在这里,想汇聚大家的力量,一起来完成这项有意义的工作。完善我们的理想。

如果你愿意参与到这其中,请续写后面的代码:

 提示:您可以先修改部分代码再运行



抛砖引玉。
每人写几行代码,放到一起,看最终能实现什么效果。

[[i] 本帖最后由 cuikai 于 2009-6-10 17:02 编辑 ]
发表于 2009-6-10 17:23:09 | 显示全部楼层

 提示:您可以先修改部分代码再运行



写到这里写不下去了。
location区域两边的白边,我一般用父级元素的PADDING来设定。
如果现在我改WARP的话,HEAD的代码要改。

写代码每个人有每个人的思维方式。
有时改一下代码,还不如自己重新写快呢。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-10 17:34:05 | 显示全部楼层

 提示:您可以先修改部分代码再运行



补充一下:
任何人都可以对前边的代码进行修改,只要更合理即可。

目前已经按照2楼的想法,在wrap元素上给了padding,大家可以根据这个版本续写,或者从任意版本开始编写代码。
回复 支持 反对

使用道具 举报

发表于 2009-6-10 18:05:20 | 显示全部楼层
施主,发表一下老衲的愚见 。

第一 所有内容都写在一个div里面 这样不太合理吧?

第二:为什么没有定义 font-family 呢?
回复 支持 反对

使用道具 举报

发表于 2009-6-10 19:36:41 | 显示全部楼层

 提示:您可以先修改部分代码再运行


icon-signs-dot.jpg

[[i] 本帖最后由 kouyubo 于 2009-6-10 21:47 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-6-10 20:56:03 | 显示全部楼层
个人觉得还是考虑下重构栅格化布局吧
回复 支持 反对

使用道具 举报

发表于 2009-6-10 22:10:48 | 显示全部楼层

 提示:您可以先修改部分代码再运行



加了一小点
回复 支持 反对

使用道具 举报

发表于 2009-6-11 09:28:36 | 显示全部楼层
强悍,本来不想在这么NB的帖子里回复的,可是忍不住想露下脸。
希望到最后蓝色的首页采纳就好了。

假如这会全部标准化完毕,
但是以后每当添加更新新闻的时候,还是会出现些许小小的错误
一直找不到是那些原因。

[[i] 本帖最后由 Supoe 于 2009-6-11 09:36 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-11 10:05:15 | 显示全部楼层

 提示:您可以先修改部分代码再运行




汇集一下截止目前的开发进度,

kouyubo的代码写的很出色,但还是建议大家在同一个模块下进行开发,减少合并时出现的“重名”现象。
另外,团队协作开发时,请尽量避免h2这样公用样式的创建,如果要写的话,尽量写到/* public */行内,这样大家再用这个元素的时候,可以避免出问题。
如果元素没有放在同一div内,结尾时注意清除浮动。

redsky1987,在同一页面中,尽量避免出现两个h1,这样对SEO是不利的。

HeTingYi 的想法很中肯,这点我没有考虑到。如果所有元素都放在同一个DIV层内,确实不利于后期调整。
解决方法是,接下来的代码开发者,可以在每一次的pageSeparator分割线后,创建一个外包框。
或者等所有代码开发完毕后,我来做分割的事情。


如果大家有什么新的想法,请继续补足。
另外,我的能力有限,如果您有什么更好的代码,不妨集成到项目中。
我代表不了谁来感谢您。我代表我自己,为学到更多的东西感谢您。

[[i] 本帖最后由 cuikai 于 2009-6-12 09:50 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-6-11 11:09:06 | 显示全部楼层
很高兴能参加这个很有意义的实践活动中,我有几点小小的补充:
1、css命名的问题,我觉得楼主应该提供出基本框架的命名规范,否则每个人写的都不一样,到时候整合起来也是很乱的;
2、关于主导航的写法,我不知道各位朋友浏览器上显示的是否正确,在我这里,除了FF3显示正常,IE下都各有瑕疵:ie8下“经典论坛”换行跑到了“业界动态”下面;ie6\ie7下未换行,但“经典论坛”中“坛”字换行;且现在都是左对齐,在右边也些许间距。
3、我自己写了导航条的样式,用的是float:right;

 提示:您可以先修改部分代码再运行


显示:FF3和IE8正常,但IE6\IE7似乎有个bug,在ul设置了float:right情况下还是以block形式显示,填满了剩余空间,请楼主和各位高手帮忙看下。。。

[[i] 本帖最后由 hzhjun 于 2009-6-11 11:10 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-6-11 11:15:52 | 显示全部楼层
为什么我记得以前这个区搞过这样一个帖子……
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-11 11:38:23 | 显示全部楼层
原帖由 [i]ariex 于 2009-6-11 11:15 发表
为什么我记得以前这个区搞过这样一个帖子……

之前曾经做过论坛页面,导航条的重构工作
目前进行的是全站首页的重构工作。
如果还有这方面的帖子,请提供链接,合并一下大家的资源,来做成这件事。

原帖由 [i]hzhjun 于 2009-6-11 11:09 发表
很高兴能参加这个很有意义的实践活动中,我有几点小小的补充:
1、css命名的问题,我觉得楼主应该提供出基本框架的命名规范,否则每个人写的都不一样,到时候整合起来也是很乱的;
2、关于主导航的写法,我不知道各 ...


RE hzhjun :
1.CSS命名的问题:这点你的提议很有价值,项目初期确实应该制定规范的开发文档。
2.主导航的问题,请将代码保存到本地,然后再进行观测。在论坛直接“运行”会受到干扰。

也建议大家将代码保存到本地,在软件中进行调试。
这样大家的缩进代码及注释代码,可以看的更清楚一些。

[[i] 本帖最后由 cuikai 于 2009-6-11 11:59 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-6-11 12:43:22 | 显示全部楼层
修正了前面几位的宽度定义不准确的问题 宽度的定义应该为 768+(左右padding)10px=778px

添加了右侧广告位与中部广告位

注:本地运行导航栏没有问题。。请大家复制代码到本地测试

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 vmusicworm 于 2009-6-11 12:49 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-6-11 13:04:01 | 显示全部楼层
字体未指定,各浏览器(在不同设置下)的显示效果是不一样的。
回复 支持 反对

使用道具 举报

发表于 2009-6-11 15:08:42 | 显示全部楼层
其实也是时候重新设计了吧。多久没改变过了。
回复 支持 反对

使用道具 举报

发表于 2009-6-11 15:21:32 | 显示全部楼层
为什么很多人的代码都有这问题呢?
未命名.JPG
IE6 + TT4.5
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-11 15:28:52 | 显示全部楼层
原帖由 [i]kubau0 于 2009-6-11 15:21 发表
为什么很多人的代码都有这问题呢?
120238
IE6 + TT4.5



前边说过了    请将代码保存到本地,然后再进行调试。在论坛直接点“运行”会受到干扰。

blueidea.rar (2.98 KB, 下载次数: 226)
回复 支持 反对

使用道具 举报

发表于 2009-6-11 15:34:34 | 显示全部楼层
我浏览的情况跟kubau0 一样,
保存code到本地还是如此。
ie7
回复 支持 反对

使用道具 举报

发表于 2009-6-11 15:37:36 | 显示全部楼层
1.修正了导航
2. 完善了list-box,更新了BXNA,企业招聘信息两块代码
3.ie6下出现多猪bug,没处理

 提示:您可以先修改部分代码再运行


多猪本想用inline-block代替float解决掉,但这样会使用些hack,还是算了
回复 支持 反对

使用道具 举报

发表于 2009-6-11 16:01:20 | 显示全部楼层

回复 19# kouyubo 的帖子

用这个字体好看,就是怕有的用户没有!
回复 支持 反对

使用道具 举报

发表于 2009-6-11 16:07:18 | 显示全部楼层
我来说几句。

第一,尽量使用class来定义css

第二,设置相对字体,宋体或者Tahoma

如果仅仅设置首页,那么可以使用*{margin:0; padding:0; list-style:none;}
回复 支持 反对

使用道具 举报

发表于 2009-6-11 16:41:53 | 显示全部楼层

回复 20# writeidea 的帖子

没有的话,会引用下一个字体的
我现在网站的默认字体是tahoma,Arial,"宋体",simsun
tahoma为数字和英文准备,Arial是备用字体
"宋体"留给中文,simsun备用

[[i] 本帖最后由 kouyubo 于 2009-6-11 16:46 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-6-11 22:15:54 | 显示全部楼层
追求无hack化。

[[i] 本帖最后由 zidanezhicong 于 2009-6-11 22:25 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-6-12 09:43:01 | 显示全部楼层
换换面貌吧.
回复 支持 反对

使用道具 举报

发表于 2009-6-12 09:43:52 | 显示全部楼层
开发到哪一版本最好说明下.
1.在 kouyubo 的基础上增加了图片列表
2.发现webkit下 margin 折叠问题(未解决)

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-6-12 20:46:52 | 显示全部楼层
呵呵,真不知道什么时候蓝色改版~~~~建议应该改版了~~~~~~
回复 支持 反对

使用道具 举报

发表于 2009-6-12 20:52:15 | 显示全部楼层
不错的主题,可以在各位写法出入中看出优差,对谁都是一次切磋实践的机会,我只提一点小小的要求和期望

能不能在自己写的代码中一些可能有需要的地方写下注释,照顾下我这类的新手,以后也是一个标准教材范本
期望这次代码的总和1+1>2,呵呵
回复 支持 反对

使用道具 举报

发表于 2009-6-13 00:00:27 | 显示全部楼层
最后弄个连接和~footer 就完了~~ ~~
不过还是整理下框架吧 蓝色这个主页 整理个基本框架出来还是比较容易的吧。。。 看着很乱~~
回复 支持 反对

使用道具 举报

发表于 2009-6-13 11:28:32 | 显示全部楼层
恩 是啊 是的重新设计啊 好几年了
回复 支持 反对

使用道具 举报

发表于 2009-6-13 11:51:25 | 显示全部楼层
来个耳目一新的 顺便也看看这里的高手秀
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-19 21:13 , Processed in 0.233787 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表