首页 > 代码库 > 【Web开发】一、页面布局

【Web开发】一、页面布局

2024-08-04 13:03:24   219人阅读

一、Frame

<frameset id="topFrameSet" rows="69,*" border="0" framespacing="0" frameborder="0">    <frame name="topframe" src="http://www.mamicode.com/frameTop.html" scrolling="No" noresize="noresize" id="topFrame" />    <frameset id="mainFrameSet" cols="142,1,*" border="0" framespacing="0" frameborder="0">        <frameset id="leftFrameSet" rows="22,*,0" frameborder="no" border="0" framespacing="1">            <frame name="lefttop" noresize="noresize" border="0" src="http://www.mamicode.com/frameLeftTop.html" scrolling="no"                style="border-right: 1px solid #6c9ede;" />            <frame name="leftmenu" src="http://www.mamicode.com/leftMenuMyTask.html" frameborder="0" scrolling="no" noresize="noresize"                border="0" target="right" style="border-right: 1px solid #6c9ede;" id="leftmenu" />            <frame name="leftdn" noresize="noresize" border="0" src="http://www.mamicode.com/frameleftdown.html" frameborder="0" />        </frameset>        <frame name="midline" src="http://www.mamicode.com/midLine.html" scrolling="No" noresize="noresize" id="midline" />        <frameset id="rightframeset" border="0" framespacing="0" rows="24,*" frameborder="0">            <frame name="rightup" src="http://www.mamicode.com/frameShowPos.html" noresize="noresize" frameborder="0"                scrolling="no" />            <frame name="right" id="right" src="http://www.mamicode.com/application/default.html" frameborder="0"                scrolling="yes" class="right_scroll" />        </frameset>    </frameset></frameset>

二、DIV

<body><div id="container">  <div id="header">This is the Header</div>  <div id="menu">This is the Menu</div>  <div id="mainContent">    <div id="sidebar">This is the sidebar</div>    <div id="content">2列左侧固定，右侧自适应宽度+头部+导航</div>  </div></div></body>body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:100%;}#header { height:100px; background:#9c6; margin-bottom:5px;}#menu { height:30px; background:#693; margin-bottom:5px;}#mainContent { height:500px; margin-bottom:5px;}#sidebar { float:left; width:200px; height:500px; background:#cf9;}#content { margin-left:205px !important; margin-left:202px; height:500px; background:#ffa;}

 

【Web开发】一、页面布局


联系
我们