HTML을 작성할 때 웹페이지 레이아웃을 지정하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML을 작성할 때 웹페이지 레이아웃을 지정하는 방법

墨辰丷

May 09, 2018 am 11:34 AM

html 공들여 나열한 것 웹페이지

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 레이아웃 문제. _html/css_WEB-ITnose

HTML 레이아웃_html/css_WEB-ITnose

html 레이아웃 문제_html/css_WEB-ITnose

위 내용은 HTML을 작성할 때 웹페이지 레이아웃을 지정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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