用web表格做一个商城首页
时间: 2023-12-10 21:39:17 浏览: 44
好的,以下是一个简单的商城首页的web表格代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>商城首页</title>
<style type="text/css">
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2"><h1>商城名称</h1></td>
<td colspan="2"><input type="text" placeholder="搜索商品"></td>
<td><button>搜索</button></td>
</tr>
<tr>
<td><a href="#">首页</a></td>
<td><a href="#">商品分类</a></td>
<td><a href="#">购物车</a></td>
<td><a href="#">我的订单</a></td>
<td><a href="#">登录/注册</a></td>
</tr>
<tr>
<td colspan="5"><img src="https://via.placeholder.com/1500x300"></td>
</tr>
<tr>
<td><img src="https://via.placeholder.com/300x300"></td>
<td><img src="https://via.placeholder.com/300x300"></td>
<td><img src="https://via.placeholder.com/300x300"></td>
<td><img src="https://via.placeholder.com/300x300"></td>
<td><img src="https://via.placeholder.com/300x300"></td>
</tr>
<tr>
<td>商品名称</td>
<td>商品名称</td>
<td>商品名称</td>
<td>商品名称</td>
<td>商品名称</td>
</tr>
<tr>
<td>¥ 100.00</td>
<td>¥ 100.00</td>
<td>¥ 100.00</td>
<td>¥ 100.00</td>
<td>¥ 100.00</td>
</tr>
<tr>
<td><button>立即购买</button></td>
<td><button>立即购买</button></td>
<td><button>立即购买</button></td>
<td><button>立即购买</button></td>
<td><button>立即购买</button></td>
</tr>
</table>
</body>
</html>
```
这个表格包含了商城名称、搜索栏、导航栏、轮播图、商品展示和购买按钮等元素,你可以根据需要进行修改和扩展。注意,这只是一个简单的示例,实际的商城首页可能需要更多的样式和功能。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)