新写的静页，求喷

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 4630 天前的主题，其中的信息可能已经有所发展或是发生改变。

在初三一大堆作业中争分夺秒，写了个静页，代码托管在github上，第一次发布自己的作品，代码写的有多糟糕、基本没有可读性什么的就别提了....看一下朴素的设计吧，希望能够收获一些中肯的具体的意见，不要简单的说喜欢或不喜欢

http://forrow.info
大图背景载入有点慢--淡淡的疼

第 1 条附言 2013-02-06 21:18:22 +08:00

广泛地采纳意见和建议啦
@whtsky 那部分写进body之后显示不出来==
大图背景载入确实比较慢，但是我找不到办法。。。有没有高人
修改了who likes这个低级错误
@SamZeng 增加了utf-8声明，表示不想做SEO
因为这个我只当成一个静页作品而不是网站，以我现在的水平，我暂时的方向定为静页模板开发，至少我还没有系统的学习动态语言
调整了字体行距，感觉应该在下一个作品中引进比较美观的字体库，默认字体无力啊....
CSS方面在研究LESS框架
距离开学还有十余天，争取看能不能再做一个

最后：
求配色方面的技巧和相关资源，感觉自己在这方面耗费了太多的时间
求更多的建议和意见

万谢

第 2 条附言 2013-02-15 22:21:40 +08:00

经过几天的修改，改成了完全不同的一种风格...
再次求喷

静页

代码

新写

87 条回复 1970-01-01 08:00:00 +08:00

saharabear

2013-02-05 16:13:34 +08:00

年轻人越来越了不起了.

heidour

2013-02-05 16:16:53 +08:00

排版还值得推敲。比如头像旁边的英文，关于页面的行距。

muxi

2013-02-05 16:20:08 +08:00

文字排版混乱，看起来非常不舒服，背景图片过大，加载过慢

zythum

2013-02-05 16:31:04 +08:00

这个字距啊... 容易眼镜花啊...

jingwentian

2013-02-05 16:43:25 +08:00

现在的小青年真有前途，我像你这么大的时候还专心泡妞呢，心无旁骛的

zythum

nbsp;2013-02-05 16:47:33 +08:00

初三朱一还在玩泥巴

iloveyou

2013-02-05 16:55:44 +08:00

就一张大背景有你什么事

kimcool

2013-02-05 16:59:29 +08:00

那时候的我，专心学习星际争霸3v3中，苦练拳皇97

X_Del

2013-02-05 17:15:26 +08:00

哥们儿你有刷新 V2EX 的年龄下限了：
/t/20860

去年我还在 Ruby on Rails 中各种纠结……

coosir

2013-02-05 17:19:53 +08:00

略显花哨，可以进一步雕琢细节

whtsky

2013-02-05 17:24:35 +08:00

刚从初三党解脱的孩子表示
高一就是个坑爹的货（

darcy

2013-02-05 17:26:20 +08:00

楼主初三就立志做前端？压力好大

whtsky

2013-02-05 17:28:11 +08:00

