会 spring 一把梭做后端，发现想做一些有意思的项目都很难躲过前端这件工作，包括但不限于 APP 和 Web ，会 JS ，但 CSS 几乎无法理解。
文档我也看过，Vue 之类的也会用（但仅仅是那种光秃秃的页面放个按钮或者表单响应后端接口），也照着 MDN 那类的网站一路学习下来，但还是陷入了“这个元素放在这里要如何实现，要用什么布局”以及“这个文字怎么靠上/下/没居中了，该怎么调整”的怪圈，也尝试过 AI ，但感觉没有一个很好的思路很难做到自己满意，有些迷茫。
不知道有没有其他人跟我一样从这个状态走过来，有没有什么突破点？
 |
1
yvyvyv 2 天前  1
纯前端 Css 部分 太适合 ai 了，把需求讲明白 甚至可以把原型图给他，都能生成代码的。
|
 |
2
libasten 2 天前 1
正常，前端要做的好看，得有“艺术设计”成分在里面了，一般程序员也就用各种组件框架搭搭。
|
 |
4
qwx OP @libasten 我组件框架会用，也尝试过 semi ，element ，甚至 figma ，但总感觉我是那种“组件怎么出现在它该出现的位置”都不会，随便缩放一下页面直接就垮了😭
|
 |
5
shadowyue 2 天前 3
你焦虑啥，你一行 css 不写，先把功能实现了，
然后你就发现自己的项目反正没人用，幸好没花时间写 css🐶 |
 |
6
evan1 2 天前 2
从 0 开始写确实不好写，还是先用 AI 生成一下再改吧。
CSS 要想用的好就得多用，背背背。 布局的话可以先给所有元素都加上边框便于理解。先写出页面框架，然后再慢慢填内容。 最后!important 是最好用的写法！ |
|
7
qwx OP @shadowyue 我的情况还不大一样，起码这系统写出来公司还是要用的，我也不是专职开发但很多工具自己写可以造福大家就是了，开源我是不敢的，只敢闭门造车，我怕人家笑话我的代码是一坨~
|
|
8
qwx OP @evan1 你还真别说，我生成出来的代码雀食用!important 改，爽，但是就是自己心里很清楚这么操作会被喷死 hhh
我看了很多教程都说什么用 flex 布局啊用什么绝对布局啊，但好像没人说这些玩意可以组合起来然后做出一个登录框，我去看别人设计的登录框直接给我惊讶了，说布局还能这么用，喵喵喵了 |
|
9
yvyvyv 2 天前 1
做产品有原型图吧，而且产品原型图设计也得是参照框架来的。根据图上的 px 提供给 cursor 或者 trae 呗。改动也同理啊 你要把什么控件网上偏移多少个像素这些都可以用文字描述给它生成吧。感觉楼主跟 ai 沟通的不太对， 最好不要反问 ai "这个文字怎么靠上/下/没居中了"。要跟他说你要什么"这个文字我要在 xxx 模块，外边距 xxx ，靠上/下/居中"
|
|
10
qwx OP @yvyvyv 有可能，我再去研究研究 AI ，至于原型设计是没有的，我的艺术细菌少的一塌糊涂，小时候画眼睛都画成猫猫的那种眼瞳，周围人都说我的观察能力和艺术能力已经完蛋了 hhh
|
 |
11
shintendo 2 天前 1
现代 CSS 已经友好很多了，把 flex 背熟就可以解决 80%的问题
|
 |
13
qhd1988 2 天前 1
你们有 ui 吗?没有说个🍗
|
 |
15
DL9412 2 天前 2
1. 找一个合适的组件库，比如 vue 占统治地位的 element ui ，大部分布局以及一致性问题就解决了
2. 活用 position: relative 里面套 absolute ，以及 flex ，能搞定绝大多数布局。总之就是大框套小框，剩下的交给 margin 3. 善用 f12 ，你只需要记得你想调的 css 大致叫什么，剩下的交给控制台自动补全。属性可选值都会给你列一排，方向键一路向下现选现看效果，总有一个适合你 |
|
16
yvyvyv 2 天前 1
感觉 op 侧重点有点跑偏了，不是 css 的问题，你自己玩项目画前端页面，直接用前端代码做没有参照，想法很容易变的，可能现在想这个模块在左边比较好，一会又想居中偏下比较好。这要是在项目里这一动就等于动了需求，就算是前端搞起来这么改也要骂人的。感觉 op 得先定个稿，没有原型图也得有个效果图之类的，或者现成的项目当作参照。
照着做按钮位置、模块分布就一摸一样的来。定稿的时候随便变。用代码写的时候就别改了 |
 |
19
asdblue 2 天前 1
我也是，css 看到就头大，其他都好说
|
 |
