• 请不要在回答技术问题时复制粘贴 AI 生成的内容
laomutuo
V2EX  ›  程序员

如何把设计师的图片变成网页呢?

  •  
  •   laomutuo · Jan 30, 2015 · 7337 views
    This topic created in 4300 days ago, the information mentioned may be changed or developed.

    网上看到下面这个图片,赶脚挺漂亮的,就是不知道该如何将它变成代码;(
    略懂css,js,html,但还是不知道如何将下面的图片变成网页:(

    大家给点思路神马的吧:)

    68 replies  •  2015-02-03 14:01:43 +08:00
    zikkeung
    zikkeung
    Jan 30, 2015
    1
    找前端来做啊
    laomutuo
    laomutuo
    OP
    Jan 30, 2015❤️1
    2
    @zikkeung 偶就是前端...
    yukirock
    yukirock
    Jan 30, 2015
    3
    佈局用 Bootstrap 綽綽有餘,導航欄用 .navbar-fixed-top,下面 3+9 兩欄就好。UI 似乎就是 BS 的默認樣式,稍微修改一下就可以。
    uuair
    uuair
    Jan 30, 2015 via iPhone
    4
    ps里面切片,直接成网页
    laomutuo
    laomutuo
    OP
    Jan 30, 2015
    5
    @uuair 可以直接导出为网页么?
    wadezhao
    wadezhao
    Jan 30, 2015❤️1
    6
    @laomutuo 问出这样的问题,说明你还不够资格当前端啊………………
    0x142857
    0x142857
    Jan 30, 2015
    7
    header
    h1
    nav
    .wrap
    .row
    .left
    .main
    0x142857
    0x142857
    Jan 30, 2015
    8
    WTF, V2EX 也过滤掉了空格.
    0x142857
    0x142857
    Jan 30, 2015
    9
    布局都一样 http://ohmycss.com
    em70
    em70
    Jan 30, 2015❤️1
    10
    前端的工作就是把别人设计的东西给做出来,要是一键就生成代码了,前端这个职位还有什么存在的价值
    laomutuo
    laomutuo
    OP
    Jan 30, 2015
    11
    @0x142857 小破站你的?
    0x142857
    0x142857
    Jan 30, 2015 via Android
    12
    laomutuo
    laomutuo
    OP
    Jan 30, 2015
    13
    @0x142857 亲搞前端多久了,好厉害的样子
    0x142857
    0x142857
    Jan 30, 2015 via Android
    14
    @laomutuo 我也是前端入门级玩家。
    WhyLiam
    WhyLiam
    Jan 30, 2015
    15
    前端還沒有入門那
    0x142857
    0x142857
    Jan 30, 2015 via Android❤️1
    16
    楼主的每个问题似乎都是求 Block 的。
    Perry
    Perry
    Jan 30, 2015 via Android❤️1
    17
    @0x142857 你把我想说的话说了
    SuYia
    SuYia
    Jan 30, 2015 via Android
    18
    这个问题好难。
    jprovim
    jprovim
    Jan 30, 2015
    19
    Keyword: Slicing PSD to HTML
    broker
    broker
    Jan 30, 2015
    21
    broker
    broker
    Jan 30, 2015
    22
    google prevent 第一个就是这个site https://preventnow.com/faq
    babyname
    babyname
    Jan 30, 2015 via iPhone
    23
    这么简单的页面实现不了能叫前端?那前端是做什么的?
    zjgsamuel
    zjgsamuel
    Jan 30, 2015
    24
    ityao
    ityao
    Jan 30, 2015
    25
    把 CSS 另存下来, 然后HTML也另存
    然后你懂的
    shakoon
    shakoon
    Jan 30, 2015
    26
    楼主你真的是做前端的?PS切图是前端人员的入门级技能哦
    binjoo
    binjoo
    Jan 30, 2015
    27
    @ityao 人家都说了是个图片,你怎么把CSS另存,怎么把HTML另存?
    futursolo
    futursolo
    Jan 30, 2015
    28
    @shakoon
    这么扁,有什么好切的?直接上CSS不就行了?
    uuair
    uuair
    Jan 30, 2015
    29
    @laomutuo http://helpx.adobe.com/cn/photoshop/using/slicing-web-pages.html
    我其实不该再来回答的,因为google都有这么多答案。
    loading
    loading
    Jan 30, 2015
    30
    楼主在2楼的回复把我乐坏了,感谢你给我快乐的一天!
    cnkuner
    cnkuner
    Jan 30, 2015 via Android
    31
    切图啊
    crll
    crll
    Jan 30, 2015
    32
    @binjoo 你看看2楼,5楼。。
    binjoo
    binjoo
    Jan 30, 2015
    33
    @crll 我想知道 @laomutuo 理解的前端是做什么的。
    66beta
    66beta
    Jan 30, 2015
    34
    楼主,我宁愿相信你是来搞笑的
    xychang
    xychang
    Jan 30, 2015
    35
    这页面根本不需要ps切图啊……
    userlogin
    userlogin
    Jan 30, 2015
    36
    一定是猴子请来的逗比。
    chshouyu
    chshouyu
    Jan 30, 2015
    37
    请问楼主你所认为的前端都是做什么的。。
    zhuziyi
    zhuziyi
    Jan 30, 2015
    38
    楼主你这不是人品有问题么?说自己做前端的,还问这个问题,真奇怪~
    loveuqian
    loveuqian
    Jan 30, 2015
    39
    。。。。。。。。。。。。。。。
    来卖萌的?
    zhuziyi
    zhuziyi
    Jan 30, 2015
    40
    楼主只是来活跃气氛的~
    LuckyHJH
    LuckyHJH
    Jan 30, 2015
    41
    哈哈哈这么简单,直接把图片放进img或者background里然后摆上去网站啊
    learnshare
    learnshare
    Jan 30, 2015
    42
    前端是干嘛的?

    把设计图改名为 index.html,丢到服务器完事
    thanksir
    thanksir
    Jan 30, 2015
    43
    2333333333333333333
    Vt463o3364vZ98Y7
    Vt463o3364vZ98Y7
    Jan 30, 2015
    44
    楼主如果是前端的话,不应该问出这种问题吧~~~~~
    shyrz
    shyrz
    Jan 30, 2015
    45
    逗
    Phariel
    Phariel
    Jan 30, 2015 via Android
    46
    我懂了 楼主5铜币拿好不送
    dcirplan
    dcirplan
    Jan 30, 2015
    47
    疯狂coding之后,把图切下来,贴上去~ok
    rayps
    rayps
    Jan 30, 2015
    48
    这个页面根本不需要切图...
    GuangTsang
    GuangTsang
    Jan 30, 2015
    49
    楼主是 前台端水的吧
    greatdk
    greatdk
    Jan 30, 2015
    50
    @0x142857 这么屌
    ryanyu104
    ryanyu104
    Jan 30, 2015
    51
    你是前端 这个页面你搞不出来... 逗我们呢?
    wheatcc
    wheatcc
    Jan 30, 2015
    52
    LZ是来开心大家的么?
    Wenwei
    Wenwei
    Jan 30, 2015
    53
    你可以找重构帮你做,前端负责写js就好了。
    momou
    momou
    Jan 30, 2015
    54
    这切个毛的图啊,直接写了。。。
    javerccc
    javerccc
    Jan 30, 2015
    55
    LZ你确定你知道什么是前端?
    acgeo
    acgeo
    Jan 30, 2015
    56
    有个工作叫做 切图仔

    被尊称为 前端开发工程师
    lance26
    lance26
    Jan 30, 2015
    57
    along
    along
    Jan 30, 2015
    58
    这是什么节奏?怎么有种吐槽,又不知道从何吐起的感觉!
    acgeo
    acgeo
    Jan 30, 2015
    59
    @along 龙哥 哈哈
    benjiam
    benjiam
    Jan 30, 2015 via Android
    60
    不会,切图容易,用CSS实现效果,鼠标点击效果,移动效果 多平台一直
    omi4399
    omi4399
    Jan 30, 2015
    61
    这是谁的小号来卖萌的?
    zoosucker
    zoosucker
    Jan 30, 2015
    62
    你可以把它另存为图片,然后用img做成个背景就行了。
    yaoyuan1072
    yaoyuan1072
    Jan 30, 2015
    63
    1.切图
    2.CSS
    3.楼上+1
    RaymondYip
    RaymondYip
    Jan 31, 2015
    64
    2333333333楼主确定是前端?? 无法直视啊
    xmi
    xmi
    Jan 31, 2015 via Android
    65
    @GuangTsang 这解释。。2333
    xmi
    xmi
    Jan 31, 2015 via Android
    66
    对了 楼上也说了 该网站成品也出来了 可以直接去打开网页查看源代码:)
    jedicxl
    jedicxl
    Jan 31, 2015
    67
    @laomutuo 能问出这样问题的,你确定你是前端?
    SoberZhou
    SoberZhou
    Feb 3, 2015
    68
    既然略懂,那么 这个页面一点都不需要切。 直接码出来
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1641 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 123ms · UTC 12:43 · PVG 20:43 · LAX 04:43 · JFK 07:43
    ♥ Do have faith in what you're doing.