HTML+css制作一个支付商城界面
时间: 2023-08-08 11:07:38 浏览: 59
好的,下面是一个简单的支付商城界面的HTML和CSS代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>支付商城</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>支付商城</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">个人中心</a></li>
</ul>
</nav>
</header>
<main>
<section class="product-list">
<h2>商品列表</h2>
<ul>
<li>
<img src="https://via.placeholder.com/150x150" alt="product image">
<h3>商品名称</h3>
<p>商品描述</p>
<p>价格:$99.99</p>
<button>加入购物车</button>
</li>
<li>
<img src="https://via.placeholder.com/150x150" alt="product image">
<h3>商品名称</h3>
<p>商品描述</p>
<p>价格:$199.99</p>
<button>加入购物车</button>
</li>
</ul>
</section>
<aside class="cart">
<h2>购物车</h2>
<ul>
<li>
<h3>商品名称</h3>
<p>价格:$99.99</p>
<input type="number" value="1">
<button>删除</button>
</li>
<li>
<h3>商品名称</h3>
<p>价格:$199.99</p>
<input type="number" value="1">
<button>删除</button>
</li>
</ul>
<p>总价:$299.98</p>
<button>去结算</button>
</aside>
</main>
<footer>
<p>© 2021 支付商城</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
display: flex;
}
.product-list {
flex: 3;
padding: 20px;
}
.product-list h2 {
margin-top: 0;
}
.product-list ul {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.product-list li {
flex-basis: calc(50% - 20px);
margin: 10px;
padding: 10px;
background-color: #f9f9f9;
text-align: center;
}
.product-list img {
max-width: 100%;
height: auto;
}
.product-list button {
background-color: #333;
color: #fff;
padding: 5px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
margin-top: 10px;
}
.cart {
flex: 1;
padding: 20px;
background-color: #f9f9f9;
}
.cart h2 {
margin-top: 0;
}
.cart ul {
list-style: none;
padding: 0;
margin: 0;
}
.cart li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.cart input {
width: 50px;
}
.cart button {
background-color: #333;
color: #fff;
padding: 5px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
}
footer {
background-color: #ccc;
padding: 10px;
text-align: center;
}
```
这个示例中包括了一个头部导航栏、一个商品列表和一个购物车,以及一个页脚。你可以根据需要进行修改和扩展。