帮我用jsp写一个电商王章
时间: 2023-05-27 14:02:12 浏览: 89
用JSP写的一个在线购物网站的代
4星 · 用户满意度95%
很抱歉,作为AI语言模型,我无法编写代码,但是我可以向您提供一个电商网站的JSP页面示例代码,以供您参考。
```html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电商王章</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav {
background-color: #4d4d4d;
color: #fff;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
nav a:hover {
color: #ff0;
text-decoration: underline;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1, h2 {
margin: 0;
padding: 20px 0;
text-align: center;
}
.card {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
padding: 20px;
margin-bottom: 20px;
max-width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.card img {
max-width: 100%;
height: auto;
}
.card h3 {
margin: 0;
padding: 10px;
}
.card p {
margin: 0;
padding: 10px;
}
.card button {
margin-left: auto;
background-color: #4d4d4d;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.card button:hover {
background-color: #ff0;
color: #333;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>电商王章</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<div class="container">
<h2>热门商品</h2>
<div class="card">
<img src="./images/product1.jpg" alt="商品1">
<div>
<h3>商品1名称</h3>
<p>商品1描述</p>
<button>加入购物车</button>
</div>
</div>
<div class="card">
<img src="./images/product2.jpg" alt="商品2">
<div>
<h3>商品2名称</h3>
<p>商品2描述</p>
<button>加入购物车</button>
</div>
</div>
<div class="card">
<img src="./images/product3.jpg" alt="商品3">
<div>
<h3>商品3名称</h3>
<p>商品3描述</p>
<button>加入购物车</button>
</div>
</div>
</div>
<footer>
<p>版权所有 © 2021 电商王章</p>
</footer>
</body>
</html>
```
该示例代码包括了一个具有基本功能的电商网站:包括一个导航栏、一个热门商品列表、以及一个页面底部的版权声明。
您可以根据自己的需求进行修改和扩展。
阅读全文