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

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

  •  
  •   BaiLinfeng · 2020-10-24 00:20:24 +08:00 · 3837 次点击
    这是一个创建于 1251 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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