写一个咖啡菜单的visual studio code的代码并且保证能够运行用css和html
时间: 2024-10-23 10:16:25 浏览: 19
visual studio code 编译运行html css js文件的教程
5星 · 资源好评率100%
当然可以,下面是一个简单的HTML和CSS代码示例,用于创建一个基本的咖啡菜单页面:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>咖啡菜单</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>咖啡菜单</h1>
</header>
<main>
<section class="menu-items">
<div class="item">
<img src="espresso.jpg" alt="浓缩咖啡">
<h2>浓缩咖啡</h2>
<p>价格:¥20</p>
</div>
<div class="item">
<img src="latte.jpg" alt="拿铁咖啡">
<h2>拿铁咖啡</h2>
<p>价格:¥25</p>
</div>
<!-- 更多咖啡项目... -->
</section>
</main>
<footer>
<a href="#">返回首页</a>
</footer>
</body>
</html>
```
对应的CSS样式 (styles.css) 文件:
```css
/* styles.css */
body {
font-family: Arial, sans-serif;
}
header {
background-color: #f2f2f2;
padding: 20px;
}
.menu-items {
display: flex;
justify-content: space-between;
margin: 20px;
}
.item {
text-align: center;
width: calc(33.33% - 20px);
margin-bottom: 20px;
}
.item img {
width: 100px;
height: auto;
}
h2, p {
color: #666;
}
```
这个示例包含了一个简单的头部、主体部分(显示咖啡种类),以及底部链接。HTML定义了页面结构,CSS则负责美化展示效果。
阅读全文