1.目标效果
2.布局效果
3.顶端部分制作效果
问题：img和p无法同时垂直居中显示，img会顶端对齐，p会底部对齐
解决方法：把img作为背景加入；用两个div分别做img和p的容器再进行格式调整
4.导航栏部分制作效果
要点：导航栏效果可用ol/li标签添加样式实现
5.内容部分
要点：边距什么的慢慢嗑吧
6.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
font-size: 14px;
}
#slogan{
width: 40%;
height: 184px;
margin: 0 auto;
background-image: url(./img/06b72d65e6034fbd8c62be3556bea8eb.jpeg);
background-repeat: no-repeat;
}
#banner{
width: 74%;
height: 500px;
margin: 0 auto;
background-image: url(./img/5060bbbca3f64ab5b37ad1b3d019acce.jpeg);
background-repeat: no-repeat;
}
#container{
display: flex;justify-content: space-around;
width: 74%;
height: 600px;
margin: 6px auto;
}
#one{
width: 69%;
height: 600px;
border: solid 2px black;
margin-right: 20px;padding: 6px;
}
#two{
width: 29%;
height: 600px;background-color: bisque;
border: solid 2px black;
}
#slogan p{
display: inline-block;
height: 184px;
line-height: 184px;
margin-left: 209px;
font-size: 23px;
}
#banner li{
width: 20%;
height: 40px;
display: inline-block;
padding-left: 30px;
font-size: 20px;
font-weight: 600;
color: white;
line-height: 40px;
cursor: pointer;
}
.one_div{
height: 35%;width: 90%;
border-bottom:dashed 1px black;
margin: 0 auto;
text-align: center;
}
#one div:nth-child(1) p{
line-height: 30px;
height: 30px;
}
#one h3{
height: 45px;
line-height: 45px;
font-size: 18px;
}
#one div:nth-child(2) p:nth-child(2){
line-height: 26px;
text-align: left;
text-indent: 2em;
}
#one div:nth-child(2) p:nth-child(3){
font-size: 10px;
color: gray;
text-align: left;
margin-top: 8px;
}
#one img{
width: 100%;
margin-top: 8px;
}
#two dt{
height: 30px;
background-color: rgb(249, 85, 85);
color: white;
font-size: 17px;
text-align: center;
line-height: 30px;
}
#two dd{
font-size: 15px;
height: 30px;
line-height: 30px;
padding-left: 20px;
}
</style>
</head>
<body>
<div id="slogan">
<p>Kentucky Fried Chicken</p>
</div>
<div id="banner">
<ul>
<li><a>首页</a></li>
<li><a>菜单</a></li>
<li><a>关于KFC</a></li>
<li><a>联系KFC</a></li>
</ul>
</div>
<div id="container">
<div id="one">
<div class="one_div">
<h3>KFC企业文化</h3>
<p>口号“生活如此多娇”、“尽情自在肯德基”。</p>
<p>肯德基来到中国已经35年了，肯德基在中国的35年，是“立足中国，</p>
<p>融入生活”的35年，35年来，肯德基一直都在努力探索，把贴心的服务回馈给广大</p>
<p>中国消费者，如今中国肯德基已在1000多个城市和乡镇开设了8000余家连锁餐厅</p>
<p>遍及中国大陆的所有省、直辖市和自治区</p>
</div>
<div class="one_div">
<div style="display: flex;justify-content:space-between;">
<h3>美味推荐2</h3>
<h3 style="color: rgb(255, 72, 72);">老北京鸡肉卷</h3>
</div>
<p>这个是我最喜欢的单品之一，它的口味也确实相当的不错，鸡肉卷中的饼，很有韧劲，
里面的肌肉酥脆中透着柔嫩，再搭配一些黄瓜条，用他们调制的酱咬上一口。巴拉巴拉
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
巴拉巴拉巴拉巴拉。</p>
<p>推荐指数 100% 好评率 100%</p>
</div>
<div>
<img src="./img/e4d2b91f271347c6bd1d6207e33daada.jpeg">
</div>
</div>
<div id="two">
<dl>
<dt>热门推荐</dt>
<dd>热燕麦拿铁-中</dd>
<dd>焦糖玛奇朵-中</dd>
<dd>热美式-大</dd>
<dd>热蓝山-中</dd>
</dl>
<dl>
<dt>开心下午茶</dt>
<dd>四味小食拼盘</dd>
<dd>葡式蛋挞四个</dd>
<dd>人气餐随心选A</dd>
<dd>人气餐随心选B</dd>
<dd>人气餐随心选C</dd>
</dl>
<dl>
<dt>儿童餐</dt>
<dd>快乐童书餐</dd>
<dd>亲子图书套餐</dd>
<dd>美味儿童餐</dd>
</dl>
</div>
</div>
</body>
</html>
7.改进-移动端适配版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
font-size: 14px;
}
@media screen and (max-width:500px){
*{
font-size: 7px;
}
}
#slogan{
width: 100%;
}
#slogan p{
width: 33.21rem;height: 13.14rem;
background-image: url(./img/06b72d65e6034fbd8c62be3556bea8eb.jpeg);
background-repeat: no-repeat;background-size: contain;
line-height: 13.14rem;
margin: 0 auto; text-align: right;
font-size: 1.64rem;
}
#banner{
width: 100%;
}
#banner img{
display: block;
width: 100%;
}
#banner ul{
width: 100%;
height: 2.86rem;
background-color: rgb(244, 63, 63);
}
#banner li{
width: 23%;
height: 2.86rem;
display: inline-block;
text-align: center;
font-weight: 600;
color: white;
line-height: 2.86rem;
cursor: pointer;
}
#container{
display: flex;justify-content: space-around;
width: 100%;
margin-top: 0.43rem;
}
#one{
width: 69%;
border: solid 0.14rem black;
margin-right: 1.43rem;padding: 0.43rem;
}
.one_div{
border-bottom:dashed 0.07rem black;
}
#one div:nth-child(1) p{
line-height: 2.14rem;
text-align: center;
}
#one h3{
line-height:3.22rem;
font-size: 1.29rem;
text-align: center;
}
#one div:nth-child(2) p:nth-child(2){
line-height: 1.86rem;
text-align: left;
text-indent: 2em;
}
#one div:nth-child(2) p:nth-child(3){
font-size: 0.72rem;
color: gray;
text-align: left;
margin-top: 0.57rem;
}
#one img{
width: 100%;
margin-top: 0.57rem;
}
#two{
width: 29%;
border: solid 0.15rem black;
}
#two dt{
background-color: rgb(249, 85, 85);
color: white;
font-size: 1.3rem;
text-align: center;
line-height: 2.9rem;
}
#two dd{
font-size: 1.1rem;
line-height: 2.9rem;
padding-left: 1.4rem;
}
</style>
</head>
<body>
<div id="slogan">
<p>Kentucky Fried Chicken</p>
</div>
<div id="banner">
<ul>
<li><a>首页</a></li>
<li><a>菜单</a></li>
<li><a>关于KFC</a></li>
<li><a>联系KFC</a></li>
</ul>
<img src="./img/5060bbbca3f64ab5b37ad1b3d019acce.jpeg" style="width: 100%;">
</div>
<div id="container">
<div id="one">
<div class="one_div">
<h3>KFC企业文化</h3>
<p>口号“生活如此多娇”、“尽情自在肯德基”。</p>
<p>肯德基来到中国已经35年了，肯德基在中国的35年，是“立足中国，</p>
<p>融入生活”的35年，35年来，肯德基一直都在努力探索，把贴心的服务回馈给广大</p>
<p>中国消费者，如今中国肯德基已在1000多个城市和乡镇开设了8000余家连锁餐厅</p>
<p>遍及中国大陆的所有省、直辖市和自治区</p>
</div>
<div class="one_div">
<div style="display: flex;justify-content:space-between;">
<h3>美味推荐2</h3>
<h3 style="color: rgb(255, 72, 72);">老北京鸡肉卷</h3>
</div>
<p>这个是我最喜欢的单品之一，它的口味也确实相当的不错，鸡肉卷中的饼，很有韧劲，里面的肌肉酥脆中透着柔嫩，再搭配一些黄瓜条，用他们调制的酱咬上一口。巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉。</p>
<p>推荐指数 100% 好评率 100%</p>
</div>
<div>
<img src="./img/e4d2b91f271347c6bd1d6207e33daada.jpeg">
</div>
</div>
<div id="two">
<dl>
<dt>热门推荐</dt>
<dd>热燕麦拿铁-中</dd>
<dd>焦糖玛奇朵-中</dd>
<dd>热美式-大</dd>
<dd>热蓝山-中</dd>
</dl>
<dl>
<dt>开心下午茶</dt>
<dd>四味小食拼盘</dd>
<dd>葡式蛋挞四个</dd>
<dd>人气餐随心选A</dd>
<dd>人气餐随心选B</dd>
<dd>人气餐随心选C</dd>
</dl>
<dl>
<dt>儿童餐</dt>
<dd>快乐童书餐</dd>
<dd>亲子图书套餐</dd>
<dd>美味儿童餐</dd>
</dl>
</div>
</div>
</body>
</html>
8.效果展示
QQ录屏20221212133158
![[附源码]Node.js计算机毕业设计电子购物商城Express](https://img-blog.csdnimg.cn/2d82967ef9b444ff95f354b9a19fb367.png)
![[附源码]计算机毕业设计电商小程序Springboot程序](https://img-blog.csdnimg.cn/dba09e01e9ae47a2bc1e8c01bd30bdcc.png)
![[附源码]计算机毕业设计的云网盘设计Springboot程序](https://img-blog.csdnimg.cn/4f5351e6f24a4d069d2c39ddd9fd0726.png)