CSS-通过设计菜单页来学习 CSS

、十一、2024-04-27 12:54

文章目录

一、CSS介绍

CSS的主要作用是美化界面和控制页面布局。

CSS，全称为Cascading Style Sheets，即层叠样式表，是用于增强和控制网页的一种设计语言。它主要负责页面的视觉表现，包括设置字体、颜色、布局和许多其他与外观相关的属性。

CSS的作用可以总结为以下几点：

美化界面：允许设计师对文本内容（如字体、大小、对齐方式）和图片（宽高、边框样式、边距等）进行详细的设定，以达到美观的效果。
控制布局：通过CSS可以实现页面元素的精确定位和布局，使得HTML专注于内容的结构化呈现，而样式则由CSS独立处理。
提升可维护性：将样式从内容中分离出来，方便了网站的维护和更新。
提高兼容性：CSS考虑了不同浏览器之间的兼容性问题，减少了开发者在适配不同浏览器时的工作量。
动态格式化：虽然CSS本身是静态的，但它也可以与JavaScript等脚本语言结合，实现动态改变元素的样式。

二、学习开始

1、创建一个新的html文件

按顺序点击红框中的图标，创建一个新的html文件

然后！+ 回车创建html框架

ctrl + s保存一下

2、style元素

style标签是HTML中的一个重要元素，它用于包含文档的CSS样式信息。通过style标签，可以指定HTML元素在浏览器中的呈现方式。这意味着您可以控制页面上每个元素的外观，包括字体、颜色、边距、布局等。使用style标签可以让网页设计变得更加灵活和美观。

示例：修改html框架信息，并添加style元素

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>
    <style>
        
    </style>
</head>
<body>
    <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
            <h2>Coffee</h2>
        </section>
    </main>
</body>
</html>

示例、为h1设置text-align，其属性为center

text-align 属性可以应用于多种元素，包括块级元素和内联元素，它决定了这些元素内部的文本是如何在水平方向上排列的

text-align 属性有以下几个值：

left：左对齐，是默认值，文本会与元素的左边界对齐。
right：右对齐，文本会与元素的右边界对齐。
center：居中对齐，文本会在元素内部居中。
justify：两端对齐，文本的左右两端都会与元素的边界对齐，这通常意味着单词之间会增加空格以填充整个行宽。
initial：将此属性设置回默认值，即左对齐。
inherit：从父元素继承text-align属性的值。

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>
    <style>
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
            <h2>Coffee</h2>
        </section>
    </main>
</body>
</html>

示例、为h2与p设置text-align，其属性为center

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>
    <style>
        h1 {
            text-align: center;
        }
        h2{
            text-align: center;
        }
        p {
            text-align: center;
        }
    </style>l
</head>
<body>
    <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
            <h2>Coffee</h2>
        </section>
    </main>
</body>
</html>

示例：将h1，h2，p三个标签使用一个style元素

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>
    <style>
        h1,h2,p {
            text-align: center;
        }
    </style>
</head>
<body>
    <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
            <h2>Coffee</h2>
        </section>
    </main>
</body>
</html>

3、CSS文件创建

虽然通过在 style 标签内编写 CSS 来设置了三个元素的样式，这样做虽然也可以，但是由于会有更多的样式，所以最好把所有的样式放在一个单独的文件中并链接到它。

创建css文件方式和创建html文件一样，只不过是吧最后的点缀格式换成了css

4、在css文件中添加style元素

示例：在css文件中添加style元素

css 复制代码 
h1,h2,p{
    text-align: center;
  }

示例：将css文件链接到html文件中

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
            <h2>Coffee</h2>
        </section>
    </main>
</body>
</html>

这样依然还是文本居中的格式

示例：在css文件中为body添加样式

css 复制代码 
h1,h2,p{
    text-align: center;
  }

body{
    background-color:brown
  }

5、div元素

div元素在HTML中用于定义文档的分区或节

它主要有以下几个作用：

内容组织：div标签可以把文档分割成独立的、不同的部分，用作严格的组织工具。这使得开发者可以更好地结构化页面内容，以便更有效地管理和更新信息。
容器角色：div可以作为其他HTML元素的容器，这意味着你可以将多个元素放入div内，然后统一对它们进行样式设置或行为控制，如布局定位、背景色设置等。
样式化和脚本化：通过使用CSS，开发者可以针对div标签设置样式，如宽度、高度、颜色、边距等。同时，利用JavaScript，开发者可以对div及其内容进行动态操作，如显示隐藏、位置移动等。
辅助布局：在网页布局中，div经常与CSS一同使用来创建网页布局的结构，例如多栏布局、网格系统等。
语义化：虽然div本身不包含任何特定格式或样式，但结合id或class属性，它可以为文档提供额外的语义信息，帮助理解和维护代码结构。
浏览器兼容性：div是所有现代浏览器都支持的标准HTML元素，因此在不同浏览器之间具有很高的兼容性。
SEO优化：合理使用div元素并配合适当的id或class可以提高搜索引擎优化（SEO）的效果，因为这样的结构清晰，有助于搜索引擎更好地解析页面内容。
响应式设计：在进行响应式网页设计时，div元素通常与媒体查询（Media Queries）结合使用，以实现不同屏幕尺寸下的自适应布局。

