响应式网页设计——通过创建咖啡店菜单学习基础CSS(步骤1~40）

步骤 1
正如你在 Cat Photo App 的最后几个步骤中所学习的那样，开始构建你的网页需要一个基本结构。

添加 <!DOCTYPE html> 标记和具有值为 en 的 lang 属性的 html 元素。

 <!DOCTYPE html>
<html lang="en">
  </html>

步骤 2
在 html 元素中添加一个 head 元素，接下来你可以添加 title 元素。 title 元素的文本应该是 Cafe Menu。

<head>
  <title>Cafe Menu</title>
  </head>

步骤 3
title 是网页上几个不可见附加信息之一，但它对搜索引擎和网页如何显示很有用。
在head元素中，嵌套一个 meta 元素，其属性名为 charset，值为utf-8，以告诉浏览器如何对页面进行编码。请注意，meta 元素是自闭合的。

 <head>
    <meta charset="utf-8">
    <title>Cafe Menu</title>
  </head>

步骤 4
为了准备创建一些实际的内容，在 head 元素下面添加一个 body 元素。

<head>
   <meta charset="utf-8">
   <title>Cafe Menu</title>
 </head>
 <body>
   </body>

步骤 5
是时候添加一些菜单内容。在现有的 body 元素里面添加一个 main 元素。它最终将包含有关咖啡馆提供的咖啡和甜点的价格信息。

<body>
    <main>
      </main>
  </body>

步骤 6
咖啡厅的名称是 CAMPER CAFE。在 main 元素中添加一个 h1 元素。给咖啡厅添加名称，用大写字母，使其突出显示。

<main>
      <h1>CAMPER CAFE</h1>
   </main>

步骤 7
为了让游客知道这家咖啡馆成立于 2020 年，在 h1 元素下面添加一个 p元素，文字为 Est. 2020。

<h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>

步骤 8
菜单上将有两个部分，一个是咖啡，一个是甜点。在 main 元素中添加一个 section 元素，这样你就有一个地方来放置所有可用的咖啡。

<main>
     <h1>CAMPER CAFE</h1>
     <p>Est. 2020</p>
     <section>
       </section>
   </main>

步骤 9
在 section 元素中创建一个 h2 元素，并在它里面填写文字 Coffee。

<section>
        <h2>Coffee</h2>
      </section>

步骤 10
到目前为止，在你创建的内容的演示和外观方面，你一直受到限制。为了开始控制，在 head 元素中添加一个 style 元素。

 <head>
    <style>
     </style>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
  </head>
  <body>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>

步骤 11
你可以在 style 元素中指定一个样式，并为此设置一个属性，像这样：

element {
property: value;
}
通过设置 text-align 属性值为 center，让你的 h1 元素居中，。

   <style>
      h1 {
text-align: center;
}
    </style>

步骤 12
在上一步中，你使用类型选择器来设置 h1 元素的样式。将 h2 和 p 元素居中，通过在现有的 style 元素中给它们添加一个新的选择器来实现。

  <style>
      h1 {
        text-align: center;
      }
      h2 {
        text-align: center;
      }
      p {
        text-align: center;
      }
    </style>

步骤 13
你现在有三个样式完全相同的类型选择器。你可以通过创建一个选择器列表将同一组样式添加到许多元素上。每个选择器都用逗号分隔，如下所示：

selector1, selector2 {
property: value;
}
删除三个现有的类型选择器，并将它们替换为一个选择器列表，该列表使 h1、h2 和 p 元素的文本居中。

  <style>
   h1,h2,p {
  text-align: center;
}
    </style>

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

我们已经为你创建了一个单独的 styles.css 文件，并将编辑器视图切换到该文件。你可以通过编辑器顶部的标签在不同的文件之间转换。

首先，将你创建的样式改写到 styles.css 文件中。请确保排除开头和结尾的 style 标签。


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

步骤 15
现在你在 styles.css 文件中有了 CSS，继续删除 style 元素及其所有内容。删除后，居中的文本将移回左侧。

 <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
  </head>

步骤 16
现在你需要链接 styles.css 文件，以便再次应用这些样式。在 head 元素中嵌套一个自闭合 link 元素。给它一个 rel 属性，值为 stylesheet 和一个 href 属性，值为 styles.css。

  <head>
    <link href="styles.css" rel="stylesheet"/>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
  </head>

步骤 17
为了使页面样式在移动端看起来与在桌面或笔记本电脑上相似，你需要添加一个带有特殊 content 属性的 meta 元素。

在 head 元素中添加以下内容：

  <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>

步骤 18
文本再次居中，因此指向 CSS 文件的链接是正常运行的。将另一种样式添加到文件中，将 body 元素的 background-color 属性更改为 brown。

h1, h2, p {
  text-align: center;
}
body{
 background-color: brown; 
}

步骤 19
棕色的背景使阅读文本变得困难。将 body 元素的背景颜色更改为 burlywood，使其具有一些颜色，但你仍然可以阅读文本。

body {
  background-color: burlywood;
}

步骤 20
div 元素主要用于设计布局，这与你迄今为止使用的其他内容元素不同。在 body 元素内添加一个 div 元素，然后将所有其他元素移到新的 div 内。

Inside the opening div tag, add the id attribute with a value of menu.

 <body>
     <div id="menu">
 </div>
    <main>
       
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>

步骤 21
现在的目标是使这个 div 不占用整个页面的宽度。 CSS 的 width 属性在这方面是完美的。

You can use the id selector to target a specific element with an id attribute. An id selector is defined by placing the hash symbol # directly in front of the element's id value. For example, if an element has the id of cat then you would target that element like this:

`#cat {
width: 250px;
}`
Use the #menu selector to give your element a width of 300px.

#menu{
  width:300px
}

