집 >웹 프론트엔드 >HTML 튜토리얼 >웹 페이지 레이아웃에 div+css를 사용하는 방법

웹 페이지 레이아웃에 div+css를 사용하는 방법

迷茫원래의: 2017-01-17 09:53:564679검색

Div 태그, 우리는 이를 레이어라고 부릅니다. div는 블록 요소이며 CSS와 결합되어 웹 페이지 레이아웃을 매우 잘 할 수 있습니다.

먼저 모든 사람이 div가 무엇인지 볼 수 있도록 div+css 코드를 작성해 보겠습니다. 위 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red
}
</style>
</head>
<body>
<div></div>
</body>
</html>

처럼 실행하면 가로와 세로가 300픽셀이고 빨간색 테두리가 있는 정사각형이 웹 페이지에 표시됩니다

그럼 홈페이지를 레이아웃해 보겠습니다.

상단 부분은 캐러셀로 사용됩니다

하단 부분은 네비게이션이고, 컨텐츠 부분은 왼쪽과 오른쪽으로 나누어져 있습니다. 블록, 하단 블록이 어떻게 만들어지는지 살펴보겠습니다. 웹페이지를 만들려면 id 선택자, 클래스 선택자 등 HTML과 CSS의 기본이 필요합니다.

div를 사용할 때. +웹 페이지 레이아웃에는 CSS를 사용해야 합니다. 이 지식을 모른다면 위에서 언급한 것처럼 CSS 비디오 튜토리얼이나 텍스트 튜토리얼을 참조하세요. do

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div{
width:100%;
height:300px;
background:#f69;
}
#daohang{
width:100%;
height:50px;
background:#f60;
}
ul li{
list-style:none;
float:left;
line-height:50px;
margin-left:130px;
}
#bdy{
width:100%;
height:500px;
background:green;
}
#left{
width:30%;
height:500px;
background:red;
float:left;
}
#right{
width:70%;
height:500px;
background:#ccc;
float:left;
}
#but{
width:100%;
height:200px;
background:#f60;
}
</style>
</head>
<body>
<div id="div">
轮播图
</div>
<div id="daohang">
<ul>
<li>公司首页</li>
<li>公司新闻</li>
<li>产品介绍</li>
<li>加盟领航</li>
<li>联系我们</li>
<li>在线客服</li>
<li>驾车路线图</li>
</ul>
</div>
<div id="bdy">
<div id="left">公司公告</div>
<div id="right">公司新闻</div>
</div>
<div id="but">底部信息</div>
</body>
</html>

는 실제로 코드가 많지 않습니다. 또한 매우 간단하지만 여전히 여백과 패딩의 차이에 주의하는 것이 매우 중요합니다. 여백은 테두리와 패딩 사이의 거리입니다. . 내용과 테두리 사이의 거리. CSS의 속성은 기억할 수 없다고 말하는 경우가 많습니다. 왜냐하면 이 부분은 연습을 충분히 하지 않아서 기억할 수 없기 때문입니다. 더 많이 연습하세요!

성명：

이전 기사：HTML5 및 CSS 대체 사용 정보다음 기사：HTML5 및 CSS 대체 사용 정보

웹 페이지 레이아웃에 div+css를 사용하는 방법

관련 기사