做一个校园二手交易网站首页及代码实现,网站的主要功能,包括发布二手商品、搜索商品、浏览商品详情、联系卖家、购买商品等。
时间: 2023-06-01 12:01:41 浏览: 193
首页设计:
1. 标题:校园二手交易网站
2. 导航栏:主页、发布商品、搜索商品、浏览商品、联系卖家、购买商品
3. 搜索框:可以输入商品的关键字进行搜索
4. 轮播图:展示最新发布的几个商品图片及其简介
5. 推荐商品:展示一些精选的商品及其价格和简介
代码实现:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>校园二手交易网站</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<li><a href="#">联系卖家</a></li>
<li><a href="#">购买商品</a></li>
</ul>
</nav>
</header>
<main>
<div class="search">
<form>
<input type="text" placeholder="请输入商品关键字">
<button type="submit">搜索</button>
</form>
</div>
<div class="slider">
<img src="img/1.jpg" alt="商品1">
<img src="img/2.jpg" alt="商品2">
<img src="img/3.jpg" alt="商品3">
<img src="img/4.jpg" alt="商品4">
<img src="img/5.jpg" alt="商品5">
</div>
<div class="recommend">
<h2>推荐商品</h2>
<ul>
<li>
<a href="#">
<img src="img/6.jpg" alt="商品6">
<p>商品6</p>
<span>¥100</span>
</a>
</li>
<li>
<a href="#">
<img src="img/7.jpg" alt="商品7">
<p>商品7</p>
<span>¥200</span>
</a>
</li>
<li>
<a href="#">
<img src="img/8.jpg" alt="商品8">
<p>商品8</p>
<span>¥300</span>
</a>
</li>
<li>
<a href="#">
<img src="img/9.jpg" alt="商品9">
<p>商品9</p>
<span>¥400</span>
</a>
</li>
<li>
<a href="#">
<img src="img/10.jpg" alt="商品10">
<p>商品10</p>
<span>¥500</span>
</a>
</li>
</ul>
</div>
</main>
<footer>
<p>版权所有 © 校园二手交易网站</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
float: left;
margin-left: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
nav a:hover {
color: #ffc107;
}
main {
padding: 20px;
}
.search {
text-align: center;
margin-bottom: 20px;
}
.search input[type="text"] {
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
}
.search button {
padding: 10px;
font-size: 16px;
background-color: #ffc107;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.slider {
margin-bottom: 20px;
}
.slider img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
.recommend {
margin-bottom: 20px;
}
.recommend h2 {
margin-bottom: 10px;
}
.recommend ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.recommend li {
width: 20%;
margin-right: 2%;
margin-bottom: 20px;
}
.recommend li:last-child {
margin-right: 0;
}
.recommend a {
display: block;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.recommend a:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.recommend img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.recommend p {
margin-bottom: 5px;
}
.recommend span {
color: #ff0000;
font-weight: bold;
}
```
以上便是一个校园二手交易网站的首页及其代码实现,主要功能包括发布二手商品、搜索商品、浏览商品详情、联系卖家、购买商品等。可以根据需要进行修改和完善。
阅读全文