示例：在body元素中添加div元素

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="Menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p>Est. 2020</p>
            <section>
                <h2>Coffee</h2>
            </section>
        </main>
    </div>
</body>
</html>

示例：在css中添加div元素的样式

css 复制代码 
h1,h2,p{
    text-align: center;
  }

body{
    background-color:brown
  }

#Menu{
    width: 300px;
  }

注：一定要注意大小写

示例：修改div元素样式，使盒子只有三行文本大小

css 复制代码 
h1,h2,p{
    text-align: center;
  }

body{
   /* background-color:brown*/
  }

#Menu{
    width: 300px;
    background-color:brown
  }

示例：修改width的值为80%

css 复制代码 
h1,h2,p{
    text-align: center;
  }

body{
   /* background-color:brown*/
  }

#Menu{
    width: 80%;
    background-color:brown
  }

示例：div盒子样式添加margin-left和margin-right

margin-left属性的作用是设置元素的左外边距。
margin-right属性用于设置元素的右外边距。

css 复制代码 
h1,h2,p{
    text-align: center;
  }

body{
   /* background-color:brown*/
  }

#Menu{
    width: 80%;
    background-color:brown;
    margin-left:auto;
    margin-right:auto;
  }

示例：将现有的 #menu 选择器更改为类选择器

css 复制代码 
h1,h2,p{
    text-align: center;
  }

body{
   /* background-color:brown*/
  }

.Menu{
    width: 80%;
    background-color:brown;
    margin-left:auto;
    margin-right:auto;
  }

将id选择器更改为类选择器后，html文件中的id属性也需要改为class属性

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="Menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p>Est. 2020</p>
            <section>
                <h2>Coffee</h2>
            </section>
        </main>
    </div>
</body>
</html>

示例：在body属性中添加背景图

css 复制代码 
h1,h2,p{
    text-align: center;
  }

  body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  }

.Menu{
    width: 80%;
    background-color:brown;
    margin-left:auto;
    margin-right:auto;
  }

6、article元素

article 元素在HTML中代表一个独立的内容块，该内容块通常能够独立于文档的其余部分进行分发和复用。

article 元素的作用主要包括以下几点：

内容的独立性：article 元素中的内容应该是自包含的，这意味着它应该包含足够的信息，使得用户即使没有页面的其他部分也能理解和使用该内容。
可重用性：article 元素内的内容可以在其他上下文中重复使用，例如在RSS源或通过邮件发送给订阅者。
语义化：article 提供了对页面结构的语义信息，有助于搜索引擎优化（SEO）和屏幕阅读器等辅助技术更好地理解内容。
多功能性：article 可以用于各种类型的网页内容，包括但不限于博客文章、论坛帖子、新闻故事、评论、产品描述等。
布局和样式：article 元素可以被单独样式化，使得开发者可以为不同类型的内容创建不同的外观和布局。
嵌套使用：article 元素可以嵌套在其他article元素中，这在某些情况下是有意义的，例如一篇博客文章可能包含一个独立的article元素来表示一个相关的教程或案例研究。
交互性：article 元素可以与JavaScript等脚本语言一起使用，以创建交互式的用户体验。
浏览器兼容性：article 元素在所有现代浏览器中都得到了支持，并且不会对不支持该元素的浏览器造成问题。

示例：在h2标签下添加article元素

css 复制代码 
<!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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="Menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p>Est. 2020</p>
            <section>
                <h2>Coffee</h2>
                <article>
                    <p>French Vanilla</p>
                    <p>3.00</p>
                </article>
            </section>
        </main>
    </div>
</body>
</html>

示例：更改article元素中的样式

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="Menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p>Est. 2020</p>
            <section>
                <h2>Coffee</h2>
                    <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>
        </main>
    </div>
</body>
</html>
css 复制代码 
 h1,h2,p{
    text-align: center;
  }

  body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  }

 .Menu{
    width: 80%;
    background-color:brown;
    margin-left:auto;
    margin-right:auto;
  }
  
  .flavor {
    text-align: left;
    width:75%;
  }
  
  .price {
    text-align: right;
    width: 25%;
  }

  .item p{
    display:inline-block;
  }

