gimp 去掉一个颜色的背景_【例】一个标准完整的Html网页版面制作【213】

图0

本例参考了网上的例子，唯一不一样的是，我这里的操作是一步一步讲解，网上仅是源码。

一、我们先创建一张空白的网页，网页要自适应手机。

图1

二、我们再创建网页的头部。

图2

图3

三、做出来的网页头部太丑了，我们要去掉盒子与浏览器的间隙，还有给头部加内部距离。

图4

图5

四、给网页头部添加一些内容。

图6

图7

五、接下来开始做导航条了。

图8

图9

六、发现没，导航条居然看不见，没有东西在里面自然是看不见的，我们加三个链接吧。

图10

图11

七、这回是看见了，不过样式太丑，我们改改样式。

图12

图13

八、加上内部距离，就好看了许多，即然是链接，我们加点动态吧，当鼠标在链接上面时，链接块变色。

图14

图15

九、开始做网页内容，网页内容我分为三块，左右两边是侧栏，中间是主要内容。

图16

图17

十、我想让它横着排，它却是竖着排，改改各个块的样式。

图18

图19

十一、给主体的各个块加点内容。

图20

图21

十二、内容是有了，但你会发现各块之间没有间隙，贴得太近了，我们改一下样式，加个内部距离。

图22

图23

十三、距离是有了，但有一个侧栏跑到了另一行，怎么回事？原来padding是会改变盒子的整体宽度，我们原本是100%，现在多了padding的宽度，自然就换行了，解决一下吧。

图24

图25

十四、这回终于在一行了，接下来可以做网页底部了。

图26

图27

十五、改改样式，让底部好看一点。

图28

图29

十六，这个时候，网页的整体版面就完成了，再补充一个小内容，让网页浏览器在小于600像素宽的时候，主体内容的三个块由横变竖。

图30

图31

---

 Document

我是网页的头部

这里一般放网站名logo和banner广告等

导航项 导航项 导航项

我是侧栏

我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏

我是主内容

我是美女我是美女我是美女我是美女我是美女我是美女我是美女我是美女 我是美女我是美女我是美女我是美女我是美女我是美女我是美女我是美女

我是侧栏

我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏我是侧栏

底部，一般声明版权，友情链接或是备案信息等等。