用html写一个钢材网站,logo网站:https://gangcai.oss-cn-beijing.aliyuncs.com/uploads/20230324/f296158535c38746156a16d561e25cc3.png,顶部导航为:首页、钢材现货、采购信息、认证商家、用户中心,底部导航为:关于我们、隐私协议、用户协议、联系我们、加入我们,中间为两个表格,第一个为品名、规格、材质、公司名、操作,第二个为品名、规格、材质、数量、发布时间
时间: 2023-05-23 19:05:04 浏览: 147
钢材网站,一个好的钢材网站
可以使用以下代码来创建一个简单的钢材网站。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>钢材网站</title>
<style>
/* 设置页面样式 */
body {
background-color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
/* 设置页面顶部导航样式 */
#topnav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-around;
padding: 10px 0;
}
#topnav a {
color: #fff;
font-size: 18px;
text-decoration: none;
}
/* 设置页面中间表格样式 */
#table1, #table2 {
margin: 30px auto;
max-width: 800px;
width: 100%;
}
table {
border-collapse: collapse;
margin: 0 auto;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
/* 设置页面底部导航样式 */
#bottomnav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-around;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
}
#bottomnav a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
/* 设置logo样式 */
#logo {
display: block;
margin: 20px auto;
max-width: 200px;
}
</style>
</head>
<body>
<!-- 设置页面顶部导航 -->
<div id="topnav">
<a href="#">首页</a>
<a href="#">钢材现货</a>
<a href="#">采购信息</a>
<a href="#">认证商家</a>
<a href="#">用户中心</a>
</div>
<!-- 设置页面logo -->
<img src="https://gangcai.oss-cn-beijing.aliyuncs.com/uploads/20230324/f296158535c38746156a16d561e25cc3.png" id="logo" alt="logo">
<!-- 设置第一个表格 -->
<div id="table1">
<table>
<thead>
<tr>
<th>品名</th>
<th>规格</th>
<th>材质</th>
<th>公司名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 在此处添加数据 -->
</tbody>
</table>
</div>
<!-- 设置第二个表格 -->
<div id="table2">
<table>
<thead>
<tr>
<th>品名</th>
<th>规格</th>
<th>材质</th>
<th>数量</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
<!-- 在此处添加数据 -->
</tbody>
</table>
</div>
<!-- 设置页面底部导航 -->
<div id="bottomnav">
<a href="#">关于我们</a>
<a href="#">隐私协议</a>
<a href="#">用户协议</a>
<a href="#">联系我们</a>
<a href="#">加入我们</a>
</div>
</body>
</html>
```
以上代码创建了一个带有顶部导航、中间表格和底部导航的网站,其中logo使用了提供的图片链接。中间的两个表格中的数据需要根据实际情况添加。
阅读全文