手把手教你建立个人网站-DIV和CSS那些不可告人的事儿_html/css_WEB-ITnose

本文讲述了一个静态网站的设计到重构到架设全部流程，还讲述了一个蛋疼设计师的诙dan谐teng日常，嘛，表在意后面这一句就是了。

据说，标题要长。。。

哇哈哈，亲爱哒小伙伴们我胡汉三又回来了~~~

几天没见，大家想我没？嗯没事你们可以保持沉默。反正我就当想了，呵呵，呵呵呵呵

好了好了，说正经的，看到这么多小伙伴喜欢前两篇文章，于是呢，打算把这个系列做的丰满一些，嗯，有容X大，你懂的，嘿嘿嘿，男童鞋表流口水。艾玛又不正经了，说主题说主题，其实本来打算写个4到5篇就结束的，不过嘛，既然大家有需求，那就写详细点。大家也看到了，标题变成主线剧情，也就是说，还有支线剧情，还有番外篇，总的来说就是把相关的东西讲细致明白点，以感谢大家的支持。OK，不废话了，开始今天的主题，DIV和CSS之间那些不可告人的事儿。

呐，上一章咱们搞定了咱们网站的设计，手头有一张网站设计图了，现在呢，就是切图的时候了。

既然咱这文章是面向设计师的，那上一篇网站设计篇就简单点讲也木有问题。但是这一篇前端知识就不能简单讲了，很多小伙伴需要了解学习这方面的知识。所以今天呢，咱们先来讲讲网页的基本构成，然后搞清楚DIV+CSS到底是个什么鬼。

一、网页基本结构

说起网页的代码，很多小伙伴估计都看过一些专业的书籍，然后被一些专业的字眼弄得晕头转向的。所以咱也不给扯那些专业的东西，下面我给你列一个基本的框架，你写每个网页都要有的基本的东西：

以上就是每次都要用到的基本结构，每一个包起来的部分叫做标签，嗯，这个不用搞太明白，想明白标签和每个标签含义的童鞋可以到w3school去参考学习，或者期待本系列文章的支线剧情前端知识篇。

二、DIV+CSS是什么鬼？

实际上呢，我也不知道到底是什么鬼。

哦，这位盆友，请听我讲完，来放下屠刀立地成佛。咳咳，这个实际上呢，应该叫做HTML+CSS，但是不知道什么时候开始就叫做DIV加CSS了，至于是谁负责这我真不知道。不过捏，原因我还是知道一点的。早期网页是用纯HTML做的，至于那是个什么情景大家自行想象，想象不出来我也没办法，请期待支线剧情之前端知识呵呵呵呵呵呵。

简单来讲，HTML代码就是网页代码，你可以把它当做是一个没穿衣服的人，当然他其实有一些又难看又难穿又古老的衣服。

所以有些负责做衣服和负责给他穿衣服的人忍不下去了，每次穿个衣服要半天是要闹哪样？穿上之后换一次要2天是要逆天？

愤怒的群众们一怒之下抛弃了那些破衣服，重新设计了一套又百变又好换又省布料的衣服---CSS

至于DIV，实际上这家伙是HTML标签里最常用的一个。因为是块级元素，而又不含其它任何属性的缘故，可以加上CSS任意发挥，所以灰常的好用。嗯，这里该揭开一个坑了，哈哈，就是为神马叫DIV+CSS而不是HTML+CSS，正如前面讲的，DIV用的很频繁，好用，然后一些外行就拿这个来指代新的网页代码标准技术。于是招聘的要求里就到处都是DIV+CSS,╮(╯▽╰)╭

三、先来试一下手吧骚年

首先呢，还是讲一下工具吧。以前很多招聘要求里写着要能够在记事本里手写代码，但是那是对前端高手来讲的，作为一个网页设计师甚至只是想做个个人网站的围观群众，还是用起方便又快捷的工具软件吧。

就像上面说的，任何可以输入的空文本文件都可以做成网页，只要把后缀名改成.html就行。所以说网页制作软件很多，代表性的有Dreamweaver、fireworks、visual studio

个人比较推荐DW，作为一个设计师你肯定有ADOBE家的软件吧，用就用一套嘛，而且也很好用不是。

FW更偏向切图，有些功能类似于现在的sketch，不过在网页编程方面还是落后于ADOBE自家的DW。

VS是专业编程软件，同样也可以制作网页，功能全体积大，单制作网页的话不是很推荐。

好的，装好DW，咱们开始撸起来。

我们先拿之前的一张图过来

还记得这个图不，嗯，推荐的类似简历的网页形式，分区设计。

现在呢，我们来按照这个分区简单的做一个网页吧。

孩子，表看了，动起手来，复制上面我发的那个基本结构代码，起个淫荡的网页名称，然后在内容区准备开始吧。

上面这张图有9个分区，所以我们要在内容区加入9个div标签，注意，div标签是成对粗现的，

是酱紫滴，表漏掉后面那个哟。至于为啥是成对的，有木有不成对的？呵呵呵请期待支线剧。。。

好吧好吧，说正题，来翠花上酸菜，哦不，上代码

用DW的童鞋写完了F12一下试试，嘿嘿，是不是跳出网页了，嗯没错，你可以看到代码在网页中实际的效果了。不过有点挫啊

这是什么鬼，这就是你要教我的网页吗？

嘿嘿，没穿衣服呢，当然不好看了，又不是美女，来咱给它穿衣服，CSS上场。

CSS有三种应用方式，外部、内部、内联，咱们在这里先简单讲，说内部样式。其他的请期待。。。别打，我给钱行不。。。请期待支线剧情。。。嘿嘿，嘿嘿嘿

好了，我们在头部插入了一段代码，这个实际上是内部样式的“容器”，我们将要写的内部样式就是写在这里面的。

下面来解释一下具体的原理，HTML标签比如div标签都是可以拥有一个名字的，这个名字叫做“类（class）”或者“id”，我们在这里就先用类。

给div起名字，嗯，就叫做box吧，记得要用英文哟，拼音也行，别指望网页能解析中文，虽然我也是这么希望的，不过渺茫啊。。。

名字起好了，下面来给这个名字附加属性，属性是放在内部样式里面的

.box{height:200px; width:100%; border:1px solid #666666; text-align:center;}

中括号里面的意思是：高度200像素；宽度百分百；边框1像素 边框类型实线边框 颜色#666666；文字对齐方式居中；

好的，加入网页

再F12一下看看，是不是不一样了，嘿嘿

当然，还是很简单，不过今天主要就是了解一下这些基本的东西了，下一篇咱们深入的去了解并实践一下。

OK，今天的内容到此结束，亲爱哒小伙伴们咱们下期再见。