网页布局规划以及细节内容处理方法

一：想法

一般设计一个网页，拿到网页的样式图片，先理清楚布局结构,再写代码尤为重要，我们可以从下面几个角度来逐步分析问题：

1.先确定页面的版心，测量它的宽，一般不用设计长度，让版心居中。

2.分析页面中的行模块，以及每个行模块中的列模块

一个复杂的事物事情，如果我们直接去想的话，脑力有限，不一定能完成。这个时候我们就要把问题简单化，分成一小块，一步步在完成。所以在分析页面的时候，我们可以将页面进行模块化，比如：设计网页的主体部分，需要考虑怎么样划分模块，头部和主题body部分不一样，需要单独拿出来设计。

3.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置

就比如上面说的，主体头部。紧挨着两个模块，都需要使用浮动，具体左浮动还是右浮动，按情况考虑。这里主要的就是，一个大盒子里面模块浮动，需要做到一浮动，便要都浮动，不然会出现错位的情况。

二：遇到的问题和解决

就比如PHP基础视频部分，首先要确定总的设计思路，盒子划分和整体布局；这个界面主要可以分为两个模块，左边的预览界面和右边的课表界面，盒子和盒子之间，采用浮动，左边是可以设计ul的无序列表，右边的课程盒子，可以继续划分，成我的课表的h2盒子和ul标签盒子以及a的盒子，将h2转化为块级元素就可以给他设计背景颜色，设置盒子长宽高等。最后再将版心区间插入背景图片，设计剧中设计的大概思路就出来了。之后只要解决一些小的问题，比如说量出边边缘和文字的区间设置ul li 的上边距和左边距，用margin设计就好；要把li横着摆放的话，只需要摄制li标签左浮动就好；像设计”全部课程“这个模块，它有蓝色的边框，但是全部课程又是一个链接，我们就需要把a链也转为块元素再给它设计边框；在一些行内元素p，它的文字居中就是以浏览器总宽的标准来居中的，使用text-align: center;就可以做到，若在一个盒子里面的文字居中就要设置它的行高和盒子一样高，在设计文字水平居中，才能做到文字居中；如果我们需要插入一个图片，放在一个盒子里面，有时候图片会大于盒子，这个时候我们就可以，将图片的宽度设置为100%，图片就会自己改变比例完美放进盒子里面了的；最后一点就是有时候我们设计padding时候会撑大盒子，只要把盒子原先的宽度减去padding值就可以恢复原本的样子了