目录
一、网页基本结构
二、DIV+CSS是什么鬼?
首页 web前端 html教程 手把手教你建立个人网站-DIV和CSS那些不可告人的事儿_html/css_WEB-ITnose

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

Jun 21, 2016 am 08:50 AM

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

< datalist>的目的是什么。 元素? < datalist>的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

> gt;的目的是什么 元素? > gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

我如何使用html5< time> 元素以语义表示日期和时间? 我如何使用html5< time> 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

< meter>的目的是什么。 元素? < meter>的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

See all articles