초보자 기사: ccs를 사용하여 간단한 레이아웃을 만드는 방법(코드 포함)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

초보자 기사: ccs를 사용하여 간단한 레이아웃을 만드는 방법(코드 포함)

奋力向前

Sep 03, 2021 pm 05:29 PM

csshtml

이전 글 "css3를 사용하여 멋진 네비게이션 바 효과를 만드는 방법을 단계별로 가르쳐주세요(자세한 코드 설명) "에서는 CSS3를 사용하여 멋진 네비게이션 바 효과를 만드는 방법을 소개했습니다. 다음 기사에서는 HTML을 사용하여 간단한 레이아웃을 만드는 방법을 소개합니다.

초보자 기사: ccs를 사용하여 간단한 레이아웃을 만드는 방법(코드 포함)

생활 속 인터넷이 발달하면서 웹페이지에 이런 레이아웃이 나오는 경우가 많습니다. 렌더링 효과를 본 후 이를 구현하는 방법을 연구하고 div+css 레이아웃을 설명하겠습니다. 여러분. 기본 과정.

1. html

Html 편집 코드 예제

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

2를 생성합니다. 텍스트가 포함된 div 제목을 정의하고 class 속성을 사용하여 스타일을 지정합니다. div大标题同时使用class属性向样式。

<div class="title">顶部</div>
<div class="footer">底部</div>

3、在style之间，对body进行样式初始化，添加设置外边距margin为0，内边距padding为0，然后使用设置文字居中text-align。

<style type="text/css">
 body{text-align: center;margin: 0;padding: 0}
</style>

4、在style之间，对div进行样式添加设置所有的div高度为200px，内容的颜色为红色。

div{height: 200px;color: red;}

5、在style之间，对title进行样式使用div创建网页的头部，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为灰色。

 .title{margin: 0 auto; width: 800px; background-color: #ccc}

6、在style之间，使用div创建网页的底部，使用clear:both清除上面div的浮动，避免影响底部的布局。接着使用margin:0 auto设置div居中，又使用设置其宽度为800px，最后背景颜色为#000fff

.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}

3. style 사이에 body 스타일을 초기화하고 외부 여백 margin을 0으로 추가하고 내부 여백 padding은 0이고, text-align을 사용하여 텍스트를 중앙에 배치합니다.

<!DOCTYPE html>
<html>
<head>
	<title>布局</title>
</head>
<body>
<style type="text/css">
 body{text-align: center;margin: 0;padding: 0}
 div{height: 200px;color: red;}
 .title{margin: 0 auto; width: 800px; background-color: #ccc}
 
 .footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}
</style>
<div class="title">顶部</div>

<div class="footer">底部</div>
</body>
</html>

4. style 사이에 div에 스타일을 추가하고 모든 div의 높이를 200px로 설정하고 콘텐츠의 색상을 빨간색.

rrreee 초보자 기사: ccs를 사용하여 간단한 레이아웃을 만드는 방법(코드 포함) 5. style, style title 사이에 div를 사용하여 웹페이지의 헤드를 만들고 margin:0 auto를 사용하여 set div는 중앙에 위치하며 너비는 800px로 설정되고 배경색은 회색입니다.

rrreee

6. style 사이에서 div를 사용하여 웹페이지 하단을 만들고, clear:both를 사용하여 위의 divcode>는 하단 레이아웃에 영향을 주지 않도록 플로팅됩니다. 그런 다음 margin:0 auto를 사용하여 div를 중앙에 배치하고 너비를 800px로 설정하고 마지막으로 배경색은 #000fff입니다. 코드>.

rrreee

7. 브라우저에서 파일을 열어서 효과를 확인해 보세요.

🎜🎜전체 코드🎜rrreee🎜추천 학습: 🎜CSS 비디오 튜토리얼🎜🎜

위 내용은 초보자 기사: ccs를 사용하여 간단한 레이아웃을 만드는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사