这是一个创建于 1555 天前的主题，其中的信息可能已经有所发展或是发生改变。
怎么提高我的静态网页写作水平，学习前端也有一年半载了，但是我感觉 js 比 html 理解起来更容易上手，静态网页切图布局我看到心里都慌的很，盒子始终摆放不好想要的效果，现在心里慌的一批。模仿小米的官网网站开头的 nav 导航部分都下不下去了，都要各种写好久甚至效果都出不来。
 |
1
CallMeReznov 2020-09-19 20:15:11 +08:00  1
LZ 要先提高自己排版水平
|
 |
2
BaiLinfeng OP @CallMeReznov 我也想啊，写的时候心里都在想分几个板块，几个区域来写，正写的时候直接就不出效果乱套了。
|
 |
3
chanchan 2020-09-19 21:17:35 +08:00
grid 布局 flex 布局 CSS 懦夫克星!
|
 |
4
murmur 2020-09-19 21:32:12 +08:00
模仿不行就开调试工具抄嘛，一个一个样式抄上去，看着你抄一条样式变一点，慢慢就懂了
|
 |
5
IGJacklove 2020-09-19 21:55:37 +08:00 via Android
先补一下基本功，建议看一下阮一峰的 flex 布局教程，通俗易懂，看完前端布局基本随便玩。
|
 |
6
dream4ever 2020-09-19 22:44:17 +08:00
有时间的话，自己写写一些常见的布局，总结成套路，真正要用的时候，才能迅速地用到。台上一分钟，台下十年功啊。
|
 |
7
Liam1997 2020-09-19 22:49:54 +08:00
像极了刚学前端时候的我。。。其实完全不用怕，学好 JavaScript 找份工作，然后工作中会实战接触到各类项目，自然就会了。
|
|
8
BaiLinfeng OP @YeomanLi 面试会问到布局啊，这就需要阐述清楚等等
|
|
9
BaiLinfeng OP @IGJacklove 我看了 flex 的 ruanyifeng 写的，还是记不住。
|
|
10
BaiLinfeng OP @murmur 难受啊
|
|
11
murmur 2020-09-20 14:13:15 +08:00
@BaiLinfeng flex 布局解决的是（多个）定宽(定高)配合（若干个）浮动尺寸元素的大小和位置问题，以及间距、内部元素的对齐方式
所以你应该学的是如何拆解布局，从大到小，从内到外 比如你说的小米官网为例，首先看到的不是 nav，应该是页面整体是主体居中，两边留白填充灰色底色的设计，所以你第一个学的应该是怎么写这个东西 然后小米的 nav 并不是等宽，这就是 float，不适合 flex，右边的搜索框一样 |
 |
12
whisky221 2020-09-20 19:36:14 +08:00
被逼的少了
我哪会 CSS 几乎不会，直接从一个成熟的电商设计图开始，预编译期也没用，单纯就是为了实现样式堆 CSS，疯狂痛苦一礼拜，反复重写 不停的看别人的样式代码 一礼拜就肉眼可见的进步，不过 CSS 这东西真的可以好深，虽然如今样式都做得出来，总是在担心自己用的不是最好的写法 /方法 还是要多写多看多上网吧 |
|
13
BaiLinfeng OP @murmur 我是拆分了后先写的 nav，当然 nav 是导航我使用的是 ul>li，你是说使用浮动左右就分开了，但是每个 nav 导航是有间隔的尼，咋操作
|
|
14
BaiLinfeng OP @whisky221 每次写一半就写不下去废了
|
|
15
BaiLinfeng OP @murmur flex 布局解决的是（多个）定宽(定高)配合（若干个）浮动尺寸元素的大小和位置问题，以及间距、内部元素的对齐方式，这句话没理解。
|
|
16
murmur 2020-09-22 19:59:43 +08:00
@BaiLinfeng 你理解成表格就可以了，比如一个表格有 3 列固定宽度，剩下的按比例（当然其他更复杂规则也有）平分剩下的宽度
|
|
17
murmur 2020-09-22 20:00:15 +08:00
@BaiLinfeng 对啊，所以说元素有 padding 和 margin，flex 布局也有 space around 和 space between
|
|
18
BaiLinfeng OP @murmur fiex 的 space around 和 space between 都是等宽平分的感觉在这里不适应，nav 是分左右导航的，何况每个 nav 菜单字数都是不一样的。
|
|
19
BaiLinfeng OP @murmur 你的意思只有靠内外边距来挤压每个 nav 菜单的间隙了吗？
|
|
20
murmur 2020-09-22 21:07:52 +08:00
@BaiLinfeng 怎么能说积压呢，每个 li 都加内边距或者外边距不就撑开了，如果是挤压看你的 box-sizing 是什么，不懂就去看盒模型
|
|
21
BaiLinfeng OP @murmur 我在写 padding 和 margin 的时候都怕被撑大了，先是无条件加上 C3 的盒模型 box-sizing
|
Select Language