这是一个创建于 1490 天前的主题，其中的信息可能已经有所发展或是发生改变。
2019 年学的前端，但是到现在布局切图都不会，看到 UI 图后，脑袋第一时间想不到一个布局的思路，我都想放弃了。不知道为什么始终理解不了布局的精髓，怎么都摆不出 UI 的效果图，时间久了严重打击了学习的积极性，该怎么办是好？我内心是很想学好的，但是就是写不出来，反而我感觉 JS 学起来比布局还熟悉，JS 是理解慢，但是逻辑一下久想通了。布局始终都摆不出自己想要的效果，心好累，年纪也不小了。
 |
1
musi 2020-10-24 00:28:36 +08:00 via iPhone
写少了，多写写就好了
|
 |
2
XCFOX 2020-10-24 00:32:40 +08:00  8
flex 就完事了。
没有什么布局是套 flex 容器解决不了的，如果有就再套一层。 |
 |
3
chenqh 2020-10-24 00:46:38 +08:00 via Android
前端有什么视频推荐吗？课程也行
|
 |
4
whisky221 2020-10-24 00:57:44 +08:00
css 是有很多学问，但是不至于这么难
楼主是转行计算机的吗？我那时候刚毕业 0 基础自学了两个月就差不多了 建议还是要多写，至于切图，现在基本上都 sketch 或者蓝湖设计帮切好了 |
 |
5
Jtyczc 2020-10-24 01:48:18 +08:00
每天学 1 小时，也是学。
每天学 4 个小时，也是学。 每天学 10 个小时，也是学。 无他，熟能生巧。 |
 |
6
jeeyong 2020-10-24 02:12:17 +08:00
有效编程时间 > 800 小时
|
 |
7
wht0522 2020-10-24 04:20:06 +08:00
找个不切图的前端工作 或者让设计用蓝湖这类的工具 能一键导出切图 布局 flex
|
 |
8
f056917 2020-10-24 09:02:38 +08:00
我都好久没切图了，想切 UI 还不让我切。UI 布局就把每个模块分散，组成一个整体
|
 |
9
darknoll 2020-10-24 09:06:43 +08:00
你还有 UI 图，我这都是要自己设计 UI，然后再实现
|
 |
10
justin2018 2020-10-24 09:06:45 +08:00
切多了 就会了~ ~
当初我一个月切了 15 个左右~~ 不会就多做~~ 熟能生巧 |
 |
11
hijoker 2020-10-24 09:27:12 +08:00 1
作为后端一直没太明白切图是啥意思
就是用 CSS 写出 UI 设计的效果? |
 |
12
TimPeake 2020-10-24 09:27:13 +08:00
页面无非就是嵌套、绝对 /相对定位、行布局、列布局 等这几几种模式组成啊 。
外层组件往里嵌套就行了 |
 |
13
rodrick 2020-10-24 09:28:27 +08:00
蓝湖解千愁 css 这玩意就这样 不太像 js 有那么明确的路线和逻辑性 你这一年一共切过多少图了
|
 |
14
ppdudu 2020-10-24 09:31:25 +08:00
这就像玩游戏一样,CSGO 2W 个小时真实游戏时间,你也会很厉害,
多切图,切的多自然就厉害了 |
 |
15
yzqtdu 2020-10-24 09:36:57 +08:00
粗糙的比喻。HTML 骨架，CSS 是血肉，切图之前 HTML 的结构要整好，理解盒模型和 position 能解决大部分问题。
另外在浏览网页的时候可以多想想，别人是如何实现某种效果的，打开开发者工具验证下。布局套路不多，掌握常用的再慢慢熟练就有信心了。 |
 |
16
han3sui 2020-10-24 09:39:21 +08:00 via iPhone
切图不都是 UI 的事情吗，蓝湖复制粘贴
|
 |
17
ByZHkc3 2020-10-24 09:44:57 +08:00
感情哥们你是光学不练啊，不练的话你一辈子都这样的，学再多也没啥用
|
 |
18
ljpCN 2020-10-24 10:05:09 +08:00
首先切图难道不是只是把一些元素切成 svg 或者 png 这样的静态资源吗？如果你是要学习 css 布局，推荐 http://zh.learnlayout.com/
|
 |
