做三个layout页面,登录页,首页,产品页,并实现三个页面的跳转的代码
时间: 2024-03-27 08:37:57 浏览: 12
好的,下面是一个简单的示例代码,包括登录页、首页和产品页的HTML和JavaScript代码,以及基本的跳转代码。请注意,这只是一个示例,您可以根据您的具体需求进行修改和扩展。
1. 登录页(login.html)
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页</title>
</head>
<body>
<h1>登录页</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="button" value="登录" onclick="login()">
</form>
<script>
function login() {
//TODO: 处理登录逻辑
//登录成功后跳转到首页
window.location.href = "index.html";
}
</script>
</body>
</html>
```
2. 首页(index.html)
```html
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
</head>
<body>
<h1>欢迎来到XXX网站</h1>
<p>这里是网站的主要内容</p>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="product.html">产品页</a></li>
<li><a href="login.html">登录页</a></li>
</ul>
</nav>
</body>
</html>
```
3. 产品页(product.html)
```html
<!DOCTYPE html>
<html>
<head>
<title>产品页</title>
</head>
<body>
<h1>产品名称</h1>
<img src="product-image.jpg" alt="产品图片">
<p>产品描述</p>
<p>产品价格: $100</p>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="product.html">产品页</a></li>
<li><a href="login.html">登录页</a></li>
</ul>
</nav>
</body>
</html>
```
在以上示例代码中,我们使用了超链接来实现页面之间的跳转。在登录页中,我们使用了JavaScript来处理登录逻辑,并在登录成功后使用window.location.href属性跳转到首页。您可以根据您的具体需求修改和扩展这些代码。