CSS入门案例Demo【咖啡店菜单】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>咖啡店菜单</title>
<style>
body {
background-color: #ffeead;
font-family: "Courier New", Courier, monospace;
}
.menu {
width: 250px;
margin: 50px auto;
padding: 50px;
text-align: center;
background-color: #a87864;
border-radius: 20px;
box-shadow: 0 0 10px #000;
}
.menu h2 {
color: #f4b39c;
font-size: 30px;
}
.menu p {
margin: 10px 0;
color: #f4b39c;
font-size: 20px;
}
.menu .item-info {
margin-bottom: 10px;
}
.menu .item-price {
color: #f4b39c;
font-size: 24px;
}
</style>
</head>
<body>
<div class="menu">
<h2>咖啡店菜单</h2>
<div class="item-info">
<p>香草咖啡 （Vanilla Latte）</p>
<p class="item-price">$3.99</p>
</div>
<div class="item-info">
<p>卡其布利莱（Cappuccino）</p>
<p class="item-price">$4.99</p>
</div>
<div class="item-info">
<p>卡其布利莱（Cappuccino）</p>
<p class="item-price">$4.99</p>
</div>
<!-- 其他咖啡类型和价格信息 -->
</div>
</body>
</html>这段代码展示了如何使用CSS来装饰一个简单的咖啡店菜单网页。通过设置背景颜色、字体、边框圆角和阴影，增强了页面的视觉效果，同时使得页面的内容更加引人注目。
评论已关闭