西式甜品网页制作代码
时间: 2024-05-06 07:13:23 浏览: 284
当涉及到网页制作代码时,西式甜品网页可以包含以下几个主要部分:
1. HTML 结构:HTML 是网页的基本结构语言,用于定义网页的内容和布局。以下是一个简单的 HTML 结构示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>西式甜品网页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到西式甜品网页</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">甜品菜单</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<section>
<h2>特色甜品</h2>
<div class="dessert">
<img src="dessert1.jpg" alt="甜品图片">
<h3>甜品名称</h3>
<p>甜品描述</p>
</div>
<div class="dessert">
<img src="dessert2.jpg" alt="甜品图片">
<h3>甜品名称</h3>
<p>甜品描述</p>
</div>
<!-- 更多特色甜品 -->
</section>
<footer>
<p>版权所有 © 2022 西式甜品网页</p>
</footer>
</body>
</html>
```
2. CSS 样式:CSS 用于控制网页的样式和布局。你可以将以下样式代码保存为 `style.css` 文件,并与 HTML 文件相同的目录下:
```css
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #666;
color: #fff;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
}
.dessert {
display: inline-block;
width: 200px;
margin-right: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
以上代码是一个简单的西式甜品网页的示例,你可以根据自己的需求进行修改和扩展。同时,你还可以添加 JavaScript 代码来实现一些交互功能,比如点击图片弹出详细信息等。
阅读全文