请写一个简单的分类网页代码
时间: 2024-09-09 15:03:42 浏览: 30
创建一个简单的分类网页涉及到HTML和CSS的基础知识。下面是一个简单的示例:
HTML (index.html):
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简单分类网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>商品分类</h1>
</header>
<nav>
<ul>
<li><a href="#category1">电子设备</a></li>
<li><a href="#category2">家居用品</a></li>
<li><a href="#category3">服饰鞋包</a></li>
</ul>
</nav>
<section id="category1">
<h2>电子设备</h2>
<article><p>手机</p></article>
<article><p>电脑</p></article>
<article><p>平板</p></article>
</section>
<section id="category2">
<h2>家居用品</h2>
<article><p>家具</p></article>
<article><p>厨房电器</p></article>
<article><p>床上用品</p></article>
</section>
<section id="category3">
<h2>服饰鞋包</h2>
<article><p>服装</p></article>
<article><p>鞋子</p></article>
<article><p>包包</p></article>
</section>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>
```
CSS (styles.css):
```css
body {
font-family: Arial, sans-serif;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
background-color: #f2f2f2;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: black;
padding: 5px 10px;
}
nav ul li a:hover {
background-color: #ddd;
}
section {
margin-bottom: 20px;
}
article {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
position: relative;
bottom: 0;
width: 100%;
}
```
以上代码创建了一个简单的分类网页,其中包含三个分类:电子设备、家居用品和服饰鞋包。每个分类下面有几个相关的子项。通过链接锚点可以快速跳转到对应分类的内容区域。使用CSS对网页进行了一些基本的样式设置,以提高可读性。
阅读全文