步骤 22
CSS 中的注释看起来像这样：

/ comment here /
In your style sheet, comment out the line containing the background-color property and value, so you can see the effect of only styling the #menu element. 这将使背景再次变成白色。

 /* background-color: burlywood; */

步骤 23
Now use the existing #menu selector to set the background color of the div element to be burlywood.

#menu {
  width: 300px;
  background-color: burlywood;
}

步骤 24
Now it's easy to see that the text is centered inside the #menu element. Currently, the width of the #menu element is specified in pixels (px).

Change the width property's value to be 80%, to make it 80% the width of its parent element (body).

#menu {
  width: 80%;
  background-color: burlywood;
}

步骤 25
Next, you want to center the #menu horizontally. 你可以通过把它的 margin-left 和 margin-right 属性设置为 auto 来做到这一点。可以把页边距看作是元素周围不可见的空间。 Using these two margin properties, center the #menu element within the body element.

#menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;  
}

步骤 26
So far you have been using type and id selectors to style elements. However, it is more common to use a different selector to style your elements.

A class selector is defined by a name with a dot directly in front of it, like this:

.class-name {
styles
}
Change the existing #menu selector into a class selector by replacing #menu with a class named .menu.

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

步骤 27
To apply the class's styling to the div element, remove the id attribute and add a class attribute to the div element's opening tag. Make sure to set the class value to menu.

<div class="menu">

步骤 28
由于咖啡馆主要销售的产品是咖啡，因此你可以使用咖啡豆的图像作为页面背景。

删除 body 类型选择器中的注释及其内容。现在添加一个 background-image 属性并将其值设置为 url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)。

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

步骤 29
看起来很好。是时候开始添加一些菜单项了。在 Coffee 标题下添加一个空的 article 元素。它将包含你当前提供的每种咖啡的风味和价格。

   <h2>Coffee</h2>
          <article>
              </article>

步骤 30
article 元素通常包含多个具有相关信息的元素。在这个示例里，它将包含咖啡风味和该风味的价格。在 article 元素中嵌套两个 p 元素。第一个的文本应该是 French Vanilla，第二个的文本应该是 3.00。

<article>
            <p>French Vanilla</p>
             <p>3.00</p>
          </article>

步骤 31
从现有的咖啡/价格对开始，使用 article 元素添加以下咖啡和价格，每个元素内部有两个嵌套的 p 元素。和之前一样，第一个 p 元素的文本应该包含咖啡风味，第二个 p 元素的文本应该包含价格。

Caramel Macchiato 3.75
Pumpkin Spice 3.50
Hazelnut 4.00
Mocha 4.50

<article>
            <p>French Vanilla</p>
            <p>3.00</p>
              </article>
              <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
              </article>
                <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
              </article>
                <article>
            <p>Hazelnut</p>
            <p>4.00</p>
              </article>
                <article>
            <p>Mocha</p>
            <p>4.50</p>
          </article>

步骤 32
口味和价格目前堆叠在一起，并以各自的 p 元素居中。如果口味在左边，价格在右边，那就太好了。

给 French Vanilla p 元素添加 flavor class。

<p class="flavor">French Vanilla</p>
            <p>3.00</p>

Step 33Passed
Using your new flavor class as a selector, set the text-align property's value to left.

.flavor{
   text-align:left; 
}

步骤 34
接下来，您要将价格右对齐。为元素添加一个名为该类的类，该类的文本。pricep3.00

 <p class="price">3.00</p>

Step 35
Now align the text to the right for the elements with the price class.

.price{
  text-align: right;
}

Step 36
That is kind of what you want, but now it would be nice if the flavor and price were on the same line. p elements are block-level elements, so they take up the entire width of their parent element.

To get them on the same line, you need to apply some styling to the p elements so they behave more like inline elements. To do that, start by adding a class attribute with the value item to the first article element under the Coffee heading.

 <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p>
            <p class="price">3.00</p>
          </article>

Step 37
The p elements are nested in an article element with the class attribute of item. You can style all the p elements nested anywhere in elements with a class named item like this:

.item p { }
Using the above selector, add a display property with value inline-block so the p elements behave more like inline elements.

.item p{
  display: inline-block;
}

Step 38
That's closer, but the price didn't stay over on the right. This is because elements only take up the width of their content. To spread them out, add a property to the and class selectors that have a value of each.inline-blockwidthflavorprice50%

.flavor {
  text-align: left;
   width: 50%;
}

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

Step 39
Well that did not work. Styling the elements as and placing them on separate lines in the code creates an extra space to the right of the first element, causing the second one to shift to the next line. One way to fix this is to make each element's width a little less than .pinline-blockpp50%

Change the value to for each class to see what happens.width49%

.flavor {
  text-align: left;
  width: 49%;
}

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

Step 40
That worked, but there is still a little space on the right of the price.

You could keep trying various percentages for the widths. Instead, use the back space key on your keyboard to move the p element with the class price next to the p element with the class flavor so that they are on the same line in the editor. Make sure there is no space between them.

 <p class="flavor">French Vanilla</p><p class="price">3.00</p>

响应式网页设计——通过创建咖啡店菜单学习基础CSS(步骤1~40）

波波鱼

引用和评论

计算机组成原理

Vue.js-Vue实例

你可能不知道的图片加载相关知识

更强大、更灵活！ defineModel 重新定义双向绑定

使用CSS给标题添加书名号并超出省略

Base64编码的“暗坑”：解密失败？可能是这些原因！

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！