19
en20 2020-10-24 10:07:41 +08:00
切图是最无聊的,不用带脑子,一天两千行代码,对设计稿眼睛还巨累.
布局不会我猜你可能没有掌握全常用 css 效果,flex,absolute,float 这些都从头过一遍吧 |
 |
20
murmur 2020-10-24 10:26:19 +08:00
切图不会就是公式记不住（不会套路），不会分解设计图，有了 flex 布局切图随便做好吧，谁知道以前 table 的苦，谁知道以前还要 8 点法做圆角
|
 |
21
cczeng 2020-10-24 10:46:36 +08:00
先练好基础功（重）！其次不断实践（重），举一反三。例如一个 animation, 可以用很多种不同的方法实现，对比优缺点。布局同理，block float 能实现，flex 也能实现，grid 也可以实现，顺便了解一下 bootstrap 的网格设计。碰到没思路的，看看其他现成的一样的安利，直接看结构和样式就好了。
|
 |
22
IGJacklove 2020-10-24 11:10:23 +08:00
建议去看下阮一峰的 flex 布局,看完之后前端布局随便玩
|
 |
23
iwh718 2020-10-24 12:07:29 +08:00 via iPhone
建议深入学一下 dom 启蒙 我看完这个后 知道了 css js html 的关系 后面就基本上没有啥障碍了
|
 |
24
k1995 2020-10-24 12:13:58 +08:00 1
|
 |
26
BaiLinfeng OP @darknoll 没有 UI，不知道东家去哪里扒的 html 下载到本地的静态页面，看着样子来写一个一样的出来。
|
|
27
BaiLinfeng OP @yzqtdu 我就是 html 骨架写不好，几个盒子套下来，直接就晕了，找不到北了，发现不出效果我就会一直无限嵌套子，就乱套了，心就烦躁，思路直接就没了，整个人都不好了。盒模型理解的不够透彻，一直云里雾里，特别是内外边距到现在理解的都不透彻，行内元素是没有内外边距的吗？只要块级才有？特备是遇到一个盒子里面有图片有文字还加上布局，我直接就怀疑人生了。
|
 |
28
jacksonD 2020-10-24 21:24:33 +08:00 via iPhone
我一个后端，现在天天搞前端的东西，小程序，App，还好没有 ui，想做啥样做啥样，随心所欲！
|
|
29
BaiLinfeng OP @jacksonD APP 都做了？全栈啊，大佬，app 用啥写的。
|
 |
30
EminemW 2020-10-25 11:09:48 +08:00
先把页面按区域切成不同大块，然后大块里面再继续切成若干小块
|
 |
31
flawless 2020-10-25 11:37:02 +08:00
先构想整个页面的设计，把整体页面骨架搭起来，再专注一个模块构想出设计，再把这个模块页面搭起来，对于题主的疑惑，要么是写少了，要么是 CSS 掌握的不够。
|
|
32
jacksonD 2020-10-25 15:52:26 +08:00 via iPhone
@BaiLinfeng 现在这种跨平台好像挺多的，我用的 uniapp
|
|
33
darknoll 2020-10-26 08:37:43 +08:00
@BaiLinfeng 那你这个叫啥切图，切图是指有设计稿
|
 |
34
JinChaoLee 2020-10-26 09:28:52 +08:00
前端为啥要切图啊？这不都是设计师要干的事吗？我干了 5 年前端，从来没有切过图，表示一点点都不会。
这跟选择的公司有关吧，稍微团队健全一点的，都不至于要前端切图。这本来就不属于前端的工作范畴好吧。 |
 |
35
Yjhenan 2020-10-26 11:04:19 +08:00
自学过来人说下，这个还是得多写，找个视频跟着写就行，纯静态页面的那种，针对性练习下，不能急，一定得自己手动敲。
|
 |
36
no1xsyzy 2020-10-26 13:13:09 +08:00
@JinChaoLee 切图是指设计稿变 CSS 的过程，而不是把图片切成多份的意思，似乎是旧的叫法传承下来的，最近才知道
|
|
37
BaiLinfeng OP @flawless 很多时候不知道该部该套一个盒子，还是直接就写内容了。
|
Select Language