【CSS】基础CSS设计咖啡店菜单

站长

2022年12月09日 01:20 · 阅读数 71

前言

本文主要内容: 利用最基础的CSS知识,构建一个看着还不错的咖啡店菜单

虽然fCC有着非常好的一套流程，但是感觉做完后再进行一个总结会更有收获一点

项目预览与分析

【CSS】基础CSS设计咖啡店菜单可以看到这个小项目应该可以由如下几层组成

红色的主体菜单
黄色的三个分别是header、main、footer
绿色的两个结构相似的section

所以加上书写的规范，最终可以明确项目的结构如下

<!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">
        <header>
            <h1>CAMPER CAFE</h1>
            <p>Est. 2020</p>
        </header>
        <hr>
        <main>
            <section>
                <h2>Coffee</h2>
                <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>
            </section>
            <section>
                <h2>Desserts</h2>
                <article>
                    <p>Donut</p><p>1.50</p>
                </article>
                <article>
                    <p>Cherry Pie</p><p>2.75</p>
                </article>
                <article>
                    <p>Cheesecake</p><p>3.00</p>
                </article>
                <article>
                    <p>Cinnamon Roll</p><p>2.50</p>
                </article>
            </section>
        </main>
        <hr>
        <footer>
            <p>
                <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
            </p>
            <p>123 Free Code Camp Drive</p>
        </footer>
    </div>
</body>
</html>

可以看到未添加CSS样式时的网页如下，在后文中将逐步进行美化【CSS】基础CSS设计咖啡店菜单

menu框架与body背景

首先可以先用图片填充body的背景，用纯色填充menu的背景，

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

获得下图【CSS】基础CSS设计咖啡店菜单则针对menu的宽度和位置进行进一步的调整

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

【CSS】基础CSS设计咖啡店菜单

menu中文字的位置与大小

然后我想先对menu中文字的布局进行调整

从文字的位置开始，

header中的文字居中
main中的两个标题居中，商品名与价格一一对应在同一行
footer中的文字居中所以可以得到如下CSS代码

/* 让所有文字居中 */
h1, h2, p {
    text-align: center;
}
/* 分别设置商品和价格的容器宽度以及其中文字的对齐方式 */
.goods {
    text-align: left;
    width: 75%;
}
.price {
    text-align: right;
    width: 25%;
}
/* 设置一行一个item */
.item p {
    display: inline-block;
}

【CSS】基础CSS设计咖啡店菜单再设置文字的大小，让比例看起来更舒服一点

.item p {
    display: inline-block;
    font-size: 18px;
}
h1 {
    font-size: 40px;
}
h2 {
    font-size: 30px;
}
footer {
    font-size: 14px;
}

到这里文字的基本布局已经完成了【CSS】基础CSS设计咖啡店菜单

menu整体的进一步美化

可以看到文字是紧紧贴着menu的边缘的，所以我们可以通过padding: 20px来填充menu的边缘，从而让文字显得不那么局促

然而填充了padding后，店铺名CAMPER CAFE显得离顶部有了些距离。这是因为h1默认存在一定的padding-top，所以我们设置margin-top: 0，便能有效控制店铺名上方的空白；同样此时顶部两行文字也显得过远了，所以选择在h1添加margin-bottom: 15px再来控制一下间距

以及商品和商品间的间距显然过大了，通过margin-top和margin-bottom进行调整

预览中还存在着两张图片，在html中导入，并添加如下代码控制其位置

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

然而仅仅通过上述代码控制位置，显得副标题和图片间距过大了，而这可以调整margin-top: -25px来优化

预览中还存在着两根与我们目前不同的分割线，通过下面的代码进行调节

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

经过上面的调整，我们就只欠缺一些细节的优化了【CSS】基础CSS设计咖啡店菜单

细节的优化

首先是footer处的超链接显得颜色格格不入

a {
  color: black;
}

通过如此设置让它的颜色展示为黑色，而还能进行进一步不同的优化

a {
    color: black;
}
a:visited {
    color: black;
}
a:hover {
    color: brown;
}
a:active {
    color: brown;
}

然后是对发表年份可以做一个斜体的美化

.established {
    font-style: italic;
}

此外，还能进行一些字体的替换，这些就不再赘述。

【CSS】基础CSS设计咖啡店菜单

小结

容器的居中：margin: auto
容器内文字的居中：text-align: center
让两个容器位于同一行，需要先在两个容器的父容器中设置display，再对这个两个容器width进行调整
对于超链接可以进行不同状态的调整，包括visited hover active以及本身

原项目链接：chinese.freecodecamp.org/learn/2022/…

我的github链接：github.com/newfish-cmy…

转载自:https://juejin.cn/post/7151706259488505863