HTML如何把网页分成多个部分呢？ 最好有代码演示！
4个回答
展开全部
css:
body { font-family:Verdana; font-size:14px; margin:0; line-height:150%;}
#container {margin:0 auto; width:900px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#menu { height:30px; background:#09c; margin-bottom:5px;}
#mainContent { background:url(bg.gif) right 0 repeat-y; overflow:auto;zoom:1; margin-bottom:5px;}
#sidebar { float:right; width:200px; background:#9ff;}
#content { float:left; width:675px; padding:10px; background:#cff;}
#footer { height:60px; background:#6cf;}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}
html
<body>
<div id="container">
<div id="header">This is the Header</div>
<br class="clearfloat" />
<div id="menu">This is the Menu</div>
<br class="clearfloat" />
<div id="mainContent">
<div id="sidebar">This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
</div>
<div id="content">2列右窄左宽、高度自适应且未知高度底部平齐+头部+导航+尾部——<a href="http://www.aa25.cn">标准之路www.aa25.cn</a><br />
<br />
<br />
此例是当左右侧高度都不固定时，实现底部平齐的方法。目前采用背景图片的方法是最简单和快捷的方法了。<br />
<br />
制作一个和sidebar宽度相同、颜色相同的1px高背景图片，把它应用在mainContent上，然后向y轴方向重复，采用欺骗的方式来实现未知高度底部平齐，当然还有很多种其它的解决方法。细心的朋友可能已经发现，在mainContent样式表里有个 overflow:auto;zoom:1;的属性，overflow:auto;是让mainContent来自适应内部容器的高度，zoom:1;是为了兼容IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持<!--[if IE]>这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<!--[if IE]>中，这样应该可以通过验证了。<br />
<br />
总之，实现的方法是多种多样的，这只是本人在学习过程中总结的一点经验，权当抛砖引玉，希望能对您有所帮助，当然您有更好的办法和布局，欢迎一块来学习，交流，让web标准在中国得到更好的发展。同时希望您继续关注标准之路(www.aa25.cn)<br />
<br />
<br />
</div>
</div>
<br class="clearfloat" />
<div id="footer">This is the footer</div>
</div>
</body>
body { font-family:Verdana; font-size:14px; margin:0; line-height:150%;}
#container {margin:0 auto; width:900px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#menu { height:30px; background:#09c; margin-bottom:5px;}
#mainContent { background:url(bg.gif) right 0 repeat-y; overflow:auto;zoom:1; margin-bottom:5px;}
#sidebar { float:right; width:200px; background:#9ff;}
#content { float:left; width:675px; padding:10px; background:#cff;}
#footer { height:60px; background:#6cf;}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}
html
<body>
<div id="container">
<div id="header">This is the Header</div>
<br class="clearfloat" />
<div id="menu">This is the Menu</div>
<br class="clearfloat" />
<div id="mainContent">
<div id="sidebar">This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
This is the sidebar<br />
<br />
</div>
<div id="content">2列右窄左宽、高度自适应且未知高度底部平齐+头部+导航+尾部——<a href="http://www.aa25.cn">标准之路www.aa25.cn</a><br />
<br />
<br />
此例是当左右侧高度都不固定时，实现底部平齐的方法。目前采用背景图片的方法是最简单和快捷的方法了。<br />
<br />
制作一个和sidebar宽度相同、颜色相同的1px高背景图片，把它应用在mainContent上，然后向y轴方向重复，采用欺骗的方式来实现未知高度底部平齐，当然还有很多种其它的解决方法。细心的朋友可能已经发现，在mainContent样式表里有个 overflow:auto;zoom:1;的属性，overflow:auto;是让mainContent来自适应内部容器的高度，zoom:1;是为了兼容IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持<!--[if IE]>这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<!--[if IE]>中，这样应该可以通过验证了。<br />
<br />
总之，实现的方法是多种多样的，这只是本人在学习过程中总结的一点经验，权当抛砖引玉，希望能对您有所帮助，当然您有更好的办法和布局，欢迎一块来学习，交流，让web标准在中国得到更好的发展。同时希望您继续关注标准之路(www.aa25.cn)<br />
<br />
<br />
</div>
</div>
<br class="clearfloat" />
<div id="footer">This is the footer</div>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title>...</title>
</head>
<frameset rows="80,*">
<frame name="a2" src="a2.html" scrolling="auto">
<frameset cols="15%,*">
<frame name="left" src="a3.html" scrolling="auto">
<frame name="right" src="a7.html" scrolling="auto">
</frameset>
<noframes>
<body><p>此网页使用了框架，但您的浏览器不支持框架。</p></body>
</noframes>
</frameset>
</html>
-----------------------------------------------------------------------------------------------------------
你在做的时候要把每一个框架都看做是一个独立的网页。
框架和框架之间需要相互联系起来，这是做框架的目的。
后续有什么问题可以找我，我帮你解决。
<head>
<title>...</title>
</head>
<frameset rows="80,*">
<frame name="a2" src="a2.html" scrolling="auto">
<frameset cols="15%,*">
<frame name="left" src="a3.html" scrolling="auto">
<frame name="right" src="a7.html" scrolling="auto">
</frameset>
<noframes>
<body><p>此网页使用了框架，但您的浏览器不支持框架。</p></body>
</noframes>
</frameset>
</html>
-----------------------------------------------------------------------------------------------------------
你在做的时候要把每一个框架都看做是一个独立的网页。
框架和框架之间需要相互联系起来，这是做框架的目的。
后续有什么问题可以找我，我帮你解决。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
上面的代码是将网页分成垂直的3部分，大小依次是25%,50%,25%
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
上面的代码是将网页分成垂直的3部分，大小依次是25%,50%,25%
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title>...</title>
</head>
<frameset
rows="80,*">
<frame
name="a2"
src="a2.html"
scrolling="auto">
<frameset
cols="15%,*">
<frame
name="left"
src="a3.html"
scrolling="auto">
<frame
name="right"
src="a7.html"
scrolling="auto">
</frameset>
<noframes>
<body><p>此网页使用了框架，但您的浏览器不支持框架。</p></body>
</noframes>
</frameset>
</html>
-----------------------------------------------------------------------------------------------------------
你在做的时候要把每一个框架都看做是一个独立的网页。
框架和框架之间需要相互联系起来，这是做框架的目的。
后续有什么问题可以找我，我帮你解决。
<head>
<title>...</title>
</head>
<frameset
rows="80,*">
<frame
name="a2"
src="a2.html"
scrolling="auto">
<frameset
cols="15%,*">
<frame
name="left"
src="a3.html"
scrolling="auto">
<frame
name="right"
src="a7.html"
scrolling="auto">
</frameset>
<noframes>
<body><p>此网页使用了框架，但您的浏览器不支持框架。</p></body>
</noframes>
</frameset>
</html>
-----------------------------------------------------------------------------------------------------------
你在做的时候要把每一个框架都看做是一个独立的网页。
框架和框架之间需要相互联系起来，这是做框架的目的。
后续有什么问题可以找我，我帮你解决。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
