帮我写五个页面的air jordan的div+css的html5的源代码网页要用样式表
这里是五个页面的Air Jordan的div+CSS的HTML5的源代码，包含样式表：
页面1：首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Air Jordan | Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Apparel</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to Air Jordan</h1>
<p>Get ready to experience the best in athletic footwear and apparel. Shop our latest collections now.</p>
<a href="#" class="btn">Shop Now</a>
</main>
<footer>
<p>© 2021 Air Jordan. All rights reserved.</p>
</footer>
</body>
</html>
页面2：鞋类列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Air Jordan | Shoes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Apparel</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</nav>
</header>
<main>
<h1>Shop Our Latest Shoes</h1>
<div class="shoe-list">
<div class="shoe">
<img src="shoe1.jpg" alt="Air Jordan 1" />
<h2>Air Jordan 1</h2>
<p>$150</p>
</div>
<div class="shoe">
<img src="shoe2.jpg" alt="Air Jordan 4" />
<h2>Air Jordan 4</h2>
<p>$200</p>
</div>
<div class="shoe">
<img src="shoe3.jpg" alt="Air Jordan 11" />
<h2>Air Jordan 11</h2>
<p>$220</p>
</div>
</div>
</main>
<footer>
<p>© 2021 Air Jordan. All rights reserved.</p>
</footer>
</body>
</html>
页面3：服装列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Air Jordan | Apparel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Apparel</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</nav>
</header>
<main>
<h1>Shop Our Latest Apparel</h1>
<div class="apparel-list">
<div class="apparel">
<img src="shirt1.jpg" alt="Air Jordan T-Shirt" />
<h2>Air Jordan T-Shirt</h2>
<p>$30</p>
</div>
<div class="apparel">
<img src="hoodie1.jpg" alt="Air Jordan Hoodie" />
<h2>Air Jordan Hoodie</h2>
<p>$70</p>
</div>
<div class="apparel">
<img src="pants1.jpg" alt="Air Jordan Pants" />
<h2>Air Jordan Pants</h2>
<p>$60</p>
</div>
</div>
</main>
<footer>
<p>© 2021 Air Jordan. All rights reserved.</p>
</footer>
</body>
</html>
页面4：配件列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Air Jordan | Accessories</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Apparel</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</nav>
</header>
<main>
<h1>Shop Our Latest Accessories</h1>
<div class="accessory-list">
<div class="accessory">
<img src="hat1.jpg" alt="Air Jordan Hat" />
<h2>Air Jordan Hat</h2>
<p>$25</p>
</div>
<div class="accessory">
<img src="socks1.jpg" alt="Air Jordan Socks" />
<h2>Air Jordan Socks</h2>
<p>$12</p>
</div>
<div class="accessory">
<img src="bag1.jpg" alt="Air Jordan Bag" />
<h2>Air Jordan Bag</h2>
<p>$50</p>
</div>
</div>
</main>
<footer>
<p>© 2021 Air Jordan. All rights reserved.</p>
</footer>
</body>
</html>
页面5：关于页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Air Jordan | About Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Apparel</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</nav>
</header>
<main>
<h1>About Air Jordan</h1>
<p>Air Jordan is a brand of athletic footwear and apparel designed and produced by Nike. The brand was created for former professional basketball player Michael Jordan, who is widely considered one of the greatest players of all time.</p>
<p>The first Air Jordan sneakers were released in 1985 and have since become a cultural phenomenon. The brand has expanded beyond basketball and is now popular among athletes and streetwear enthusiasts alike.</p>
<h2>Our Mission</h2>
<p>Our mission is to provide athletes with the best possible footwear and apparel to help them perform at their best. We are constantly innovating and improving our products to stay ahead of the competition.</p>
</main>
<footer>
<p>© 2021 Air Jordan. All rights reserved.</p>
</footer>
</body>
</html>
样式表（style.css）：
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
header {
background-color: #f2f2f2;
padding: 20px;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
}
main {
padding: 20px;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
line-height: 1.5;
margin-bottom: 20px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #333;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
/* Page-specific styles */
.shoe-list {
display: flex;
flex-wrap: wrap;
}
.shoe {
width: 33.33%;
padding: 20px;
text-align: center;
}
.shoe img {
max-width: 100%;
}
.apparel-list {
display: flex;
flex-wrap: wrap;
}
.apparel {
width: 33.33%;
padding: 20px;
text-align: center;
}
.apparel img {
max-width: 100%;
}
.accessory-list {
display: flex;
flex-wrap: wrap;
}
.accessory {
width: 33.33%;
padding: 20px;
text-align: center;
}
.accessory img {
max-width: 100%;
}
footer {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
``
原文地址: https://www.cveoy.top/t/topic/f216 著作权归作者所有。请勿转载和采集!