当前位置:Gxlcms > html代码 > 手把手教你建立个人网站-DIV和CSS那些不可告人的事儿_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:55人阅读

本文讲述了一个静态网站的设计到重构到架设全部流程,还讲述了一个蛋疼设计师的诙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,今天的内容到此结束,亲爱哒小伙伴们咱们下期再见。

人气教程排行