CSS入门案例Demo【咖啡店菜单】

案例代码：

Html代码

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
        <hr>
        <section>
          <h2>Coffee</h2>
          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>
      <hr class="bottom-line">
      <footer>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p class="address">123 Free Code Camp Drive</p>
      </footer>
    </div>
  </body>
</html>复制

CSS代码

 body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}
 
h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}
 
h2 {
  font-size: 30px;
}
 
.established {
  font-style: italic;
}
 
h1, h2, p {
  text-align: center;
}
 
.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}
 
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -25px;
}
 
hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}
 
.bottom-line {
  margin-top: 25px;
}
 
h1, h2 {
  font-family: Impact, serif;
}
 
.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}
 
.flavor, .dessert {
  text-align: left;
  width: 75%;
}
 
.price {
  text-align: right;
  width: 25%;
}
 
/* FOOTER */
 
footer {
  font-size: 14px;
}
 
.address {
  margin-bottom: 5px;
}
 
a {
  color: black;
}
 
a:visited {
  color: black;
}
 
a:hover {
  color: brown;
}
 
a:active {
  color: brown;
}复制

效果图：

在这里插入图片描述

标签

CSS入门案例Demo【咖啡店菜单】

案例代码：

Html代码

CSS代码

效果图：

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

【html】新建一个html并且在浏览器运行

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Cafe Menu</title>
	<link href="styles.css" rel="stylesheet"/>
	</head>
	<body>
	<div class="menu">
	<main>
	<h1>CAMPER CAFE</h1>
	<p class="established">Est. 2020</p>
	<hr>
	<section>
	<h2>Coffee</h2>
	<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
	<article class="item">
	<p class="flavor">French Vanilla</p><p class="price">3.00</p>
	</article>
	<article class="item">
	<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
	</article>
	<article class="item">
	<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
	</article>
	<article class="item">
	<p class="flavor">Hazelnut</p><p class="price">4.00</p>
	</article>
	<article class="item">
	<p class="flavor">Mocha</p><p class="price">4.50</p>
	</article>
	</section>
	<section>
	<h2>Desserts</h2>
	<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
	<article class="item">
	<p class="dessert">Donut</p><p class="price">1.50</p>
	</article>
	<article class="item">
	<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
	</article>
	<article class="item">
	<p class="dessert">Cheesecake</p><p class="price">3.00</p>
	</article>
	<article class="item">
	<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
	</article>
	</section>
	</main>
	<hr class="bottom-line">
	<footer>
	<p>
	<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
	</p>
	<p class="address">123 Free Code Camp Drive</p>
	</footer>
	</div>
	</body>
	</html>

	body {
	background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
	font-family: sans-serif;
	padding: 20px;
	}

	h1 {
	font-size: 40px;
	margin-top: 0;
	margin-bottom: 15px;
	}

	h2 {
	font-size: 30px;
	}

	.established {
	font-style: italic;
	}

	h1, h2, p {
	text-align: center;
	}

	.menu {
	width: 80%;
	background-color: burlywood;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	max-width: 500px;
	}

	img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: -25px;
	}

	hr {
	height: 2px;
	background-color: brown;
	border-color: brown;
	}

	.bottom-line {
	margin-top: 25px;
	}

	h1, h2 {
	font-family: Impact, serif;
	}

	.item p {
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 18px;
	}

	.flavor, .dessert {
	text-align: left;
	width: 75%;
	}

	.price {
	text-align: right;
	width: 25%;
	}

	/* FOOTER */

	footer {
	font-size: 14px;
	}

	.address {
	margin-bottom: 5px;
	}

	a {
	color: black;
	}

	a:visited {
	color: black;
	}

	a:hover {
	color: brown;
	}

	a:active {
	color: brown;
	}

CSS入门案例Demo【咖啡店菜单】

案例代码：

Html代码

CSS代码

效果图：

微信扫一扫：分享