div+css 웹페이지 레이아웃 디자인의 새로운 시작 (1)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

div+css 웹페이지 레이아웃 디자인의 새로운 시작 (1)

黄舟

Dec 29, 2016 pm 02:11 PM

DIV+CSS는 웹사이트 표준(또는 "WEB 표준")에서 일반적으로 사용되는 용어 중 하나입니다. div+css는 웹페이지 레이아웃 방법으로 기존 HTML 웹 디자인 언어와 다릅니다. 테이블 위치 지정 방법은 웹 페이지 콘텐츠와 프리젠테이션의 분리를 실현할 수 있습니다. XHTML은 Extensible HyperText Markup Language의 약어입니다. XHTML은 HTML을 기반으로 최적화되고 개선된 새로운 언어인 XML(Extensible Markup Language)을 기반으로 하며, 그 목적은 XML 응용 프로그램과 강력한 데이터 변환 기능을 기반으로 하는 미래 네트워크 응용 프로그램의 더 많은 요구에 적응하는 것입니다. XHTML 웹 사이트 디자인 표준에서는 테이블 위치 지정 기술이 더 이상 사용되지 않지만 DIV+CSS를 사용하여 다양한 위치 지정을 구현합니다.

이전에는 테이블 레이아웃이었습니다. . 기본적으로 더 이상 사용되지 않습니다(테이블은 데이터 표시에만 사용됨)
div는 중국어로 영역을 의미하고 CSS는 캐스케이딩 스타일 시트를 의미함을 보면 핵심은 스타일이 아닌 레이아웃임을 알 수 있습니다

I DIV를 배우기 전에는 HTML에 익숙해야 합니다. DIV+CSS는 HTML을 기반으로 배워야 합니다

그럼 이제 어떤 도구를 사용해야 할까요? 일반적으로 메모장, 즉 메모장이면 충분합니다. + 브라우저는 괜찮습니다. 서버가 필요하지 않으며 Dreamweaver cs5를 사용할 수도 있습니다. 이에 대한 팁이 있으므로 도움말 문서의 중국어 버전을 다운로드하는 것이 가장 좋습니다. 함께 작업

위의 내용은 온라인에서 쉽게 찾을 수 있으며, 그룹 웹 프로그래밍 개발: 197132320에서 다운로드할 수 있습니다. 물론 웹 프로그래밍을 좋아하는 친구도 함께 참여하실 수 있습니다

먼저, html의 기본 구조를 숙지하고 html 파일 test.html을 생성합니다.

<html>
<head>
<title>这是HTML基本结构</title>
<head>
<body>
hello!
</body>
</html>

로그인 후 복사

물론 html 파일에 hello를 직접 입력하면 표시될 수 있습니다. 보통은 기준에 맞지 않습니다.
div를 알아보세요. 실제로는 div를 담는 데 사용되는 것입니다.
그러나 이 div는 여전히 투명하기 때문에 웹 페이지에서 볼 수 없습니다

표시할 스타일을 지정해야 합니다. 먼저 테두리를 표시하고 너비와 높이를 100px로 만들고 배경색은 빨간색으로 설정합니다

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div>这是一个div</div>
</body>
</html>

로그인 후 복사

모든 html 태그에는 스타일 속성이 있으며 div도 예외는 아닙니다.

border: solid 1px border는 CSS의 border 속성을 나타냅니다. solid 1px 두 가지 값에 주의하세요.

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div>
</body>
</html>

로그인 후 복사

단색은 테두리가 1픽셀로 표시된다는 뜻입니다.

픽셀이란 무엇인가요? http://baike.baidu.com/view/575.htm

width:100px;height:100px;는 div의 너비와 높이를 설정하는 것입니다. 각 속성의 값에 주의하세요.
background:red는 배경을 빨간색으로 설정합니다.
위 코드는 다음과 같습니다.

사이드바 닫기

div+css 웹페이지 레이아웃 디자인의 새로운 시작 (1) CSS 홈페이지 > ;

대형, 중형, 소형

div+css 웹 레이아웃 디자인 새로운 시작(1)

시간: 2014-03-09 20:49 클릭수: 709회