示例：添加新的article元素

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="Menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p>Est. 2020</p>
            <section>
                <h2>Coffee</h2>
                    <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>
                <article class="item">
                    <p>Donut</p><p>1.50</p>
                    <p class="dessert">Donut</p><p class="price">1.50</p>
                </article>
            </section>
        </main>
    </div>
</body>
</html>
css 复制代码 
 h1,h2,p{
    text-align: center;
  }

  body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  }

 .Menu{
    width: 80%;
    background-color:brown;
    margin-left:auto;
    margin-right:auto;
  }
  
  .flavor,.dessert{
    text-align: left;
    width:75%;
  }
  
  .price {
    text-align: right;
    width: 25%;
  }

  .item p{
    display:inline-block;
  }

示例：css中.Menu添加padding-left和padding-right属性

padding-left和 padding-righ这两个属性的作用是为元素的左内边距和右内边距分别设置像素的填充。内边距是元素内容与边框之间的空间，用于控制元素内容的间距。

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="Menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p>Est. 2020</p>
            <section>
                <h2>Coffee</h2>
                    <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>
                <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>
    </div>
</body>
</html>
css 复制代码 
 h1,h2,p{
    text-align: center;
  }

  body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  }

 .Menu{
    width: 80%;
    background-color:brown;
    margin-left:auto;
    margin-right:auto;
    padding-left:20px;
    padding-right:20px;
  }
  
  .flavor,.dessert{
    text-align: left;
    width:75%;
  }
  
  .price {
    text-align: right;
    width: 25%;
  }

  .item p{
    display:inline-block;
  }

示例：添加font-family属性

在网页设计和开发中，font-family 属性是CSS中的一个非常关键的属性，它允许开发者指定一个或多个字体名称，从而控制网页中文本的显示方式。这个属性可以接受一系列由逗号分隔的字体名称，浏览器会按照顺序来加载这些字体。如果某个字体不可用，浏览器将尝试下一个字体。font-family 属性不仅影响文本的外观，还可能影响布局，因为不同的字体具有不同的宽度和高度。

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="Menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p>Est. 2020</p>
            <section>
                <h2>Coffee</h2>
                    <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>
                <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>
    </div>
</body>
</html>
css 复制代码 
 h1,h2,p{
    text-align: center;
  }

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

 .Menu{
    width: 80%;
    background-color:brown;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    max-width:500px;
  }
  
  .flavor,.dessert{
    text-align: left;
    width:75%;
  }
  
  .price {
    text-align: right;
    width: 25%;
  }

  .item p{
    display:inline-block;
  }

示例：改变h1，h2，p文本的字体

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="Menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p class="established">Est. 2020</p>
            <section>
                <h2>Coffee</h2>
                    <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>
                <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>
    </div>
</body>
</html>
css 复制代码 
 h1,h2,p{
    text-align: center;
  }

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

  .established{
    font-style:italic
  }

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

 .Menu{
    width: 80%;
    background-color:brown;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    max-width:500px;
  }
  
  .flavor,.dessert{
    text-align: left;
    width:75%;
  }
  
  .price {
    text-align: right;
    width: 25%;
  }

  .item p{
    display:inline-block;
  }

示例：添加hr标签

hr标签用于在HTML文档中插入一条水平线，通常用作不同主题或段落之间的视觉分隔。它不仅有助于改善页面的可读性，还可以使结构更加清晰。

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="Menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p class="established">Est. 2020</p>
            <hr>
            <section>
                <h2>Coffee</h2>
                    <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>
                <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>
        <footer>
            <p>
                <a href="https://www.freecodecamp.org">Visit our website</a>
            </p>
            <p>123 Free Code Camp Drive</p>
        </footer>
    </div>
</body>
</html>

示例：添加内边距margin-bottom和margin-top

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="Menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p class="established">Est. 2020</p>
            <hr>
            <section>
                <h2>Coffee</h2>
                    <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>
                <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>
        <footer>
            <p>
                <a href="https://www.freecodecamp.org">Visit our website</a>
            </p>
            <p>123 Free Code Camp Drive</p>
        </footer>
    </div>
</body>
</html>
css 复制代码 
 h1,h2,p{
    text-align: center;
  }

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

  .established{
    font-style:italic
  }

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

 .Menu{
    width: 80%;
    background-color:brown;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    max-width:500px;
  }
  
  .flavor,.dessert{
    text-align: left;
    width:75%;
  }
  
  .price {
    text-align: right;
    width: 25%;
  }

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

  h1{
    font-size:40px;
  }
  h2{
    font-size:30px;
  }

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

三、最终代码

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> <!-- 网页标题为"Cafe Menu" -->
    <link rel="stylesheet" href="styles.css"> <!-- 引入外部样式表"styles.css" -->