.home{
background: url(../img/home-bg.jpg);
background-repeat: no-repeat;
background-position: center 100%;
background-attachment: fixed;
}
.about{
background: url(../img/about-bg.jpg);
background-repeat: no-repeat;
background-position: center 100%;
background-attachment: fixed;
}
.footstep{
background: url(../img/foot-bg.jpg);
background-repeat: no-repeat;
background-position: center 100%;
background-attachment: fixed;
}
.guest{
background: url(../img/guest-bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}

感觉这一段可以优化优化。。把

background-repeat: no-repeat;
background-position: center 100%;
background-attachment: fixed;

写到body里，然后几个class里面只有背景图

Kai

2013-02-05 17:32:20 +08:00 via iPhone

加油！在这么年轻的时候就找到喜欢的事情并且乐在其中。

august

2013-02-05 17:39:14 +08:00

那一年，我十六，她也十六。。

yqyq1020

2013-02-05 18:29:47 +08:00 via Android

@whtsky 太感谢了。我也觉得可以优化，之前是几个class写在一起但是实现不了，原来要放在body

yqyq1020

2013-02-05 18:30:47 +08:00 via Android

@muxi 了解了，谢谢，时间比较紧迫，没有多想

xiaolai

2013-02-05 22:46:04 +08:00

嗯。不错 ... who likes web designing.

leveraging

2013-02-05 23:05:37 +08:00 via Android

忍不住回复。。在我专注游戏的年龄。。你居然在学前端了。

perrydu

2013-02-05 23:28:15 +08:00 via iPhone

@xiaolai 老师也发现了，其实我已经私下提醒过他了。还有，你的博客里有关留学的对我很有帮助。

qinix

2013-02-05 23:56:00 +08:00 via Android

高二撸过，到高中你会觉得老师说的中考完到高中就轻松了全他妈扯淡！话说我初三时在玩php，做论坛…顶着中考的压力…

perrydu

2013-02-05 23:59:18 +08:00 via iPhone

@qinix 握爪高二，上次看见00后有在开发win8应用

iwinux

2013-02-06 00:16:12 +08:00

第一眼的感觉是，图标大小和风格都不一致

SamZeng

2013-02-06 00:23:07 +08:00

加油。
视觉上：
1、排版；
2、背景图处理；
代码上：
1、SEO, keyword, desc etc. 还有如 nav 的写法，更加倾向于把文字隐藏。HEAD 中少了<meta charset="UTF-8">，具体可看V2EX的代码。
2、用到fixed，那么是不是就不考虑IE6
3、导航中a>span用fixed，其实你都有用到%的宽了，有更好的处理方法
4、图标 sprite
5、不推荐 text1 text2 text3 类似的命名，语义化

其它自己多看一些大网站，如淘宝之类的，一个需要一个团队去优化的首页，人家为什么那样写，那样的结构有什么好处等等，自己多去看多去想就行了。还有，我不反对直接入手HTML5或CSS3，但基础还是有必要去看一下。

再一次，加油。你这年纪的时候，我还在玩仙剑一。

Rand01ph

2013-02-06 00:37:22 +08:00

现在的孩子要逆天啊

dahuang7

2013-02-06 00:45:15 +08:00

我16那一年，还在QQ空间上写悲情的分手日志…

qinix

2013-02-06 01:21:48 +08:00 via Android

@perrydu 老了啊……

insub

2013-02-06 04:04:12 +08:00 via iPad

喜欢

insub

2013-02-06 04:10:28 +08:00 via iPad

行高可以调大一点，字体颜色再淡一点，文字的排版上可以参考下字节社或豆瓣阅读一类阅读类app的排版。
前端的话，淘宝ued之类国内的ued团队网站可以去看看，挺有用的。

diib

2013-02-06 07:12:36 +08:00 via Android

@SamZeng

上次剥皮时候发现，V2EX的html里边有些不太标准的地方。不建议以此做教程。

鼓励楼主。

SamZeng

2013-02-06 08:28:17 +08:00

@diib 那何谓标准，你都说自己在做剥皮的工作，没人叫你照抄，但连声明都没有，我不管是utf-8还是gbk或其它。

cnlengr

2013-02-06 09:05:12 +08:00

嗯，社交按钮大小不一让我很。。。（偏执狂）
LZ有考虑找一套统一的图标么？

jueying510

2013-02-06 09:15:36 +08:00

这个年纪做出来的东西已经很不错了，而且看得出来楼主觉悟很高!

yqyq1020

2013-02-06 09:17:49 +08:00 via iPad

@SamZeng 谢谢这么认真，背景图的加载不知怎么解决，排版的话也许应该引进比较美观的字体库，声明纯属疏忽，ie6确实是没考虑。。。用fixed的话不是让页面拉动的时侯固定在页面上方，seo没什么所谓啦，sprite的话昨晚有在研究，尽量在明天把修改传上去。。。谢谢

yqyq1020

2013-02-06 09:19:37 +08:00 via iPad

@insub 恩，自己是喜欢简单一点的东西，我会认真研究，争取下一次更有进步

yqyq1020

2013-02-06 09:20:39 +08:00 via iPad

@xiaolai 一直以为我有加s........好糗

firsthym

2013-02-06 09:20:47 +08:00

我不是专业前端，但有一颗好为人师 + 浮躁的心，给你提点建议：

总体来说，还不错。

css可以学习bootstrap
js可以学习jquery

会以上2点，基本就可以做项目了。

再谈谈页面：

背景很苍凉，主题很sunshine。

底部绿字应该是重点，但却躲躲藏藏。

yqyq1020

2013-02-06 09:23:41 +08:00 via iPad

@cnlengr 我都是谷歌下来的，自己的美工很烂。。。您有素材吗

yqyq1020

2013-02-06 09:26:30 +08:00 via iPad

@firsthym css昨晚在研究less，在下一个作品应该会用到，老实说bootstrap太多人做。jquery在js权威指南啃完后会入手，谢谢您的建议

YQtaku

2013-02-06 09:39:32 +08:00

初三我在干嘛？记不起来了，记不起来的过去等于没有过去=。=

cnlengr

2013-02-06 09:49:17 +08:00

@yqyq1020 噗，用不着您嘛。。。
个人建议，确定整个网站的风格感觉之后，找一套适合自己网站主题的图标。
（或许你已经知道了，但是deviantArt上面有很多素材非常棒，可以在那上面搜搜social button看看）

关于背景图片，尽量和内容相呼应，我的意思是，比如Guestbook的背景美女就让我很娇羞了
然后导航栏空出了一个没有链接到任何页面的按钮，考虑加一个页面吧，或者干脆去掉（又是偏执狂作祟）

不要嫌我嗦哦

lemayi

2013-02-06 10:01:07 +08:00

压力好大。。。

diib

2013-02-06 10:20:19 +08:00

@SamZeng

剥皮是学习一下，本人也没有在任何地方使用v2ex的皮（将来也不会用）。
况且现在讨论的是html的问题，不是我偷没偷东西的问题。

“1、SEO, keyword, desc etc. 还有如 nav 的写法，更加倾向于把文字隐藏。HEAD 中少了<meta charset="UTF-8">，具体可看V2EX的代码。”
我可能理解错了这句话，你也许只是说meta声明字符集utf-8这里看v2ex，我以为你的意思是 v2ex的html写的很好。

题外话：如果非要扣标准抠字眼的话，“utf-8”应该小写。标准不是必须要遵守的，但是应该努力贴近。

aisk

2013-02-06 10:23:36 +08:00

@dahuang7 16岁就有手可分妊娠淫家

SamZeng

2013-02-06 10:24:03 +08:00

@diib 嗯，不好意思，可能我表达有误，我并没有其它题处话的意思，我所想表达的都表达出来了，希望能帮助到楼主，这事就过了，不要 @ 我了。

其实最大的帮助不是我怎么去纠正楼主的代码或者其它，这些都是需要他自己去验证的，没错哪来的对。

我最鼓励的是他在这年纪的这种求知精神，真的要坚持下去。

diib

2013-02-06 10:46:23 +08:00

回了这么多，说点对楼主有帮助的吧：

1、尽量避免在html页面中直接使用 tag的style属性，最好放到css里

2、做到浏览器兼容，是一个前端重要的基本功，针对国内的情况，ie6目前还是需要认真考虑的，虽然它们很烂。还有就是移动浏览器和分辨率。

3、如果是文字类页面，字体和字号要考虑针对的用户群体。英文和汉字适合阅读的字号是不一样的。英文12px比较美观了，汉字13px比较好看。当然结合字体、字距行距考虑会更好，以前有说法是使用em来定义字号比较好。

4、布局和色彩方面。这个我是外行，建议看一些美术方面的书，当然有美工配合就不用想这些了。

5、Javascript。

6、关注潮流。举个栗子：以前针对纵向排版曾经流行的960 grid system等；现在针对宽屏16:x显示器，又有向横向排版翻页发展的趋势。

说了这么多，还是很羡慕啊，这么年轻就开始专心致志了，我初三时候……好像刚学会打字和使用wordperfect 3

diib

2013-02-06 10:52:05 +08:00

又说错了，汉字14px比较好看 T_T

veggie

2013-02-06 10:59:38 +08:00

@zythum 哈哈，我初三就不不提了，太丢人

yqyq1020

2013-02-06 11:25:34 +08:00 via Android

@cnlengr 哈哈。那个页面啊。想以后做的东西多点用来展示

yqyq1020

2013-02-06 11:32:03 +08:00 via Android

@diib 恩，谢谢 html的style貌似只写了一个，因为感觉那个无关紧要。。。js在学啦。。确实想了解一些配色技巧，这方面很浪费开发时间，总是写了删，删了写

hpowen

2013-02-06 11:40:26 +08:00

这个字句让我想起来小学那会写的html

andy12530

2013-02-06 11:42:44 +08:00

忍不住说几句，IE67的事你就别做了。

兼容这两个浏览器就是浪费生命，bug没有规律可言，全凭经验，而且这两货死是迟早的事情。。。

打开百度统计看看2012年浏览器市场份额的变化，数字和搜狗之类的都强制ie8了，你再弄这有啥意义？

等楼主开始干活的事情，就没这俩浏览器了。

国内的一些大站兼容这些那另当别论。

楼主加油。

rocyhua

2013-02-06 12:17:05 +08:00

@veggie 同感啊，哈哈。

hypercore

2013-02-06 13:11:28 +08:00

作为一个99年的初二党且同为Mac user，看到这帖不得不说一下了。

5岁的时候第一次上机，整天打Bejeweled 2和连连看。

10岁受老爹影响开始折腾iPhone，整天装这个插件那个插件，白苹果了就重刷，改.plist，加repo。

11岁的时候开始折腾Flash，正走向灭亡的东西。买了两本ActionScript 3.0的书，花了1年自学了所有内容，知道了什么是OOP，做了一堆小东西，但是没有一个拿得出来见人的。

12岁有了第一台Mac，Mid-2011 iMac低配，一直陪我到现在，虽然屏幕有”进灰“，但是还是让我爱不释手。一年中看了很多技术帖，知道了*nix, GNU, 搞清楚了MS、Apple和Xerox的那些纠葛。

13岁借了同学的VPN翻墙到现在，墙外的东西完全刷新了我的三观，也在寻找给App Store加速的过程中发现了V2EX，但是没有多加留意。下半年开始看果壳，V2EX，非常佩服@Livid。在一个免费hosting服务上架设了自己的LAMP服务器，用WordPress搭了一个小站，但是懒得更新。前段时间看了Livid推荐的Paul Graham《黑客与画家》，感触很深，自学了Python的基础。向老妈跪求了一个iDev的帐号，开始折腾Obj-C和Cocoa，做个简单的App，Python只能放一放。

基本上以前都是以游客的身份在看V2EX，确实是一个非常棒的社区。看了Livid的博客，非常赞同发帖扣金币的方式，很大程度上保证了回复和主题的质量；用着朱一 @zythum 的Youku HTML5 Player，看Youku和Tudou再也不发烫啦~；很喜欢李笑来老师 @xiaolai 的knewone.com，准备买hypercore.me的域名；还有很多新颖的Project，比如 @Farbox 的Farbox，@clowwindy 的Shadowsocks, 某天限免收的DailyCost的作者 @guopengliang 也在这里。

未来想做iOS App开发和Web Design，希望能和LZ认识一下。