总体分为四部分

一、标题栏部分

标题栏总体为渐变色

background-image: linear-gradient(135deg, #FFD000 0%, #FFBD00 100%);

设置渐变属性的同时要为不支持渐变的浏览器做兼容设置普通颜色

background: #FFD000;

只有块级或行级块元素可以在父元素中使用line height使其垂直居中
为header设置display: flex; 使其中的元素能够呈一行排列
左右两边固定长度，中间设置flex: 1;使中间自适应占满剩余空间
span是行级元素，水平居中时要设置text-align: center;

二、广告栏部分

将整体对外设置内边距使其距上下左右均有一定距离
p为块级元素，将两行文字分别包裹在两个p标签内，并设置display: inline-block; 使其分为两行展示在广告栏内
右侧按钮可通过定位定位至右侧

三、导航栏部分

用ul li 包裹十个图标
在导航栏后加伪元素，以便实现0.5px的下边框

#pic::after{
    content: '';
    display: block;
    width: 100%;
    border-bottom: 1px solid #DDD8CE;
    transform: scaleY(0.5);

为ul设置display: flex; 使其中的li标签能够以一行的形式展示（li为块级元素）
同时为ul设置flex-wrap: wrap; 使其不会超出页面最大宽度滑轮滚动展示，而是换行展示
为li设置margin: 0 auto; 使其内的文字和图片能够居中展示
行高在rem文件中默认设置为.015rem，若想改变，应重新为li内文字设置行高，来改变文字与图表之间的距离

line-height: .01rem;

四、主内容部分

为整体设置padding-left: .2rem;使其距左边有一段空白 margin-top: .2rem;使其距第三部分有一段空白
为整体设置

#content：：before{
    content: '';
    display: block;
    width: 100%;
    border-bottom: 1px solid #DDD8CE;
    transform: scaleY(0.5);
}

使其具有上0.5px边框 3. 为“猜你喜欢”（h4标签包裹）设置0.5px下边框时，为h4设置伪元素，这时，文字与边框均为h4内子元素，边框紧贴文字显示，这时为h4::after设置

h4::after{
position: absolute;
    bottom: 0;
    left: 0;
}

并为其父元素h4设置

h4{
    position: relative;
}

以实现边框在h4元素块底边展示

图片img用div包裹，并为div设置溢出隐藏，同时将img与div的长宽设置成相同，以实现不同尺寸、不同形状的图片的尺寸统一
为每一个section设置display: flex;以便图片在右侧、文字在左侧展示
为section设置0.5px下边框，section::after下边框与section其他子元素在一起紧贴排列导致顺序混乱需定位将其位置提出来

section::after{
    content: '';
    display: block;
    width: 100%;
    border-bottom: 1px solid #DDD8CE;
    transform: scaleY(0.5);
    position: absolute;
    bottom: 0;
    left: 0;
}

由于价钱与其单位“元”的大小不一，可为价钱设置伪元素，伪元素内容为'元'，在伪元素内为其单独设置大小

.content-princenum::after{
    content: '元';
    font-size: .24rem;
    color: #F60;
}

8.为“已售38308”设置定位，使其靠右展示

position: absolute;
    right: 0;
    bottom: 0;

9.section已经设置display: flex;属性，接下来应为右侧文字部分设置flex: 1;让文字部分占满剩余部分，而不是被文字内容撑开，从而避免内容不同造成的右侧空间大小不同

关于美团外卖

一、标题栏部分

二、广告栏部分

三、导航栏部分

四、主内容部分