HTML을 작성할 때 웹페이지 레이아웃을 지정하는 방법
- 墨辰丷원래의
- 2018-05-09 11:34:374940검색
HTML에는 일반적으로 사용되는 두 가지 레이아웃이 있습니다. 첫 번째는 div 레이아웃으로, 더 편리하고 간결하며 코드가 적고 생성 및 유지 관리가 더 쉽다는 장점이 있습니다. 그러나 일부 장소에서는 브라우저마다 호환성이 다르고 디스플레이가 다를 수 있습니다. 두 번째 유형은 테이블 레이아웃으로, 코드가 많아 나중에 유지 관리하기가 매우 어렵습니다. 그러나 테이블 레이아웃은 많은 브라우저 비호환 문제를 방지합니다.
1.div 레이아웃
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style>
body{margin: 0; padding: 0;}
#header{width:100%; height: 90px; background: #b19f9d; }
#nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;}
.content{width: 950px; height: 900px; background: #847369; margin: 0 auto;}
.left{width:30%; height: 900px; background: #decfd4; float: left;}
.right{width: 70%; height: 900px; background: #b3a19d; float: left;}
footer{width:100%; height: 150px; background: #a8817a;}
</style>
</head>
<body>
<header id="header">
<nav id="nav">空空</nav>
</header>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
</html>2.table 레이아웃
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color:gray">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: aqua" ><td>
</tr>
<tr>
<td width="20%" height="80%" style="background-color: blue" ><td>
<td width="80%" height="80%" style="background-color: blue" ><td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: black" ><td>
</tr>
</table>
</body>
</html>요약:
테이블 레이아웃은 더 제한적이고 div는 더 개방적이며 더 많은 디자인 스타일과 아름다운 효과를 제공합니다. 호환 div의 단점은 호환성이 매우 까다롭다는 것입니다.
관련 권장 사항:
HTML 레이아웃 계산기(div+css)_html/css_WEB-ITnose
HTML 레이아웃 문제. _html/css_WEB-ITnose
html 레이아웃 문제_html/css_WEB-ITnose
위 내용은 HTML을 작성할 때 웹페이지 레이아웃을 지정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5는 장치 정보를 가져옵니다.다음 기사：HTML5는 장치 정보를 가져옵니다.