浅谈网页制作

在开发一个完整的网页之前，我们首先应该做好一些相关的准备，例如切片，布局，测量网页版心等。准备工作完成之后，我们就可以进行网页开发了。

测量网页尺寸大小的准确性可以直接影响最后网页的布局，所以尽量细心一些。

对于布局，我觉得最关键的一点是，对网页大局观的认识。

布局完成后我们就可以使用css来控制网页的样式：

对于每个网页的制作我想都有一些相同的全局样式  

例如（*{margin:0;padding:0;list-style:none等等}）一般情况下在做正式的网页开发我们一般不用*通配符因为它的权重很低，所以我们应该把网页中可能涉及到的所有元素都写出来。

（body{font-size:12px;color:#ccc;}等等）给全局的网页设置字体的大小及它的颜色。制作网页后我们可以发现网页中不同的版块中很多地方的字体及颜色不一样，那就的单独控制局部的字体和颜色了。

（a:link,a:visited{color:#ccc;text-decoration:none;}）(a:hover{color:red;text-decoration:underline;})

这是全局设置a标签的样式，当静态时候的a标签是灰色没有下划线的，当鼠标进入的时候a标签变成红色并带有下划线的，当然网页中其他地方a不同，可以进行单独的控制，且必须注意权重问题。

写完这些所有网页中都可以通用的样式后，我们就可以进行开发了。一般写完全局式样后，都必须换行，那样可以使在开发网页时格式清楚利于自己开发，且加上注释。

今天我主要想说几个方面的问题，我觉得这些是网页开发中的重点，也是一些基础知识

1. 版心居中，及其文字居中问题

2. 盒子模型

3. float，溢出

4. 相对及绝对定位

   5.html中标签的合理化使用

    6.网页中给标签的命名

第一：对于居中的问题可以分为块级元素和行内元素居中

块级元素主要使用margin：0 auto；（上下距离为0，左右距离自动）。(也可以用版心50%-div的width)

        对于行内元素的居中：对于文字的居中主要使用text-align:center;对于img的居中我们使用vertical-align:middle;

当我们要使文字和图片（图片的尺寸大小不同时）居中在一条线上是，加上这两个属性就可以搞定了；

第二：盒子模型

有了盒子模型最直观的感受是能使每一个标签看起来更加的美观：内边距:padding;外边距:margin;

例如：使用div{原div实际大小为：width:100px;height:100px;}现在我们加上padding：20px；

那么padding会把我们盒子的实际大小撑大很多，为了使盒子的大小不变我们必须在原有的宽高上减去相应的值；

div：{width:60px;height:60px;padding:20px}这样就可以和原div一样大了 ，margin的使用也是一样的。

注意：一般情况来说：增加padding的值就必须减去相应的距离，而magrin一般不用减（magrin是外边距）。

padding的书写方式：padding:20px;padding:20px 20px; padding:20px 20px 20px; padding:20px 20px 20px 20px;

有四种书写方式分别代表：（1.上下左右）（2.上下，左右）（3.上，左右，下）4.（顺时针上，右，下，左）

第三：float:浮动      说起浮动首先从布局说起：布局一般情况是标准流布局（块级元素：自上而下，内联元素：从左到右）

浮动元素属性：float:left;  float:right（它可以使块级元素和内联元素都脱离标准流）在制作网页时，配合ul li能后快速的达到想要的效果，但是float后它也会影响后面的标准流所以我们一般使用clean:both;overflow：hidden;来清除float的影响；

这里顺便说说块级元素和行内元素的转换：display:block;（行内元素转化为块级元素）

                                                                 display:inline-block;（块级元素转化为行内元素）

                                                                  display：none；（隐藏元素）

第四：定位：（分为四种：静态定位，相对定位，绝对定位，固定定位）

这里说说相对定位和绝对定位

相对定位：position：relative；（以标准流中自身为参照物，如果脱离标准流后，会保留标准流原来的位置，属于半脱离状态）

绝对定位：position：abosolute;（完全脱离标准流，参照浏览器左上角来进行定位，但这样的参照一般无意义。它的主要用途是父级相对子级绝对，这样的定位方式才有实际的意义。）

第五：html标签的合理化使用：对于这点来说举个列子

<p>和<span>：当这两个标签同时控制一行文字时：一般情况p控制重要的文字，span控制无关紧要的文字和控制单独的文字。说这个的主要意思是：当制作网页的时候尽可能的多思考，用什么样的标签来描述网页最合适。

第六：网页中的命名：当网页制作中给元素制定id或class的时候，注意一定要使用稍微规范的命名：

例如：<div class="nav_div"></div>而尽量不要使用<div class="daohang"></div>让自己养成一个良好的习惯。

             今天的分享结束，还有许多html和css的知识未涉及到例如css3，html5本人正在学习中，待整理后，会第一时间和大家分享，交流，也希望看了本人博客的朋友，给出学习意见和建议，博客中许多知识写的不好不深入，还请见谅。