苹果首页制作
时间: 2023-10-24 18:04:28 浏览: 55
好的,下面是一个简单的苹果官网首页的HTML和CSS实现示例:
HTML结构:
```
<!DOCTYPE html>
<html>
<head>
<title>Apple</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Mac</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Bag</a></li>
</ul>
</nav>
<div class="hero">
<h1>Welcome to Apple</h1>
<p>Discover the innovative world of Apple and shop everything iPhone, iPad, Apple Watch, Mac, and Apple TV, plus explore accessories, entertainment, and expert device support.</p>
<a href="#" class="btn">Learn More</a>
</div>
</header>
<main>
<section>
<h2>iPhone 12</h2>
<p>Introducing the iPhone 12 and iPhone 12 mini with 5G, A14 Bionic chip, and advanced dual-camera system.</p>
<a href="#" class="btn">Learn More</a>
<img src="iphone12.png">
</section>
<section>
<h2>iPad Air</h2>
<p>Powerful, colorful, and capable of doing everything you need it to do. And then some.</p>
<a href="#" class="btn">Learn More</a>
<img src="ipadair.png">
</section>
<section>
<h2>Apple Watch Series 6</h2>
<p>Measure your blood oxygen level. Take an ECG anytime, anywhere. See your fitness metrics at a glance.</p>
<a href="#" class="btn">Learn More</a>
<img src="applewatch.png">
</section>
</main>
<footer>
<p>© 2021 Apple Inc. All rights reserved.</p>
</footer>
</body>
</html>
```
CSS样式:
```
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #000;
color: #fff;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
margin: 0;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 16px;
}
.hero {
background-image: url("hero.jpg");
background-size: cover;
background-position: center;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
}
h1 {
font-size: 48px;
margin: 0;
line-height: 1.2;
}
p {
font-size: 18px;
margin: 20px 0;
line-height: 1.5;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #fff;
color: #000;
border-radius: 25px;
text-decoration: none;
font-size: 16px;
margin-top: 20px;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
section {
max-width: 400px;
margin: 20px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
text-align: center;
}
h2 {
font-size: 32px;
margin: 0;
line-height: 1.2;
}
footer {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
footer p {
font-size: 14px;
margin: 0;
}
```
上面的代码实现了一个简单的苹果官网首页,其中包括了头部导航栏、主要内容区域和底部版权信息。主要内容区域分为三个部分,分别展示了iPhone 12、iPad Air和Apple Watch Series 6的信息。通过CSS样式实现了页面的布局和样式效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)