今天完成了什么:

完成头部导航栏和轮播图以及主体内容部分。

今天遇到了什么问题：

给菜单栏添加

padding-top: 1rem;

 padding-bottom: 1rem;

 width: 5rem;

移动端文字不会居中，添加了媒体查询后解决了问题。@media screen and (max-width:998px) {

.navbar-light .navbar-nav .active > .nav-link {

width: 100%;

}

2.添加hover效果后发，高度会增加，所以给盒子添加了个透明的底部边框，hover效果只是改变颜色。

3.发现轮播图按钮跑下去了。整理了下结构恢复正常。

4.不会居中，检查后是text写错了，添加text-align：center后发现图片不会居中，所以又检查了下给图片添加了display：inline-block才使其居中。

5.发现中间图标矮了些。

6，绿色的竖线边框跟原稿不对，查了下重新弄了个盒子解决。

今天收获了什么：

纯CSS实现文字一行居中，多行左对齐的方法，主要用于产品列表页面，用于产品图片下面，显示产品的名称，查了下资料说用css做很麻烦，大部分人使用js来制作，用{display: inline-block;text-align: left;}可以解决这个问题，但好像有很多局限性

学习了解了轮播图：代码模块如下

轮播图官方链接：https://getbootstrap.com/docs/4.3/components/carousel/

还可以添加交叉淡入淡出效果，在头部div添加.carousel-fade

明天计划：

继续任务。