怎么提高我的静态网页写作水平

[BaiLinfeng]

怎么提高我的静态网页写作水平，学习前端也有一年半载了，但是我感觉 js 比 html 理解起来更容易上手，静态网页切图布局我看到心里都慌的很，盒子始终摆放不好想要的效果，现在心里慌的一批。模仿小米的官网网站开头的 nav 导航部分都下不下去了，都要各种写好久甚至效果都出不来。

[CallMeReznov]

LZ 要先提高自己排版水平

[BaiLinfeng]

@CallMeReznov 我也想啊，写的时候心里都在想分几个板块，几个区域来写，正写的时候直接就不出效果乱套了。

[chanchan]

grid 布局 flex 布局 CSS 懦夫克星!

[murmur]

模仿不行就开调试工具抄嘛，一个一个样式抄上去，看着你抄一条样式变一点，慢慢就懂了

[IGJacklove]

先补一下基本功，建议看一下阮一峰的 flex 布局教程，通俗易懂，看完前端布局基本随便玩。

[dream4ever]

有时间的话，自己写写一些常见的布局，总结成套路，真正要用的时候，才能迅速地用到。台上一分钟，台下十年功啊。

[Liam1997]

像极了刚学前端时候的我。。。其实完全不用怕，学好 JavaScript 找份工作，然后工作中会实战接触到各类项目，自然就会了。

[BaiLinfeng]

@YeomanLi 面试会问到布局啊，这就需要阐述清楚等等

[BaiLinfeng]

@IGJacklove 我看了 flex 的 ruanyifeng 写的，还是记不住。

[BaiLinfeng]

@murmur 难受啊

[murmur]

@BaiLinfeng flex 布局解决的是（多个）定宽(定高)配合（若干个）浮动尺寸元素的大小和位置问题，以及间距、内部元素的对齐方式

所以你应该学的是如何拆解布局，从大到小，从内到外

比如你说的小米官网为例，首先看到的不是 nav，应该是页面整体是主体居中，两边留白填充灰色底色的设计，所以你第一个学的应该是怎么写这个东西

然后小米的 nav 并不是等宽，这就是 float，不适合 flex，右边的搜索框一样

[whisky221]

被逼的少了

我哪会 CSS 几乎不会，直接从一个成熟的电商设计图开始，预编译期也没用，单纯就是为了实现样式堆 CSS，疯狂痛苦一礼拜，反复重写
不停的看别人的样式代码

一礼拜就肉眼可见的进步，不过 CSS 这东西真的可以好深，虽然如今样式都做得出来，总是在担心自己用的不是最好的写法 /方法

还是要多写多看多上网吧

[BaiLinfeng]

@murmur 我是拆分了后先写的 nav，当然 nav 是导航我使用的是 ul>li，你是说使用浮动左右就分开了，但是每个 nav 导航是有间隔的尼，咋操作

[BaiLinfeng]

@whisky221 每次写一半就写不下去废了

[BaiLinfeng]

@murmur flex 布局解决的是（多个）定宽(定高)配合（若干个）浮动尺寸元素的大小和位置问题，以及间距、内部元素的对齐方式，这句话没理解。

[murmur]

@BaiLinfeng 你理解成表格就可以了，比如一个表格有 3 列固定宽度，剩下的按比例（当然其他更复杂规则也有）平分剩下的宽度

[murmur]

@BaiLinfeng 对啊，所以说元素有 padding 和 margin，flex 布局也有 space around 和 space between

[BaiLinfeng]

@murmur fiex 的 space around 和 space between 都是等宽平分的感觉在这里不适应，nav 是分左右导航的，何况每个 nav 菜单字数都是不一样的。

[BaiLinfeng]

@murmur 你的意思只有靠内外边距来挤压每个 nav 菜单的间隙了吗？

[murmur]

@BaiLinfeng 怎么能说积压呢，每个 li 都加内边距或者外边距不就撑开了，如果是挤压看你的 box-sizing 是什么，不懂就去看盒模型