制作一个怀旧零食的网页步骤和代码
时间: 2023-03-29 18:04:44 浏览: 85
很高兴回答您的问题。制作怀旧零食网页的步骤和代码如下:
步骤:
1. 设计网页布局和风格
2. 收集怀旧零食的图片和信息
3. 编写 HTML 代码,包括头部信息、导航栏、主体内容等
4. 使用 CSS 样式美化网页,包括字体、颜色、背景等
5. 编写 JavaScript 代码,实现网页交互效果,如鼠标悬停、点击等
6. 测试和优化网页,确保网页在不同设备和浏览器上都能正常显示和使用
代码:
HTML 代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>怀旧零食</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>怀旧零食</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">糖果</a></li>
<li><a href="#">薯片</a></li>
<li><a href="#">饼干</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>糖果</h2>
<div class="product">
<img src="candy1.jpg" alt="糖果1">
<h3>糖果1</h3>
<p>这是一款好吃的糖果。</p>
</div>
<div class="product">
<img src="candy2.jpg" alt="糖果2">
<h3>糖果2</h3>
<p>这是另一款好吃的糖果。</p>
</div>
</section>
<section>
<h2>薯片</h2>
<div class="product">
<img src="chips1.jpg" alt="薯片1">
<h3>薯片1</h3>
<p>这是一款好吃的薯片。</p>
</div>
<div class="product">
<img src="chips2.jpg" alt="薯片2">
<h3>薯片2</h3>
<p>这是另一款好吃的薯片。</p>
</div>
</section>
<section>
<h2>饼干</h2>
<div class="product">
<img src="cookie1.jpg" alt="饼干1">
<h3>饼干1</h3>
<p>这是一款好吃的饼干。</p>
</div>
<div class="product">
<img src="cookie2.jpg" alt="饼干2">
<h3>饼干2</h3>
<p>这是另一款好吃的饼干。</p>
</div>
</section>
</main>
<footer>
<p>版权所有 © 2021 怀旧零食</p>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS 代码示例:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: ;
padding: ;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 800px;
margin: auto;
padding: 20px;
}
section {
margin-bottom: 40px;
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
.product {
display: inline-block;
margin-right: 20px;
vertical-align: top;
width: 200px;
}
.product img {
display: block;
margin-bottom: 10px;
max-width: 100%;
}
.product h3 {
font-size: 18px;
margin-bottom: 10px;
}
.product p {
font-size: 14px;
line-height: 1.5;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
JavaScript 代码示例:
var products = document.querySelectorAll('.product');
for (var i = ; i < products.length; i++) {
products[i].addEventListener('mouseover', function() {
this.style.boxShadow = ' 10px rgba(, , , .5)';
});
products[i].addEventListener('mouseout', function() {
this.style.boxShadow = 'none';
});
}
以上就是制作怀旧零食网页的步骤和代码,希望对您有所帮助。