V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
BaiLinfeng
V2EX  ›  程序员

学前端差不多一年了, 0 基础,到现在切图还是问题,怎么办是好?

  •  
  •   BaiLinfeng · 32 天前 · 2631 次点击
    这是一个创建于 32 天前的主题,其中的信息可能已经有所发展或是发生改变。

    2019 年学的前端,但是到现在布局切图都不会,看到 UI 图后,脑袋第一时间想不到一个布局的思路,我都想放弃了。不知道为什么始终理解不了布局的精髓,怎么都摆不出 UI 的效果图,时间久了严重打击了学习的积极性,该怎么办是好?我内心是很想学好的,但是就是写不出来,反而我感觉 JS 学起来比布局还熟悉,JS 是理解慢,但是逻辑一下久想通了。布局始终都摆不出自己想要的效果,心好累,年纪也不小了。

    37 条回复    2020-10-27 19:08:38 +08:00
    musi
        1
    musi   32 天前 via iPhone
    写少了,多写写就好了
    XCFOX
        2
    XCFOX   32 天前   ❤️ 8
    flex 就完事了。
    没有什么布局是套 flex 容器解决不了的,如果有就再套一层。
    chenqh
        3
    chenqh   32 天前 via Android
    前端有什么视频推荐吗?课程也行
    whisky221
        4
    whisky221   32 天前
    css 是有很多学问,但是不至于这么难
    楼主是转行计算机的吗?我那时候刚毕业 0 基础自学了两个月就差不多了
    建议还是要多写,至于切图,现在基本上都 sketch 或者蓝湖设计帮切好了
    Jtyczc
        5
    Jtyczc   32 天前
    每天学 1 小时,也是学。
    每天学 4 个小时,也是学。
    每天学 10 个小时,也是学。

    无他,熟能生巧。
    jeeyong
        6
    jeeyong   32 天前
    有效编程时间 > 800 小时
    wht0522
        7
    wht0522   32 天前
    找个不切图的前端工作 或者让设计用蓝湖这类的工具 能一键导出切图 布局 flex
    f056917
        8
    f056917   32 天前
    我都好久没切图了,想切 UI 还不让我切。UI 布局就把每个模块分散,组成一个整体
    darknoll
        9
    darknoll   32 天前
    你还有 UI 图,我这都是要自己设计 UI,然后再实现
    justin2018
        10
    justin2018   32 天前
    切多了 就会了~ ~

    当初我一个月切了 15 个左右~~ 不会就多做~~ 熟能生巧
    hijoker
        11
    hijoker   32 天前   ❤️ 1
    作为后端一直没太明白切图是啥意思
    就是用 CSS 写出 UI 设计的效果?
    TimPeake
        12
    TimPeake   32 天前
    页面无非就是嵌套、绝对 /相对定位、行布局、列布局 等这几几种模式组成啊 。
    外层组件往里嵌套就行了
    rodrick
        13
    rodrick   32 天前
    蓝湖解千愁 css 这玩意就这样 不太像 js 有那么明确的路线和逻辑性 你这一年一共切过多少图了
    ppdudu
        14
    ppdudu   32 天前
    这就像玩游戏一样,CSGO 2W 个小时真实游戏时间,你也会很厉害,
    多切图,切的多自然就厉害了
    yzqtdu
        15
    yzqtdu   32 天前
    粗糙的比喻。HTML 骨架,CSS 是血肉,切图之前 HTML 的结构要整好,理解盒模型和 position 能解决大部分问题。
    另外在浏览网页的时候可以多想想,别人是如何实现某种效果的,打开开发者工具验证下。布局套路不多,掌握常用的再慢慢熟练就有信心了。
    han3sui
        16
    han3sui   32 天前 via iPhone
    切图不都是 UI 的事情吗,蓝湖复制粘贴
    ByZHkc3
        17
    ByZHkc3   32 天前
    感情哥们你是光学不练啊,不练的话你一辈子都这样的,学再多也没啥用
    ljpCN
        18
    ljpCN   32 天前
    首先切图难道不是只是把一些元素切成 svg 或者 png 这样的静态资源吗?如果你是要学习 css 布局,推荐 http://zh.learnlayout.com/
    en20
        19
    en20   32 天前
    切图是最无聊的,不用带脑子,一天两千行代码,对设计稿眼睛还巨累.

    布局不会我猜你可能没有掌握全常用 css 效果,flex,absolute,float 这些都从头过一遍吧
    murmur
        20
    murmur   32 天前
    切图不会就是公式记不住(不会套路),不会分解设计图,有了 flex 布局切图随便做好吧,谁知道以前 table 的苦,谁知道以前还要 8 点法做圆角
    cczeng
        21
    cczeng   32 天前
    先练好基础功(重)!其次不断实践(重),举一反三。例如一个 animation, 可以用很多种不同的方法实现,对比优缺点。布局同理,block float 能实现,flex 也能实现,grid 也可以实现,顺便了解一下 bootstrap 的网格设计。碰到没思路的,看看其他现成的一样的安利,直接看结构和样式就好了。
    IGJacklove
        22
    IGJacklove   32 天前
    建议去看下阮一峰的 flex 布局,看完之后前端布局随便玩
    iwh718
        23
    iwh718   32 天前 via iPhone
    建议深入学一下 dom 启蒙 我看完这个后 知道了 css js html 的关系 后面就基本上没有啥障碍了
    k1995
        24
    k1995   32 天前   ❤️ 1
    zhuyw2006
        25
    zhuyw2006   31 天前
    @XCFOX +1
    BaiLinfeng
        26
    BaiLinfeng   31 天前
    @darknoll 没有 UI,不知道东家去哪里扒的 html 下载到本地的静态页面,看着样子来写一个一样的出来。
    BaiLinfeng
        27
    BaiLinfeng   31 天前
    @yzqtdu 我就是 html 骨架写不好,几个盒子套下来,直接就晕了,找不到北了,发现不出效果我就会一直无限嵌套子,就乱套了,心就烦躁,思路直接就没了,整个人都不好了。盒模型理解的不够透彻,一直云里雾里,特别是内外边距到现在理解的都不透彻,行内元素是没有内外边距的吗?只要块级才有?特备是遇到一个盒子里面有图片有文字还加上布局,我直接就怀疑人生了。
    jacksonD
        28
    jacksonD   31 天前 via iPhone
    我一个后端,现在天天搞前端的东西,小程序,App,还好没有 ui,想做啥样做啥样,随心所欲!
    BaiLinfeng
        29
    BaiLinfeng   31 天前
    @jacksonD APP 都做了?全栈啊,大佬,app 用啥写的。
    EminemW
        30
    EminemW   31 天前
    先把页面按区域切成不同大块,然后大块里面再继续切成若干小块
    flawless
        31
    flawless   31 天前
    先构想整个页面的设计,把整体页面骨架搭起来,再专注一个模块构想出设计,再把这个模块页面搭起来,对于题主的疑惑,要么是写少了,要么是 CSS 掌握的不够。
    jacksonD
        32
    jacksonD   30 天前 via iPhone
    @BaiLinfeng 现在这种跨平台好像挺多的,我用的 uniapp
    darknoll
        33
    darknoll   30 天前
    @BaiLinfeng 那你这个叫啥切图,切图是指有设计稿
    JinChaoLee
        34
    JinChaoLee   30 天前
    前端为啥要切图啊?这不都是设计师要干的事吗?我干了 5 年前端,从来没有切过图,表示一点点都不会。
    这跟选择的公司有关吧,稍微团队健全一点的,都不至于要前端切图。这本来就不属于前端的工作范畴好吧。
    Yjhenan
        35
    Yjhenan   30 天前
    自学过来人说下,这个还是得多写,找个视频跟着写就行,纯静态页面的那种,针对性练习下,不能急,一定得自己手动敲。
    no1xsyzy
        36
    no1xsyzy   30 天前
    @JinChaoLee 切图是指设计稿变 CSS 的过程,而不是把图片切成多份的意思,似乎是旧的叫法传承下来的,最近才知道
    BaiLinfeng
        37
    BaiLinfeng   28 天前
    @flawless 很多时候不知道该部该套一个盒子,还是直接就写内容了。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4594 人在线   最高记录 5268   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:13 · PVG 15:13 · LAX 23:13 · JFK 02:13
    ♥ Do have faith in what you're doing.