简书的css排版,浅谈前端（WEB）排版

我相信很多和我一样的初学者在练习排版的时候都会遇到很多相似的问题：

1：排版没有思路，不知道用什么标签。

2：不知道先从那里下手，不知道怎么嵌套盒子，不知道怎么布局。

3：又或者做了开头突然没有了思路等等问题。 首先作为一名初学者，前期的基础很重要，希望对正在努力前进的我们有所帮助。

一、使用样式的种类和名字的规范 id和class应该如何使用 在我们使用div+css排版的时候，每一个div我们都会给他一个样式，而样式有两种一种是id一种是class。有时候无论我们使用哪一种作为标志都一样可以实现页面的css样式控制。但是为什么会出现id和class这两种呢？ 其实在一个网页里面我们可以做一个比喻：body我们可以认为是一个学校，id我们可以认为是一个班级，class我们可以认为是一个人。那么在同一个学校里面，班级是不能重复的而我们每一个人的名字有可能是同名的。

所以在一个网页里面，一个id只能出现一次，一个class可以出现多次。而id的权限比class的权限要高，所以我们可以把一些不需要复制重复的div使用id来表示把一些可以重复用到的样式使用class来表示。

例如一个网页只有一个头部，中部，底部。所以这三个部分我们可以使用id。有一些博客中间部分有分为左右，这一些板块在我们网页里面一般是不需要重复的，所以我们使用id来为他定义，而每一个板块里面的内容有时候是可以重复使用的，所以我们使用class为他定义。 有时候会有人问，如果我们全部单独使用一个也可以实现功能，为什么我们不单纯使用id和class呢？这个是因为如果全部使用id的时候，我们网页的JS和PHP的函数调用都是使用到id的，如果我们在css样式就占用了那程序员会非常麻烦，如果全部使用class的时候可能会因为权限不够而在同一个层里面的没有标志的元素例如ul，li，a等的会收到外面一层的样式影响到这样导致要要多写比较多的代码。

id和class应该如何起名？ 这个名字是可以随自己喜欢来起名，所以有一些人使用英文，拼音或者乱打几个字母。虽然说这样子是可以的，但是会导致自己和别人在后期的修改网站非常麻烦，就因找一个标签也要头晕了。

我个人起名字是按照层次来起，下面举个例子： 例如头部我使用了head这个名字，然后头部可以分为存放logo和存放导航条两部分。这两个部分我就会使用head_1、head_2来表示，然后在存放logo的部分有可能分为左右一边是logo一边是广告或者搜索栏，我就会起名为：head_1_left、head_1_right来表示。

这样子的css代码有时候我们在修改也无需翻到html页面看，直接按照样式的名字就可以看出来了。

二、我们做好一个网页有时有不同人做出来的大小都不一样，然而这个我们需要怎么解决呢？例如一个网页的导航条，如果是一个春色导航条，我们在排版上有3种做法。

1、把设计图上整整一块导航条切图下来做背景。

2、切一个像素进行平铺。

3、直接使用颜色做背景。 这三种做法效果都是一样，但最节省地方是第三种。所以我们可以明白到做一个网页能把效果做出来并且做得最小的才是最好的。所以我们要注意：能用颜色的用颜色，不能用颜色的用平铺的用平铺，最后才考虑用图片。