玩具店html+css
时间: 2023-09-07 15:18:02 浏览: 38
以下是一个简单的玩具店网站的 HTML 和 CSS 代码示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Toy Store</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Toy Store</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Toys</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section class="featured">
<h2>Featured Products</h2>
<div class="product">
<img src="toy1.jpg" alt="Toy 1">
<h3>Toy 1</h3>
<p>$19.99</p>
</div>
<div class="product">
<img src="toy2.jpg" alt="Toy 2">
<h3>Toy 2</h3>
<p>$24.99</p>
</div>
<div class="product">
<img src="toy3.jpg" alt="Toy 3">
<h3>Toy 3</h3>
<p>$29.99</p>
</div>
</section>
<section class="categories">
<h2>Categories</h2>
<ul>
<li><a href="#">Action Figures</a></li>
<li><a href="#">Dolls</a></li>
<li><a href="#">Building Blocks</a></li>
<li><a href="#">Stuffed Animals</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2021 Toy Store. All rights reserved.</p>
</footer>
</body>
</html>
```
CSS:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20px;
}
nav ul {
display: flex;
flex-direction: row;
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.featured {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 20px;
max-width: 300px;
}
.product img {
max-width: 100%;
}
.categories {
margin-bottom: 40px;
}
.categories ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.categories li {
margin-bottom: 10px;
}
.categories a {
color: #333;
text-decoration: none;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
```
这个示例包含了一个简单的页面布局,包括页眉、主要内容区域和页脚。其中,页眉包括网站名称和导航菜单,主要内容区域包括一个特色产品部分和一个类别部分,页脚包含版权信息。CSS 样式定义了页面的样式和布局。注意,这只是一个简单的示例,需要根据实际需求进行更改和扩展。