上面那两个div设置百分比宽度不要占满，
footer CSS.one{width:1240pxheight:340pxmargin:16px auto 16px}.one o{width:702pxheight:320pxbackground:#333float:leftborder-radius:5pxborder:10px solid #666}.one o .ss{width:702pxheight:155pxbackground:#333float:leftborder-radius:5px}.one o .three{width:702pxheight:155pxbackground:#333border-radius:5pxborder-top:10px solid #666float:left}aside{width:492pxheight:340pxbackground:#666float:rightborder-radius:5px}footer{width:1240pxheight:60pxbackground:#666border-radius:5pxmargin:0 auto 10pxtext-align: centerline-height:60pxcolor:whitefont-size:28px}。 2. HTML如何把网页分成多个部分
<html>
<frameset cols="25%,50%,25%">
<frame src=/example/html/frame_a>
<frame src=/example/html/frame_b>
<frame src=/example/html/frame_c>
</frameset>
</html>
上面的代码是将网页分成垂直的3部分，大小依次是25%,50%,25%
3. Html怎么把一个页面分成上中下三部分,中间和下面再分成左右两部分
<frameset rows="20%,60%,20%">
<frame src=top>
<frameset cols="20%,*">
<frame src=left>
<frame src=right>
</frameset>
<frameset cols="50%,*">
<frame src=left1>
<frame src=rigth1>
</frameset>
</frameset>
扩展资料：
注意事项
用frame的好处在于不用象DIV一样要对浮动和大小进行精确控制，以及要考虑宽屏的时候怎么办，而且在导航的时候非常简单。
比如说左边是导航栏，右边是显示内容的frame，如果用DIV，每点一下导航栏进行一次页面跳转，那每个页面里都要有左边的导航栏，这样代码的复用性不高，如果用frame，只要将导航放在左边frame，在点击链接时，只需要将链接的target指向右边的内容显示frame就OK了。
<frameset rows="80px,*,20px" border=0 frameborder="0" framespacing="0" marginwidth="0" marginheight="0">
<frame name=header src=header scrolling="no">
<frameset cols="200px,*" border=0 frameborder="0" framespacing="0">
<frame name=menu src=menu scrolling="auto">
<frame name=main src=home scrolling="auto">
</frameset>
<frame name=footer src=footer scrolling="no">
</frameset>
<noframes>
<body>
</body>
</noframes>
4. 如图
上面那两个div设置百分比宽度不要占满，
<section class="one">
<section class="two">
<section class="ss"></section>
<section class="three"></section>
</section>
<aside></aside>
</section>
<footer>footer</footer>
CSS
.one{
width:1240px
height:340px
margin:16px auto 16px
}
.one o{
width:702px
height:320px
background:#333
float:left
border-radius:5px
border:10px solid #666
}
.one o .ss{
width:702px
height:155px
background:#333
float:left
border-radius:5px
}
.one o .three{
width:702px
height:155px
background:#333
border-radius:5px
border-top:10px solid #666
float:left
}
aside{
width:492px
height:340px
background:#666
float:right
border-radius:5px
}
footer{
width:1240px
height:60px
background:#666
border-radius:5px
margin:0 auto 10px
text-align: center
line-height:60px
color:white
font-size:28px
}
一般html网页，可以采用div的css属性控制显示和隐藏来实现分页的目的。
display:block这个css属性可以让div显示出来；
display:none这个css属性可以让div隐藏起来；
例如：
<div id="page1" style="display:block">这是第1页的内容</div>
<div id="page2" style="display:none">这是第2页的内容</div>
<div id="page3" style="display:none">这是第3页的内容</div>
然后增加3个按钮，分别是第1页，第2页，第3页，每个按钮有点击事情。
例如：
<a href="javascript:showpage(1)">第1页</a>
<a href="javascript:showpage(2)">第2页</a>
<a href="javascript:showpage(3)">第3页</a>
4
然后通过javascript点击事情来修改div的css属性display的值，就可以达到切换页面的目的了。
例如：
<script>
function showpage(page){
for(var i=1i<=3i++) {
if (page==i){
document.getElementById("page"+page).style.display="block"
} else {
document.getElementById("page"+page).style.display="none"
}
}
}
</script>
类似#home这种链接是在一个页面内的跳转，跳转到的位置我们称之为“锚点”。下面的代码存到index.html即可查看效果<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="position: fixedtop: 0left: 0background-color: #fff"><a href="#home">首页</a><a href="#page2">page2</a><a href="#page3">page3</a></div><div style="height: 800pxborder: 1px solid #dddpadding-top: 35px"><a id="home"></a><br><br>这里是首页部分</div><div style="height: 800pxborder: 1px solid #dddpadding-top: 35px"><a id="page2"></a><br><br>这里是page2部分</div><div style="height: 1000pxborder: 1px solid #dddpadding-top: 35px"><a id="page3"></a><br><br>这里是page3部分</div></body></html>
