목차
一、网页基本结构
二、DIV+CSS是什么鬼?
웹 프론트엔드 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 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? 뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

See all articles