> 웹 프론트엔드 > HTML 튜토리얼 > HTML布局_html/css_WEB-ITnose

HTML布局_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:18:38
원래의
1448명이 탐색했습니다.

一、使用

元素布局
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div布局</title>    <style type="text/css">        body{            margin:0px;        }        #container{            width:100%;            height:950px;            background-color:darkgray;        }        #heading{            width:100%;            height:10%;            background-color:aqua;        }        #content_menu{            width:30%;            height:80%;            background-color:aquamarine;            float:left;        }        #content_body{            width:70%;            height:80%;            background-color:blueviolet;            float:left;        }        #footing{            width: 100%;            height: 10%;            background-color: black;            clear: both;        }    </style></head><body>    <div id="container">        <div id="heading">头部</div>        <div id="content_menu">内容菜单</div>        <div id="content_body">内容主体</div>        <div id="footing">底部</div>    </div></body></html>
로그인 후 복사


二、使用

元素布局

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>table布局</title>    <style type="text/css">        body{            margin:0px;        }        #container{            width:100%;            height:950px;            background-color:darkgray;        }        #heading{            width:100%;            height:10%;            background-color:aqua;        }        #content_menu{            width:30%;            height:80%;            background-color:aquamarine;            float:left;        }        #content_body{            width:70%;            height:80%;            background-color:blueviolet;            float:left;        }        #footing{            width: 100%;            height: 10%;            background-color: black;            clear: both;        }    </style></head><body>    <table width="100%" height="950px" style="background-color: darkgray">        <tr>            <td colspan="2" width="100%" height="10%" style="background-color:aqua">这是头部</td>        </tr>        <tr>            <td width="30%" height="80%" style="background-color:blue">左菜单</td>            <td width="70%" height="80%" style="background-color:blueviolet">主体</td>        </tr>        <tr>            <td width="100%" height="10%" colspan="2" style="background-color: darkcyan">这是底部</td>        </tr>    </table></body></html>
로그인 후 복사



관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