HTML多個界面跳轉以及界面內跳轉


1.主頁

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>主頁</title>
</head>

<img src="image\logo.gif">
<br/><br/><br/>
&nbsp;<a href="BENET.html" style="color:#669; font: '微軟簡魏碑';">登錄</a>&nbsp;|
&nbsp;<a href="xinwen.html">新聞</a>&nbsp;|
&nbsp;<a href="chanpin.html">產品</a>&nbsp;|
&nbsp;<a href="one.html">服務</a>&nbsp;|
&nbsp;<a href="one.html">更多</a>&nbsp;|
<img src="image\email.gif">
<br/><br/><br/><br/><br/><br/>
<div class="text" style="text-align:center">

BENET公司2016<br/>
地址:北京<br/>
電話:111111傳真:11111<br/>
copyringht&copy;2016&nbsp;bennet&nbsp;right&nbsp;reserve
</div>

</body>
</html>

運行:

 

2.登錄

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登陸</title>
</head>

<img src="image\logo.gif">
<br/>

<h3>BENET公司客戶登陸</h3>
<h5>用戶名:<img src="image\kuang.jpg"></h5>
<h5>密碼:<img src="image\kuang.jpg"></h5>
<body>
<a href="one.html">注冊</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="one.html">找回密碼</a>
<br/><br/>
<a href="zhuye.html">返回首頁</a><br/><br/>
<div class="text" style="text-align:center">

BENET公司2016<br/>
地址:北京<br/>
電話:111111傳真:11111<br/>
copyringht&copy;2016&nbsp;bennet&nbsp;right&nbsp;reserve
</div>

</body>
</html>

運行:

 

3.新聞

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>新聞</title>
</head>

<img src="image\logo.gif">
<br/><br/><br/>
<div style="float:left">
<font face="微軟簡魏碑">最新新聞:</font></div>

<a href="zhuye.html">返回首頁</a>
<br/>
<ul type="circle">
<li><a href="one.html">新聞1</a></li>
<li><a href="one.html">新聞2</a></li>
<li><a href="one.html">新聞3</a></li>
<li><a href="one.html">新聞4</a></li>
<li><a href="one.html">新聞5</a></li>
<li><a href="one.html">...</a></li>

<body>
<br/>
<div class="text" style="text-align:center">

BENET公司2016<br/>
地址:北京<br/>
電話:111111傳真:11111<br/>
copyringht&copy;2016&nbsp;bennet&nbsp;right&nbsp;reserve
</div>
</body>
</html>

</html>

 

運行:

 

 4.產品

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>產品</title>
</head>
<a name="DB"><img src="image\logo.gif"></a><br/><br/><br/>
<body>
<font face="微軟簡魏碑" size="+2">產品目錄:</font>
<br/>
&nbsp;<a href="#P1">產品1</a>&nbsp;|
&nbsp;<a href="#P2">產品2</a>&nbsp;|
&nbsp;<a href="#P3">產品3</a>&nbsp;|
&nbsp;<a href="#P4">產品4</a>&nbsp;|
&nbsp;<a href="#P5">產品5</a>&nbsp;|<a href="zhuye.html">返回首頁</a>
<br/>
<br/>
<font face="微軟簡魏碑" size="+2">產品列表:</font><br/>
<font><a name="P1">產品1</a></font>
<a href="#DB">返回頂部</a>
<p>描述</p>
<br/><br/>
<font><a name="P2">產品2</a></font>
<a href="#DB">返回頂部</a>
<p>描述</p>
<br/><br/>
<font><a name="P3">產品3</a></font>
<a href="#DB">返回頂部</a>
<p>描述</p>
<br/><br/>
<font><a name="P4">產品4</a></font>
<a href="#DB">返回頂部</a>
<p>描述</p>
<br/><br/>
<font><a name="P5">產品5</a></font>
<a href="#DB">返回頂部</a>
<p>描述</p>
<br/><br/>
<div class="text" style="text-align:center">

BENET公司2016<br/>
地址:北京<br/>
電話:111111傳真:11111<br/>
copyringht&copy;2016&nbsp;bennet&nbsp;right&nbsp;reserve
</div>
</body>
</html>

運行:

 

 

 

注:

多頁面錨節點實現:把跳轉地址加上路徑即可

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM