学习项目：https://www.bilibili.com/video/BV1A34y1e7wL?p=100
0 设计
OMNIFOOD 是一个使用人工智能来交付膳食计划的专业和值得信赖的公司。目前提供了一些内容和图片：
计划和收集网站内容
- 给谁做网页：客户
- 网页的用途：
- 商业目标：销售月度订阅
- 用户目标：吃的好，高效且省钱
- 目标用户：繁忙且喜欢技术，对健康饮食感兴趣，以及有一份不错薪水的工作
设计站点地图
只有一页所以无需设计
定义网页个性
原文中提到：我们首先是一个技术公司，并且主要关注消费者的健康饮食。
再结合之前的目标用户，所以我们应该使用 网页个性：创业或乐观，而又因为公司关注健康饮食，还可以加点 网页个性：安静或优雅。
规划网站模块
- 导航
- 头版
- 社会评价等
- 如何实现
- 几种餐品 (以及一个额外的列表显示所有餐品)
- 客户反馈+相册块
- 价格 + 特点介绍
- 页脚
- 号召
设计要加入的组件
- 导航和Logo就不用考虑了，默认样式就行
- Hero头版有很多选择，可以选择
- 接着是社会评价等，依然是默认的并排样式
- 而具体介绍则采用横排卡片的形式呈现，或者采用Z模式的形式展示
- 餐品呈现使用购物车卡片形式呈现
- 而客户评价和画廊（可以用上提供的一些人像图片）就采取并排的表格呈现
整体布局的草图如下所示：
1 文件配置
2 头部
需要 h1, p，来显示文字部分，还有两个按钮，这些放到一个盒子中。第二是右边的图片，也要放盒子里。至于上面的导航栏以及下面的社会评价就暂时不看。
用到的一些小技术：
代码
<section class="section-hero">
<div class="hero-container">
<div class="hero-text-box">
<h1 class="heading-primary">
A healthy meal delivered to your door, every single day
</h1>
<p class="hero-description">
The smart 365-days-per-year food subscription that will
make you eat healthy again. Tailored to your personal
tastes and nutritional needs.
</p>
<a href="#" class="btn btn--full margin-right-sm"
>Start eating well</a
>
<a href="#" class="btn btn--secondary">Learn more ↓</a>
<div class="delivered-meals">
<div class="delivered-imgs">
<img
src="content/img/customers/customer-1.jpg"
alt="客户图片"
/>
<img
src="content/img/customers/customer-2.jpg"
alt="客户图片"
/>
<img
src="content/img/customers/customer-3.jpg"
alt="客户图片"
/>
<img
src="content/img/customers/customer-4.jpg"
alt="客户图片"
/>
<img
src="content/img/customers/customer-5.jpg"
alt="客户图片"
/>
<img
src="content/img/customers/customer-6.jpg"
alt="客户图片"
/>
</div>
<p class="delivered-text">
<span>250,000+<span/> meals delivered last year!
</p>
</div>
</div>
<div class="hero-img-box">
<img
src="content/img/hero.png"
class="hero-image"
alt="享受食物的女人图片"
/>
</div>
</div>
</section>接下来编写CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: "Rubik", sans-serif;
line-height: 1;
font-weight: 400;
color: #555;
}
.section-hero {
background-color: #fdf2e9;
padding: 9.6rem 0;
}
.hero-container {
max-width: 130rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 9.6rem;
}
.heading-primary {
font-size: 5.2rem;
font-weight: 700;
line-height: 1.05;
color: #333;
margin-bottom: 3.2rem;
letter-spacing: -0.5px;
}
.hero-description {
font-size: 2rem;
line-height: 1.5;
margin-bottom: 4.8rem;
}
.delivered-meals {
margin-top: 8rem;
display: flex;
align-items: center;
gap: 1.6rem;
}
.delivered-imgs {
display: flex;
}
.delivered-imgs img {
width: 4.8rem;
height: 4.8rem;
border-radius: 50%;
margin-right: -1.4rem;
border: 3px solid #fdf2e9;
}
.delivered-imgs img:last-child {
margin-right: 0;
}
.delivered-text {
font-size: 1.8rem;
}
.delivered-text span {
font-weight: 700;
color: #cf711f;
}
.hero-image {
width: 100%;
}
.btn:link,
.btn:visited {
text-decoration: none;
font-size: 2rem;
font-weight: 600;
display: inline-block;
padding: 1.6rem 3.2rem;
border-radius: 9px;
transition: background-color 0.3s;
}
.btn--full:link,
.btn--full:visited {
color: #fff;
background-color: #e67e22;
}
.btn--full:hover,
.btn--full:active {
background-color: #cf711f;
}
.btn--secondary:link,
.btn--secondary:visited {
background-color: #fff;
color: #333;
}
.btn--secondary:hover,
.btn--secondary:active {
background-color: #fdf2e9;
box-shadow: inset 0 0 0 3px #fff;
}
.margin-right-sm {
margin-right: 1.6rem !important;
}
nav 导航部分
需要一个图标，一个导航元素，记得也要放置到header容器，此时还可以把之前的herosection放到main标签容器中，算是SEO优化。
CSS 也有快有一百多行，我们需要进行分区以方便维护：
/**************************/
/* 可复用组件 */
/**************************/代码
HTML则创建一个 header 标签，里面一个img标签，一个nav盒子。导航中使用 ul 无序列表实现。
<header class="header">
<img
class="logo"
alt="Omnifood logo"
src="content/img/omnifood-logo.png"
/>
<nav class="main-nav">
<ul class="main-nav-list">
<li><a class="main-nav-link" href="#">选项卡 1</a></li>
<li><a class="main-nav-link" href="#">选项卡 2</a></li>
<li><a class="main-nav-link" href="#">选项卡 3</a></li>
<li><a class="main-nav-link" href="#">选项卡 4</a></li>
<li>
<a class="main-nav-link nav-cta" href="#">选项卡 5</a>
</li>
</ul>
</nav>
</header>CSS 中将无序列表的样式改为空，并设置flex布局，配置一下gap，居中对齐。导航链接则更改一下样式和字体大小，并把最后一个CTA按钮重点显示。
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fdf2e9;
height: 9.6rem;
padding: 0 4.8rem;
}
.logo {
height: 2.2rem;
}
.main-nav-list {
display: flex;
align-items: center;
list-style: none;
gap: 3.2rem;
}
.main-nav-link:link,
.main-nav-link:visited {
font-size: 2rem;
font-weight: 500;
display: inline-block;
text-decoration: none;
color: #333;
}
.main-nav-link:hover,
.main-nav-link:active {
color: #e67e22;
transition: all 0.3s;
}
.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {
padding: 1.2rem 2.4rem;
border-radius: 9px;
background-color: #e67e22;
color: #fff;
transition: all 0.3s;
}
.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active {
background-color: #cf711f;
}How it Work 介绍部分
这部分的结构有重用，所以先把网格CSS写一下：
.container {
/* 1140px */
max-width: 120rem;
padding: 0 3.2rem;
margin: 0 auto;
}
.grid {
display: grid;
column-gap: 6.4rem;
row-gap: 9.6rem;
}
.grid--center-v {
align-items: center;
}
.grid--2-cols {
grid-template-columns: repeat(2, 1fr);
}
.grid--3-cols {
grid-template-columns: repeat(2, 1fr);
}
.grid--4-cols {
grid-template-columns: repeat(2, 1fr);
}之后先用html把内容整上去，层级为：
section
// 整个section的标题
--container
----span
----heading-secondary
// 按 Z-pattern 循环三次
--container grid grid--col-2 grid-center-v
----step-text-box
------step-number
------heading-tertiary
------step-decription
----step-img-box
------step-img再配置标题字体，颜色依然是跟主标题一样的灰色，因为是创业风格，section的简述用span标签，颜色为主色的暗色，且大小小于section标题。
Z-pattern的文字部分先将序号放大并颜色放淡，引人注目的同时优先级低于小标题，标题依然是更改字号字重，字母间距还有底边距。下面的描述则更改一下字号字重以及行距。
图片部分则先在盒子上用flex将图片居中，设置图片大小为父元素的45%，再加些点缀，用伪元素创建两个圆形，并绝对定位到图片的中心且位于图片背后。
相关技术：
社会评价部分
在HTML中实现后，先设置主标题的字号，粗体，颜色，字母间距还有利用 text-align:center 来居中对齐，再加上底边距。以及整个模块的上下边距分别为 4.8rem 和 3.2rem。
对于logo部分，就直接用 flex 布局来实现。
我们想让LOGOs部分不与下面部分对齐，而是稍微小一号，除了在盒子中加padding，还可以直接修改justify-content为 space-around，这样会在左右两侧添加空白：
对于这些图标，它们的颜色过于不统一，除了使用图像处理软件解决，我们还可以使用CSS技巧。
相关技术：
餐饮卡片+菜单部分
在HTML中先实现基本元素，第一个是当前块的小标题，然后是整块的标题 Omnifood AI chooses from 5,000+ recipes。接着是三个盒子，前两个是meal， 最后一个盒子为diets。
在 meal 中，首先是一个图片，然后显示当前餐所属标签类别，还有餐名。接下来是一个列表描述，最后还要加上图标。
对于前两个标题，直接套用之前特征介绍块的标题部分就行：
<div class="container">
<span class="subheading"> How it works </span>
<h2 class="heading-secondary">
Your daily dose of health in 3 simple steps
</h2>
</div>接着的三个盒子要并列，所以用上之前的 grid 布局，再加上三列类 grid—3-cols。之后设置图片宽度为盒子的 100% 即可避免大小溢出。
设置 meal-title 的样式，仿照小标题的形式：
.meal-title {
font-size: 2.4rem;
font-weight: 600;
color: #333;
margin-bottom: 3.2rem;
}列表的部分则依然取消选项符号后使用flex来添加间距。令字号为1.8rem即可。
.meal-attributes {
list-style: none;
display: flex;
flex-direction: column;
gap: 2rem;
}
.meal-attribute {
font-size: 1.8rem;
}
.meal-img {
width: 100%;
}至于图标，我们之前是用HTML中内嵌SVG代码来实现网页因素：图标，例如轮播(Carousel), 分页(Pagination)。这里使用另一种导入方案，直接用js脚本链接放入整个图标库，并用ion-icon标签来添加到html中。
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>将这两行代码放入 head 标签内即可，需要哪个图标就去网站上找然后复制html代码。
接下来就设置图标大小还有颜色，以及与描述文本之间的距离，还有文本中的数字高亮。以及标签的设置，让其变圆且更改颜色。
这里的内容和图片显得有些拥挤，创建一个盒子meal-content 来将文本分离出来并加入padding即可。
完成后copy一份放出来两个盒子：
第三块放所有餐品的列表，这里就不再用一个卡片包裹，而是直接用list来代替：
我们也不能光罗列，还得有个链接能让用户去看看剩下的菜品。所以直接在该节末尾再放一个链接：
<div class="container all-recipes">
<a href="#" class="link"> See all recipes →</a>
</div>