當前位置：首頁 » 編程語言 » 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分頁面相關的閱讀推薦