20
yangth 2 天前 via Android 1
把页面想象成一个封闭空间，这个空间的上面和左边是一块磁铁，中间的盒子会被吸到上面和左边，你要做的就是操作 css ，各种姿势往上堆叠盒子就行了
|
 |
21
AEDaydreamer 2 天前 1
flex 布局学会，整个 tailwind css ，dribbble 和 behance 上模仿设计，figma 上出个 wirefram 草图，最后直接开撸。
|
|
23
qwx OP @AEDaydreamer 这就去学习，好多词没听过 Orz
|
 |
24
c2boy 2 天前 1
把 css 基础打牢就行了，看看 css 世界这本书
|
 |
26
williamherry 2 天前 1
@qwx #4 自适应一般都是框架提供的，也没必要纯 CSS 实现，可以选一个前端框架深入研究，推荐 Bootstrap
|
|
28
qwx OP |
 |
29
1183460943 2 天前 1
把 css 最基础的东西搞明白， 基础样式， 盒模型，flex 布局， 定位， 能应付百分之九十场景
|
 |
30
MRG0 2 天前 1
我有后端恐惧症，不会 java
|
 |
31
mzfbwu 2 天前 1
请帮我调整这个表格风格，采用卡片式，参照推特的推文卡片，现代化，立体精致，简约美观，圆角，柔和的阴影效果，平滑的点击与 hover 动画效果，增加图标与文字的间距，调整底部边框，巴拉巴拉。反正我现在就是靠这些提示词搞前端的，自己也写，但是 ai 已经把我养懒了。
|
|
32
qwx OP @1183460943 你说的这些基础我都会，但现在放在眼前一个居中需求我依然会儍，┭┮﹏┭┮
@MRG0 java 一把梭，我建议刷一些“模拟”的算法题，他会让你用程序实现你的思维，之后就不难了。 @mzfbwu 好词，偷了。 |
 |
34
v2ye 2 天前 1
我原来也是后端，现在是前端。调样式确实是比较繁琐。你可以写的时候直接给 div 定义一个背景色，醒目的红、蓝色都行。然后在里面规划好每个块大致要放什么，也是给一个背景色。这样应该能够帮助你理解里面的属性。
|
 |
35
yangzzzzzz 2 天前 1
css 别想着按规范写，不然会很累，有了设计稿 别管怎么写 最后样式能实现就行了
|
|
36
qwx OP @MRG0 他不是算法，他是让你用程序解决一些现实生活的问题，然后下次你遇到类似的问题就会解决啦，反正后端也就是处理数据，你的思维怎么处理就怎么写程序完事。
@v2ye 好手段，偷了。 @yangzzzzzz 确实，我这本质上还是焦虑 |
 |
37
NoManPlay 2 天前 1
css 其实蛮多奇技淫巧，尤其很多样式不好实现不如直接用 before/after
现在浏览器样式基本 flex/grid 布局解决大部分布局问题，剩下的再精修 |
 |
38
q2677855779 2 天前 1
css 常用的很简单的，学会 flex 和定位了，百分之 99 的页面都能搞定，剩下的问 AI 会给你提示该用什么的~
|
|
39
q2677855779 2 天前 1
如何觉得布局看不懂，加上这一行代码，给你画上条条框框了，就简单了
* { outline: 1px solid #0000ff; } https://blog.csdn.net/IAIPython/article/details/130571182 |
|
41
qwx OP |
 |
42
hadesqiao 2 天前 1
设计稿放蓝湖，直接就有样式，拿过来微调。
|
 |
43
akakidz 2 天前 1
反复学习 flex 并加以应用，建议看一下阮一峰和张鑫旭的博客中关于 flex 的技巧，你可以解决 99%的布局问题
|
 |
44
tonytonychopper 2 天前 1
真要学就看一下 flex 布局，然后找一个网站认真临摹几次
|
 |
45
cheng6563 1 天前 1
我都是<table>+ 布局的
|
 |
46
ccfly 1 天前 1
没办法 就像后端一样 你连一些关键字都不知道咋写 只能多写 遇到时候不清楚就查 这样才能写得好
|
 |
47
qwertyzzz 1 天前 1
就弄很多个 div 慢慢来
|
 |
48
ljpCN 1 天前 2
已经靠推荐这个网站让很多人入门并且后来成为一名真正的前端了： https://zh.learnlayout.com/
|
 |
49
chanChristin 1 天前 1
不改变页面分辨率不就不会变了吗，不要那么纠结自适应的问题，你可以就现在 pc 端或者手机端一端上把 css 效果做好。
|
|
50
qwx OP |
 |
51
mynameislihua 1 天前 1
系统性的学一两天差不多了
|
 |
54
liaopen123 18 小时 52 分钟前 1
以前也有恐惧，恐惧的原因是未知，公司有需求硬着头皮写了几天，发现前端简单好多，就没什么恐惧的了。
|
Select Language