</head>
<body>
    <div class="Menu"> <!-- 菜单部分 -->
        <main>
            <h1>CAMPER CAFE</h1> <!-- 咖啡馆的名称为"CAMPER CAFE" -->
            <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"> <!-- 咖啡图标的图片链接 -->
            <p class="established">Est. 2020</p> <!-- 咖啡馆成立于2020年 -->
            <hr> <!-- 水平分隔线 -->
            <section>
                <h2>Coffee</h2> <!-- 咖啡部分的标题 -->
                    <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">Visit our website</a> <!-- 链接到咖啡馆网站 -->
            </p>
            <p class="address">123 Free Code Camp Drive</p> <!-- 咖啡馆地址 -->
        </footer>
    </div>
</body>
</html>
css 复制代码 
h1,h2,p{
    text-align: center; /* 将标题和段落居中对齐 */
}

h1,h2{
    font-family:Impact,serif; /* 标题使用Impact字体 */
}

.established{
    font-style:italic; /* 建立日期使用斜体 */
}

body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); /* 设置背景图片为咖啡豆图片 */
    font-family:sans-serif; /* 使用无衬线字体 */
    padding:20px; /* 设置页面内边距为20像素 */
}

.Menu{
    width: 80%; /* 菜单容器的宽度为80% */
    background-color:brown; /* 菜单容器的背景颜色为棕色 */
    margin-left:auto; /* 自动设置左边距 */
    margin-right:auto; /* 自动设置右边距 */
    padding:20px; /* 设置菜单容器内边距为20像素 */
    max-width:500px; /* 菜单容器的最大宽度为500像素 */
}
  
.flavor,.dessert{
    text-align: left; /* 味道和甜点文本左对齐 */
    width:75%; /* 文本占据容器宽度的75% */
}
  
.price {
    text-align: right; /* 价格文本右对齐 */
    width: 25%; /* 文本占据容器宽度的25% */
}

.item p{
    display:inline-block; /* 每个菜单项的文本以内联块元素显示 */
    margin-top:5px; /* 设置文本上边距为5像素 */
    margin-bottom:5px; /* 设置文本下边距为5像素 */
    font-size: 18px; /* 设置文本字体大小为18像素 */
}

h1{
    font-size:40px; /* 设置标题字体大小为40像素 */
    margin-top:0; /* 设置标题上边距为0 */
    margin-bottom: 15px; /* 设置标题下边距为15像素 */
}
h2{
    font-size:30px; /* 设置副标题字体大小为30像素 */
}

hr {
    height:2px; /* 设置水平线的高度为2像素 */
    border-color:yellow; /* 设置水平线的边框颜色为黄色 */
    background-color: yellow; /* 设置水平线的背景颜色为黄色 */
}

.bottom-line{
    margin-top:30px; /* 设置底部线条的上边距为30像素 */
}

footer{
    font-size:14px; /* 设置页脚字体大小为14像素 */
}

a {
    color:black; /* 设置链接文本颜色为黑色 */
}

a:visited{
    color:grey; /* 设置已访问链接文本颜色为灰色 */
}

a:hover{
    color:brown; /* 设置鼠标悬停在链接上时的文本颜色为棕色 */
}

a:active{
    color:white; /* 设置点击链接时的文本颜色为白色 */
}

.address{
    margin-bottom:5px; /* 设置地址文本的下边距为5像素 */
}

img{
    display:block; /* 图片以块级元素显示 */
    margin-left:auto; /* 自动设置左边距 */
    margin-right:auto; /* 自动设置右边距 */
    margin-top:-25px; /* 设置图片上边距为-25像素 */
}
相关推荐
xiao-xiang5 分钟前
jenkins-通过api获取所有job及最新build信息
前端·servlet·jenkins
C语言魔术师21 分钟前
【小游戏篇】三子棋游戏
前端·算法·游戏
百流34 分钟前
scala文件编译相关理解
开发语言·学习·scala
匹马夕阳2 小时前
Vue 3中导航守卫（Navigation Guard）结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗？2 小时前
日历热力图，月度数据可视化图表（日活跃图、格子图）vue组件
前端·vue.js·信息可视化
雁于飞3 小时前
c语言贪吃蛇(极简版，基本能玩)
c语言·开发语言·笔记·学习·其他·课程设计·大作业
桂月二二8 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062069 小时前
ubuntu向一个pc主机通过web发送数据，pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb9 小时前
web服务器 网站部署的架构
服务器·前端·架构
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04PyTorch AMP 混合精度中grad_scaler.py的scale函数解析05Windows10安装PCL1.14.0及点云配准06密码学原理技术-第六章-introduction to pulibc-key cryptography07xgboost: Why not implement distributed XGBoost on top of spark08Oracle Scheduler: Calendaring09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10BMC 虚拟i2c访问PCA9545(switch芯片)后面的设备,为什么找不到PCA9545?