Jadual Kandungan
一、网页基本结构
二、DIV+CSS是什么鬼?
Rumah hujung hadapan web html tutorial 手把手教你建立个人网站-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;}
Salin selepas log masuk

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

好的,加入网页

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

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

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

See all articles