今天完成的事情

任务八之前页面的重构

今天将之前自己做的页面重新修改了一次，主要是应用了bootstrap的栅格布局系统，从而让页面在不同端的访问页面布局不会混乱，同时应用媒体查询使得不同端访问时能有更好的浏览体验，以下分别是电脑端，平板端，手机端的浏览效果

电脑端

平板端

手机端

今天还将之前的页面导航栏进行了修改，应用bootstrap中的导航栏类，从而在使用手机等设备访问时能更加方便，效果如下

今天遇到的问题

问题：还原ui图头部导航栏时，文字位置不在需求位置，因为是引用的bootstrap库，所以不知道该如何处理

解决：想起来之前引用bootstrap库制作轮播图过程中，指示符同样不是需求的样式，最终在师兄的指导下，在bootstrap本地库css文件内，找到指示符代码进行了修改，从而达到需求的样式，今天同样是在bootstrap的css文件中进行修改完成的

今天的收获

1.解决上述遇到的问题过程中，在查找相关css样式时，从开始的无从下手，到一个个参数对应的类中去找，最后直接在浏览器中调试界面，进行代码的定位，找到其父类名，从而在css文件中查询修改，现在在进行本地bootstrap库的css文件进行修改已基本掌握。

2.学会使用bootstrap栅格布局，每个行分为12份，通过份数的分配来完成屏幕布局的适配效果，通俗来说，就是在手机端等小屏幕设备访问的时候，原本电脑一行显示4个的盒子，在手机上只显示一个

3.学会使用媒体查询来适应不同端访问页面的布局，以下是示例，表示屏幕分辨率在460-792之间时，.gaoxiao-wrap的css样式是什么

4.bootstrap折叠导航栏

导航栏一般放在页面的顶部。

可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类:

明天的计划

1.应用bootstrap栅格布局完成下列内容

2.了解上面图二中边框的效果是否为border效果，是否是使用:hover来完成