DIV+CSS는 웹사이트 표준(또는 ("WEB 표준"이라고 함)에서 일반적으로 사용되는 용어 중 하나인 div+css는 웹페이지 레이아웃 방법입니다. 이 웹페이지 레이아웃 방법은 표( 표) 전통적인 HTML 웹 페이지 디자인 언어의 위치 지정 방법으로 페이지 콘텐츠와 프리젠테이션을 분리할 수 있습니다. XHTML은 Extensible HyperText Markup Language의 약어입니다. XHTML은 HTML을 기반으로 최적화되고 개선된 새로운 언어인 XML(Extensible Markup Language)을 기반으로 하며, 그 목적은 XML 응용 프로그램과 강력한 데이터 변환 기능을 기반으로 하는 미래 네트워크 응용 프로그램의 더 많은 요구에 적응하는 것입니다. XHTML 웹 사이트 디자인 표준에서는 테이블 위치 지정 기술이 더 이상 사용되지 않지만 DIV+CSS를 사용하여 다양한 위치 지정을 구현합니다.

이전에는 테이블 레이아웃이었습니다. . 기본적으로 더 이상 사용되지 않습니다(테이블은 데이터 표시에만 사용됨)

div는 중국어로 영역을 의미하고 CSS는 캐스케이딩 스타일 시트를 의미함을 보면 핵심은 스타일이 아닌 레이아웃임을 알 수 있습니다

I DIV를 배우기 전에는 HTML에 익숙해야 합니다. DIV+CSS는 HTML을 기반으로 배워야 합니다

그럼 이제 어떤 도구를 사용해야 할까요? 일반적으로 메모장, 즉 메모장이면 충분합니다. + 브라우저는 괜찮습니다. 서버가 필요하지 않으며 Dreamweaver cs5를 사용할 수도 있습니다. 이에 대한 팁이 있으므로 도움말 문서의 중국어 버전을 다운로드하는 것이 가장 좋습니다. 다 해내세요

위의 내용은 온라인에서 쉽게 찾을 수 있고, 그룹 웹 프로그래밍 개발: 197132320에서 다운로드할 수 있습니다. 물론 웹 프로그래밍을 좋아하는 친구들도 함께 참여하실 수 있습니다

먼저 html의 기본 구조를 숙지하고 html 파일 test.html을 생성해 보자.

물론 html 파일에 hello를 직접 입력하면 된다. 정상적으로 표시되지만 이는 표준에 맞지 않습니다.
div를 알아보세요. 실제로는 div를 담는 데 사용되는 것입니다. >

하지만 이 div는 여전히 투명하기 때문에 웹 페이지에서 볼 수 없습니다

<html>
<head>
<title>这是HTML基本结构</title>
<head>
<body>
hello!
</body>
</html>

로그인 후 복사

표시할 스타일을 지정해야 합니다. 먼저 테두리를 표시하고 너비와 높이를 100px로 만들고 배경색은 빨간색으로 설정합니다.

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div>
</body>
</html>

로그인 후 복사

每一个html标签都有style属性，div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素
什么是像素看这里http://baike.baidu.com/view/575.htm

width:100px;height:100px;是设置div的宽度和高度注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色

如上代码在浏览器显示如下

还得提一下，浏览器最好用IE8 谷歌浏览器，火狐浏览器，360的也可以
因为他们支持css标准还算兼容，别的浏览器就说不准了，你看的结果可能不一样
css浏览器兼容日后再说

引入css样式除了上面一种，还有两种
一种是外部样式引入，特别推荐这种，一种是内部样式

外部样式引入需要在head标签里加

另外还的在html文件相同目录下创建mystyle.css文件

内部样式是直接在head写入，由于贴子特殊性，本贴全部用内部样式，这样看的舒服点，但在实际中最好用外部样式引入

这是内部样式

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>

로그인 후 복사

这比之前要规范多了，body里也看的简单多了，要多多用这种样式与内容分离模式

如果是这种

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div style="border:solid 1px;width:200px;height:200px;background:green">这是一个div</div>
</body>
</html>

로그인 후 복사

两种样式你觉得它会采用哪个？
style属性这种是内联样式
这就是优先级问题，它会采用离它最近的那个，也就是style属性里的
同样，如果外部样式与内部样式相同，它会优先采用内部样式的
如果不是全部都相同，它会把不同的合并起来，相同的就优先采用内部样式的
优先级
内联》内部》外部

以上就是div+css网页布局设计新开端（1）的内容，更多相关内容请关注PHP中文网（www.php.cn）！

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.