当前位置：首页 » 编程语言 » html分页面

html分页面

发布时间: 2021-03-17 16:22:56

❶ 这个网页怎么用html来布局像这样分块

div+css可以很容易实现，一个简单的例子：

<html>
<head>
<styletype="text/css">
*{margin:0px;padding:0px;border:0px;}
body{text-align:center;margin:0pxauto;}
#container{width:80%;height:768px;margin:0pxauto;}
#banner{width:100%;height:10%;background-color:red;}
#body{width:100%;height:90%;}
#left{width:20%;height:100%;float:left;background-color:blue;}
#middle{width:60%;height:100%;float:left;background-color:yellow}
#right{width:20%;height:100%;float:left;background-color:pink;}
</style>

</head>
<body>

<divid="container">
	<divid="banner"></div>
	<divid="body">
		<divid="left"></div>
		<divid="middle"></div>
		<divid="right"></div>
	</div>

</div>

</body>
</html>

❷ html 怎么把网页分块，div

1、启动dreamweaver cs5，在弹出的对话框窗口中选择html，进入主界面编辑区域。

❸ HTML如何把网页分成多个部分呢最好有代码演示！

<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是怎么样实现网页分块的

在这个网站里抄面看FIF小组袭的视频教材：

http://www.pconline.com.cn/pce/sj/wz/dreamweaver/0503/580605.html

主要看下面这点：

3.11 框架
3.11.1 框架含义和框架集标记
3.11.2 <frame>框架标记
3.11.3 创建框架和分割框架
3.11.4 浮动框架
3.11.5 框架链接
3.11.6 浮动框架链接
3.11.7 层及其属性
3.11.8 层的基本功能

❺ 如图。HTML怎么把页面分成3部分

上面那两个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 .two{
width:702px;
height:320px;
background:#333;
float:left;
border-radius:5px;
border:10px solid #666;
}
.one .two .ss{
width:702px;
height:155px;
background:#333;
float:left;
border-radius:5px;

}
.one .two .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如何把网页分成多个部分

<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%

❼ html框架模板后台页面，页面分上下（左右）三部分的，求html页面

这个用框架最好实现也最好用的。
<frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" />
<frame src="right.html" name="mainFrame" id="mainFrame" />
</frameset>
</frameset>

注：
top.html 为顶部文件
left.html为左边文件
right.hmtl为右边文件

❽ html如何改变页面。。分为上中下三部分，中间又分了两块，怎么让单机中间左面部分改变右面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.main{ width:800px; height:400px; border:1px solid #999999; border-bottom:none;}
.top,.foot{ width:800px; height:30px; border-bottom:1px solid #999999;}
.center{ width:800px; height:339px;}
.left{ width:200px; float:left;}
.right{ width:600px; float:left; text-align:center; height:330px;}
ul li{ list-style:none; border:1px solid #999999; margin-top:2px;}

</style>
<script>

function showDiv(divid,rows,num){

for(i=1;i<=rows;i++){
document.getElementById(divid+i).style.display="none";
}
document.getElementById(divid+num).style.display="";
}
</script>
</head>

<body>
<div class="main">
<div class="top">这里是头</div>
<div class="center">
<div class="left">
<ul>
<li onclick="showDiv('right_','4','1')">左边一</li>
<li onclick="showDiv('right_','4','2')">左边二</li>
<li onclick="showDiv('right_','4','3')">左边三</li>
<li onclick="showDiv('right_','4','4')">左边四</li>
</ul>
</div>
<div class="right" id="right_1" style="display:">右边一</div>
<div class="right" id="right_2" style="display:none">右边二</div>
<div class="right" id="right_3" style="display:none">右边三</div>
<div class="right" id="right_4" style="display:none">右边四</div>
</div>
<div class="foot">这里是尾</div>
</div>
</body>
</html>

❾ 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=1;i<=3;i++) {
if (page==i){
document.getElementById("page"+page).style.display="block";
} else {
document.getElementById("page"+page).style.display="none";
}
}
}
</script>

❿ HTML中的网页分割

用<Frame>就行了，每个frame都是独立的，一个总的网页包含所有的frame，然后控制每个frame的载入的页面，就相当于每个frame都是一个新的页面

阅读全文

html分页面

与html分页面相关的阅读推荐