DIV网页排版注意的五点

DIV+CSS排版是现在网站建设中网页排版常用的排版方式，但是在网页排版过程中是需要有好多注意的东西的，在学校里面，培训机构里面都有很多课程是前端切图这一方面的，简单来说就是学习div+css网页排版。有很多人经过这一轮的学习之后就发现自己对排版这一方面非常的熟悉甚至说自己的div+css的高手。其实真正说要懂得一个网页排版需要注意的一些问题是什么呢?是不是在电脑上面看到自己排版出来的页面就真的是一个成功的网页了吗?下面我说一下我自己在网页排版上面会注意的一些事情：第一、DIV网页排版要注意使用样式的种类和名字的规范。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页面看，直接按照样式的名字就可以看出来了。第二、DIV排版中要合理使用标签，有助于网站的收录和SEO优化我们举一个例子，有时候一个新闻内容板块的html里面，很多人都会直接在div中间写上文字，然后给这一个div进行样式的控制。虽然这样子是完全可以实现功能，但是在搜索引擎眼中并不认为这个就是一个正文内容而是代码 之类的，所以我们在写这个的时候记住合理使用p标签，在我们合理使用标签的时候一方面可以让人感觉到你是用心来做这个网页的排版，更重要的是让这个网站后期 的优化事半功倍。第三、DIV排版过程中代码要有层次在我自己写代码的时候是非常注意这一方面的事情，因为一个页面做出来可以给客户看得舒服也能给自己看得舒服。我自己比较喜欢使用同级换行，下级 换行退格的方法。例如一个网页的头部可以分为上部分和导航条部分，然后上部分分为左右。我们可以和容易看出，上下部分这两个div是同级的，而左右的 div是下级的，至于规划这一方面就是css的代码放到css文件里面，js代码放到js代码里面，而不实用嵌入式和捆绑式的书写方法。第四、DIV排版的时候要注意到后台的调用我们在排版一个页面的时候，我们使用无数个样式一个一个规定每一个div或者li的样式都是可以的，效果看上去也是一样但是这样是成功的代码那?我 们知道做出来的页面并非这样就放上网站上面运行，而是把页面做成模版加入后台调用标签进行调用。例如一个文章列表(ul)里面的非常多个文章题目 (li)。我们知道每一个文章题目都是从后台调用出来的，所以这些li是需要循环使用，如果我们每一个li都有一个不同的class的话，相信这个循环调 用是让程序员非常头痛的事情。所以在我们做这个的时候尽量使用统一样式。如果导航条的每个项目有一条竖线隔开的情况，我们一般把这条竖线放到每个li的左 边，然后给第一个首页的li加一个样式把这条竖线去掉，因为这样就可以顺利让后面的栏目进行后台调用。而首页是每一个网站都需要的所以这个做成静态也没有 关系。而我们网页上面的图片也有两种，一个是样式图片一个是数据图片。样式图片指的是不需要变动的如导航条背景(我们平时在浏览器上无法保存下来的)他是 存放在css里面的，数据图片是可以随时变动的，他是从后台调用出来的如商品缩略图(我们平时在浏览器上可以保存下来的)。在我们写代码的时候要明确分辨 这些图片属于哪一种，这样才能更加专业的把一个页面排版出来。而关于logo这个有些人喜欢放在css里面有些人喜欢放在html里面，这个就根据自己需 要了。第五、DIV排版是要注意网页图片大小我们做好一个网页有时有不同人做出来的大小都不一样，然而这个我们需要怎么解决呢?例如一个网页的导航条，如果是一个春色导航条，我们在排版上有3 种做法。1、把设计图上整整一块导航条切图下来做背景。2、切一个像素进行平铺。3、直接使用颜色做背景。这三种做法效果都是一样，但最节省地方是第三 种。所以我们可以明白到做一个网页能把效果做出来并且做得最小的才是最好的。所以我们要注意：能用颜色的用颜色，不能用颜色的用平铺的用平铺，最后才考虑 用图片。有时候一张图片并不是单纯一个地方用到而是多个地方用到，所以我们就要注意到，把这个图片应用到多个地方而不是每一个地方都要切一块图片。最后我们在切图的时候也要注意到一项，并不是一个图片大片切下来就可以，我们必须要精准切到最边，尽量把图片的大小缩小到最小。总结：上面的一些总结是彭健自己在网页的排版中一步一步总结出来的。当我们去做一个网页前端工程师的时候，你单纯懂得代码是可以，但是当我们要做一个兼顾 网站运营的网页前端工程师的时候，我们还必须兼顾到程序员看到你的排版的感受和网站对搜索引擎优化的难易。希望大家看完这一片文章能够回复一两话算给彭健一个支持哦，写这么长文章不容易。