H5 학습 여정 - H5 레이아웃 (10)
- 黄舟원래의
- 2017-02-17 14:35:581193검색
두 가지 구현 방법: p와 테이블
p 레이아웃 구현 방법
코드 예시
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5布局0</title>
<style type="text/css">
body{ margin: 0px;;
}
#container{ width:100%; height: 950px; background-color: chartreuse; }
#heading{ width: 100%; height: 10%; background-color: brown; }
#content_menu{ width:30%; height: 80%; background-color: blue; float: left; }
#content_body{ width: 70%; height: 80%; background-color: darkgreen; float: left; }
#footer{ width: 100%; height: 10%; background-color: aliceblue; clear: both; }
</style></head><body>
<p id="container">
<p id="heading">头部</p>
<p id="content_menu">内容菜单</p>
<p id="content_body">内容主体</p>
<p id="footer">尾部</p>
</p></body></html>! ! ! ! ! ! ! float는 왼쪽에서 오른쪽으로 떠 있음을 의미합니다.clear는 삭제를 의미합니다
테이블 레이아웃
코드 예
아아아아! ! ! ! colspan 속성
렌더링
두 가지 구현 방법: p 및 테이블
p 구현 레이아웃
에 주의하세요. 코드 예시
아아아아! ! ! ! ! ! ! float는 왼쪽에서 오른쪽으로 떠 있다는 뜻입니다.clear는
렌더링
테이블 레이아웃
코드 예
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5布局0</title></head><body>
<table width="100%" height="950px" style="background-color: chartreuse">
<tr>
<td width="100%" height="10%" style="background-color: brown" colspan="3">头部</td>
</tr>
<tr>
<td width="20%" height="80%" style="background-color: aqua">左菜单</td>
<td width="60%" height="80%" style="background-color: black">主体</td>
<td width="200%" height="80%" style="background-color:crimson">右菜单</td>
</tr>
<tr>
<td width="100%" height="10%" style="background-color: deeppink" colspan="3">尾部</td>
</tr>
</table></body></html>를 지우는 것을 의미합니다! ! ! ! colspan 속성
Rendering
에 주목하세요. 위는 H5 학습 여정-H5 레이아웃의 내용입니다(10). PHP 중국어 넷(www.php.cn)을 주목해주세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.