V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
yqyq1020
V2EX  ›  分享创造

新写的静页,求喷

  •  
  •   yqyq1020 ·
    Xilesun · 2013-02-05 16:11:32 +08:00 · 7421 次点击
    这是一个创建于 4294 天前的主题,其中的信息可能已经有所发展或是发生改变。
    在初三一大堆作业中争分夺秒,写了个静页,代码托管在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
        1
    saharabear  
       2013-02-05 16:13:34 +08:00
    年轻人越来越了不起了.
    heidour
        2
    heidour  
       2013-02-05 16:16:53 +08:00
    排版还值得推敲。比如头像旁边的英文,关于页面的行距。
    muxi
        3
    muxi  
       2013-02-05 16:20:08 +08:00
    文字排版混乱,看起来非常不舒服,背景图片过大,加载过慢
    zythum
        4
    zythum  
       2013-02-05 16:31:04 +08:00
    这个字距啊... 容易眼镜花啊...
    jingwentian
        5
    jingwentian  
       2013-02-05 16:43:25 +08:00   ❤️ 1
    现在的小青年真有前途,我像你这么大的时候还专心泡妞呢,心无旁骛的
    zythum
        6
    zythum  
       2013-02-05 16:47:33 +08:00
    初三 朱一还在玩泥巴
    iloveyou
        7
    iloveyou  
       2013-02-05 16:55:44 +08:00
    就一张大背景 有你什么事
    kimcool
        8
    kimcool  
       2013-02-05 16:59:29 +08:00
    那时候的我,专心学习星际争霸3v3中,苦练拳皇97
    X_Del
        9
    X_Del  
       2013-02-05 17:15:26 +08:00
    哥们儿你有刷新 V2EX 的年龄下限了:
    /t/20860

    去年我还在 Ruby on Rails 中各种纠结……
    coosir
        10
    coosir  
       2013-02-05 17:19:53 +08:00
    略显花哨,可以进一步雕琢细节
    whtsky
        11
    whtsky  
       2013-02-05 17:24:35 +08:00
    刚从初三党解脱的孩子表示
    高一就是个坑爹的货(
    darcy
        12
    darcy  
       2013-02-05 17:26:20 +08:00   ❤️ 1
    楼主初三就立志做前端?压力好大
    whtsky
        13
    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-position: center 100%;
    background-attachment: fixed;
    }

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

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

    写到body里,然后几个class里面只有背景图
    Kai
        14
    Kai  
    MOD
       2013-02-05 17:32:20 +08:00 via iPhone
    加油!在这么年轻的时候就找到喜欢的事情并且乐在其中。
    august
        15
    august  
       2013-02-05 17:39:14 +08:00   ❤️ 1
    那一年,我十六歲,她也十六歲。。
    yqyq1020
        16
    yqyq1020  
    OP
       2013-02-05 18:29:47 +08:00 via Android
    @whtsky 太感谢了。我也觉得可以优化,之前是几个class写在一起但是实现不了,原来要放在body
    yqyq1020
        17
    yqyq1020  
    OP
       2013-02-05 18:30:47 +08:00 via Android
    @muxi 了解了,谢谢,时间比较紧迫,没有多想
    xiaolai
        18
    xiaolai  
       2013-02-05 22:46:04 +08:00
    嗯。不错 ... who likes web designing.
    vigoss
        19
    vigoss  
       2013-02-05 23:05:37 +08:00 via Android
    忍不住回复。。在我专注游戏的年龄。。你居然在学前端了。
    perrydu
        20
    perrydu  
       2013-02-05 23:28:15 +08:00 via iPhone
    @xiaolai 老师也发现了,其实我已经私下提醒过他了。还有,你的博客里有关留学的对我很有帮助。
    qinix
        21
    qinix  
       2013-02-05 23:56:00 +08:00 via Android
    高二撸过,到高中你会觉得老师说的中考完到高中就轻松了全他妈扯淡!话说我初三时在玩php,做论坛…顶着中考的压力…
    perrydu
        22
    perrydu  
       2013-02-05 23:59:18 +08:00 via iPhone
    @qinix 握爪高二,上次看见00后有在开发win8应用
    iwinux
        23
    iwinux  
       2013-02-06 00:16:12 +08:00
    第一眼的感觉是,图标大小和风格都不一致
    SamZeng
        24
    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
        25
    Rand01ph  
       2013-02-06 00:37:22 +08:00
    现在的孩子要逆天啊
    dahuang7
        26
    dahuang7  
       2013-02-06 00:45:15 +08:00
    我16那一年,还在QQ空间上写悲情的分手日志…
    qinix
        27
    qinix  
       2013-02-06 01:21:48 +08:00 via Android
    @perrydu 老了啊……
    insub
        28
    insub  
       2013-02-06 04:04:12 +08:00 via iPad
    喜欢
    insub
        29
    insub  
       2013-02-06 04:10:28 +08:00 via iPad
    行高可以调大一点,字体颜色再淡一点,文字的排版上可以参考下字节社或豆瓣阅读一类阅读类app的排版。
    前端的话,淘宝ued之类国内的ued团队网站可以去看看,挺有用的。
    diib
        30
    diib  
       2013-02-06 07:12:36 +08:00 via Android
    @SamZeng

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

    鼓励楼主。
    SamZeng
        31
    SamZeng  
       2013-02-06 08:28:17 +08:00
    @diib 那何谓标准,你都说自己在做剥皮的工作,没人叫你照抄,但连声明都没有,我不管是utf-8还是gbk或其它。
    cnlengr
        32
    cnlengr  
       2013-02-06 09:05:12 +08:00
    嗯,社交按钮大小不一让我很。。。(偏执狂)
    LZ有考虑找一套统一的图标么?
    jueying510
        33
    jueying510  
       2013-02-06 09:15:36 +08:00
    这个年纪做出来的东西已经很不错了,而且看得出来楼主觉悟很高!
    yqyq1020
        34
    yqyq1020  
    OP
       2013-02-06 09:17:49 +08:00 via iPad
    @SamZeng 谢谢这么认真,背景图的加载不知怎么解决,排版的话也许应该引进比较美观的字体库,声明纯属疏忽,ie6确实是没考虑。。。用fixed的话不是让页面拉动的时侯固定在页面上方,seo没什么所谓啦,sprite的话昨晚有在研究,尽量在明天把修改传上去。。。谢谢
    yqyq1020
        35
    yqyq1020  
    OP
       2013-02-06 09:19:37 +08:00 via iPad
    @insub 恩,自己是喜欢简单一点的东西,我会认真研究,争取下一次更有进步
    yqyq1020
        36
    yqyq1020  
    OP
       2013-02-06 09:20:39 +08:00 via iPad
    @xiaolai 一直以为我有加s........好糗
    firsthym
        37
    firsthym  
       2013-02-06 09:20:47 +08:00
    我不是专业前端,但有一颗好为人师 + 浮躁的心,给你提点建议:

    总体来说,还不错。

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

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

    再谈谈页面:

    背景很苍凉,主题很sunshine。

    底部绿字应该是重点,但却躲躲藏藏。
    yqyq1020
        38
    yqyq1020  
    OP
       2013-02-06 09:23:41 +08:00 via iPad
    @cnlengr 我都是谷歌下来的,自己的美工很烂。。。您有素材吗
    yqyq1020
        39
    yqyq1020  
    OP
       2013-02-06 09:26:30 +08:00 via iPad
    @firsthym css昨晚在研究less,在下一个作品应该会用到,老实说bootstrap太多人做。jquery在js权威指南啃完后会入手,谢谢您的建议
    YQtaku
        40
    YQtaku  
       2013-02-06 09:39:32 +08:00
    初三我在干嘛?记不起来了,记不起来的过去等于没有过去=。=
    cnlengr
        41
    cnlengr  
       2013-02-06 09:49:17 +08:00
    @yqyq1020 噗,用不着您嘛。。。
    个人建议,确定整个网站的风格感觉之后,找一套适合自己网站主题的图标。
    (或许你已经知道了,但是deviantArt上面有很多素材非常棒,可以在那上面搜搜social button看看)

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

    不要嫌我啰嗦哦
    lemayi
        42
    lemayi  
       2013-02-06 10:01:07 +08:00
    压力好大。。。
    diib
        43
    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
        44
    aisk  
       2013-02-06 10:23:36 +08:00
    @dahuang7 16岁就有手可分 妊娠淫家
    SamZeng
        45
    SamZeng  
       2013-02-06 10:24:03 +08:00
    @diib 嗯,不好意思,可能我表达有误,我并没有其它题处话的意思,我所想表达的都表达出来了,希望能帮助到楼主,这事就过了,不要 @ 我了。

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

    我最鼓励的是他在这年纪的这种求知精神,真的要坚持下去。
    diib
        46
    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
        47
    diib  
       2013-02-06 10:52:05 +08:00
    又说错了,汉字14px比较好看 T_T
    veggie
        48
    veggie  
       2013-02-06 10:59:38 +08:00
    @zythum 哈哈,我初三就不不提了,太丢人
    yqyq1020
        49
    yqyq1020  
    OP
       2013-02-06 11:25:34 +08:00 via Android
    @cnlengr 哈哈。那个页面啊。想以后做的东西多点用来展示
    yqyq1020
        50
    yqyq1020  
    OP
       2013-02-06 11:32:03 +08:00 via Android
    @diib 恩,谢谢 html的style貌似只写了一个,因为感觉那个无关紧要。。。js在学啦。。确实想了解一些配色技巧,这方面很浪费开发时间,总是写了删,删了写
    hpowen
        51
    hpowen  
       2013-02-06 11:40:26 +08:00
    这个字句让我想起来小学那会写的html
    andy12530
        52
    andy12530  
       2013-02-06 11:42:44 +08:00
    忍不住说几句,IE67的事你就别做了。

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

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

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

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

    楼主加油。
    rocyhua
        53
    rocyhua  
       2013-02-06 12:17:05 +08:00
    @veggie 同感啊,哈哈。
    hypercore
        54
    hypercore  
       2013-02-06 13:11:28 +08:00   ❤️ 1
    作为一个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认识一下。
    citydog
        55
    citydog  
       2013-02-06 13:23:19 +08:00
    “小学开始学习用DW、frontpage制作简单的静态网页”,看到LZ这句话,我震惊了,小学我还整天满世界疯跑呢... 年轻人真是越来越牛B了,哈哈~~
    veggie
        56
    veggie  
       2013-02-06 13:33:05 +08:00
    黑客与画家 还没仔细看,看每章的标题,发现graham讨论了很多编程语言的事情,那他本人有特别推崇某种语言吗?
    whtsky
        57
    whtsky  
       2013-02-06 13:36:34 +08:00
    @hypercore 膜拜初二党- -
    sofish
        58
    sofish  
       2013-02-06 13:36:49 +08:00
    哇靠,发现我是大三以后才开始学前端的,这起步好早!
    whtsky
        59
    whtsky  
       2013-02-06 13:40:42 +08:00
    @hypercore 97年的高一+Mac党
    折腾了很久的Python,Web Design一直在各种学习
    一直对Obj-C+Cocoa很感兴趣但是还没开始学= =
    想和你认识一下,咳= =
    hypercore
        60
    hypercore  
       2013-02-06 13:45:10 +08:00
    @veggie 他特别推崇Lisp,和他自己参与设计的Lisp方言Arc。谈到了Bulb困境,很有趣的东西。非常值得一读。花了一个星期在地铁上读完了。


    @whtsky hypercore#me.com
    yqyq1020
        61
    yqyq1020  
    OP
       2013-02-06 15:02:48 +08:00 via iPad
    @hypercore qq707186905
    yqyq1020
        62
    yqyq1020  
    OP
       2013-02-06 15:07:13 +08:00 via iPad
    @whtsky
    @hypercore ...其实我97啦入学晚。我自己的电脑还是一台没有联网的老爷机呢。超低配。总是在自己的电脑写完再到我爸的电脑上传,羡慕你们啊
    alen_v
        63
    alen_v  
       2013-02-06 15:09:34 +08:00
    作为一个16岁处于发育期的有为青年,是不是应该少骑点长途单车?
    yqyq1020
        64
    yqyq1020  
    OP
       2013-02-06 15:27:03 +08:00 via iPad
    @alen_v 哪里长途。。。中考后过省整个几百公里的
    qiongqi
        65
    qiongqi  
       2013-02-06 15:55:08 +08:00
    吐个小槽,github那个图片,我以为是g+的呢。。github不应该是那个触手猫吗?
    dexter
        66
    dexter  
       2013-02-06 15:56:59 +08:00
    英文应该是 who likes 吧
    alen_v
        67
    alen_v  
       2013-02-06 16:32:10 +08:00
    重点在“发育期” 。。。
    yqyq1020
        68
    yqyq1020  
    OP
       2013-02-06 20:47:25 +08:00
    @qiongqi 那个应该是git的图标
    perrydu
        69
    perrydu  
       2013-02-06 22:02:55 +08:00
    @hypercore 给初二学生 跪舔,环境决定人的一生啊〜
    perrydu
        70
    perrydu  
       2013-02-06 23:28:19 +08:00
    @whtsky 求认识 i#perry.asia
    Yooguo
        71
    Yooguo  
       2013-02-07 03:02:31 +08:00
    @yqyq1020 才16岁 好孩子 姐当时还不知道自己对设计感兴趣呢~网页看了 挺不错的 MS已经修改了不少 不知道之前是什么样子 关于配色 你这页面MS没用到太多配色 有了大背景图 配色就不要太复杂了 加油!↖(^ω^)↗
    yqyq1020
        72
    yqyq1020  
    OP
       2013-02-07 08:40:33 +08:00 via iPad
    @Yooguo 原来上面的导航是做彩色的,后来一气之下改成了现在这样,有没有配色方面的书籍
    kulin3422
        73
    kulin3422  
       2013-02-15 22:23:17 +08:00
    弄点动画撒 html5
    yqyq1020
        74
    yqyq1020  
    OP
       2013-02-15 22:26:56 +08:00
    @kulin3422 放在哪?
    luztak
        75
    luztak  
       2013-02-15 22:53:55 +08:00 via Android
    @hypercore @whtsky @yqyq1020
    这90后认亲啊
    96 高二 非Mac
    个人认为你们都该喊我哥XD
    yexiaoxing
        76
    yexiaoxing  
       2013-02-15 22:55:55 +08:00 via iPad
    高一,表示前端对我来说是个梦。。
    reverland
        77
    reverland  
       2013-02-15 23:39:43 +08:00   ❤️ 1
    有点花了,我也觉得前端好恐怖……
    kokdemo
        78
    kokdemo  
       2013-02-16 00:12:38 +08:00
    我初三的时候还是一个小傻逼……ps:你居然在初三能拥有上网的时间……
    DScece
        79
    DScece  
       2013-02-16 05:30:38 +08:00
    为什么一定要让文字有拉条呢,而且还憋屈在那么小的框里。
    hapboy
        80
    hapboy  
       2013-02-16 07:37:43 +08:00
    高二党撸过……耍PHP的…………前端一直是个蛋疼的货,特别是JS!!
    aveline
        81
    aveline  
       2013-02-16 09:35:42 +08:00
    我是94的...
    kulin3422
        82
    kulin3422  
       2013-02-16 10:29:36 +08:00
    我在mac下测试 点到nothing后 布局就不对了。
    wudikua
        83
    wudikua  
       2013-02-17 14:39:18 +08:00
    哎,发现自己真的老了。
    fork3rt
        84
    fork3rt  
       2013-02-17 16:42:17 +08:00
    @yqyq1020 后生可畏啊 。。。 我初三的时候才开始用frontpage 来做简单的静态页面。。。
    JASKNi
        85
    JASKNi  
       2013-02-17 21:52:58 +08:00
    进去的那一下我发出了「我靠」, 而且是发自内心的...
    我只能觉得这并不是一个朴素的设计, 它像是我也还在初三时候在网路上看到的那些个人网站, 但我已经在工作了...
    加油吧孩纸, 你缺的只是审美.
    wzzyj8
        86
    wzzyj8  
       2013-02-18 14:25:52 +08:00
    赞一个,我初三的时候写的东西要渣多了。。
    justfindu
        87
    justfindu  
       2013-02-18 17:01:31 +08:00
    初三- - 在用软盘玩超级玛丽
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2709 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 11:48 · PVG 19:48 · LAX 03:48 · JFK 06:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.