今天完成的事情：

1、完成了列表头下拉菜单的制作，引用bootstrap中的下拉菜单组件达到下拉的效果。

今天一大半时间都是被这个bootstrap给搞的头晕，因为bootstrap中的下拉菜单组件中有链接，通过link来链接，要做出下拉菜单的效果，然后我是直接复制代码粘贴到vscode中，然后通过修改它的样式来达到自己想要的下拉菜单效果 。它的class类名是固定的不能修改的。

这个是引用bootstrap的下拉组件。我在菜鸟上找的。

还有button按钮元素要给它设置下拉菜单，就必须要加一个class类名.btn-group 中放置按钮和下拉菜单即可。类名是固定的，html代码如下：

以上类名是不可以更改的，因为bootstrap组件中有自带的属性，所以才能显示出以下网页的效果，下拉组件也要运用到<ul>和<li>的无序列表标签，如下图：

点击就会出现成这样的效果，这是组件自带的属性，所以你要想写出你要的效果就需要自己用到权重去覆盖它原本的属性，来达到你要的下拉菜单的效果，

我今天一直在弄这个，想弄懂但是师兄说这个只要知道怎么用就行了，后面用的可能性比较少，今天在修改css样式的时候怎么覆盖属性我纠结了好久，也在代码中试了好久，但是完全不能覆盖，也不能起到作用，后面的解决方法在遇到的问题中有解决方案。

其实代码都是复制粘贴的，因为手打的会出错，所以基本上只需要设置好你要的内容，和把你想要的css样式设置好就行，在用的时候多看看f12调试的网页效果对比下，例如加了什么属性你就在页面刷新下，看会出现怎样的问题，然后再重点解决，我接受的比较慢，所以只能一个一个试看到效果后才能理解。所以在师兄指导后，我还是看了很久，然后才稍稍有点领悟，今天的一天有点崩溃，但是最后解决的结果我还是很欣慰的，一天的时间没有白浪费。

2、完成一小部分的无序列表的主体编写。

我之前还是准备用<ul>和<li>标签来写的，后来在想了下如果还是用<div>嵌套的话，用这个会有点麻烦，因为任务的效果是用雪碧图，还有文字要分行单独显示，所以我用<div>嵌套然后使用块级元素就一样能达到效果，html代码如下：

我用<h5>这个标题块级元素来写，我发现<h>标签是自带margin-top和bottom为10的值，所以不需要自己另外设置margin的属性来达到文字之间的空隙的效果，网页显示效果如下图：

基本上列表主体部分还好，做出一个div后，后面写出来就很快了。

主体部分我是用的<main>标签来写的，因为我发现用main来写主体，只需要给main设置margin-top属性就行，不会像我在做任务五的时候出现列表主体往header头部那里挤没了，没有给main设外边距值的网页效果如下：

因为没有给main设margin值就会出现内容上移的现象，要让main与header产生边距才能达到出现滚动条的效果。

设置了margin-top的网页效果如下：

这样就能知道你设置的属性在网页上是怎样的效果。

3、了解了<main>标签

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释：在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

4、用雪碧图网页制成的图片运用到代码中。

明天的计划：

完成列表主体的部分和底部footer页脚的代码制作，争取明天完结任务六。

遇到的问题：

1、我在编码列表时，我在<span>里用border设置的三角形放在button这个块级按钮元素里后，<span>就会有宽度和高度，如下图1：

我有点不太理解这个宽高是怎么来的，后来我给<span>设置了display：inline-block后，高度就变成了3。如下图2：

html代码：

css代码：

如上：我给子级.btn-default设border：none，还是会有边框效果。后面师兄就给我做了示范，css代码如下：

.menu>权重最高，.dropdown权重次之，然后在给.btu-default设置才能起到覆盖作用。

收获：

遇到难点的时候，不要着急，沉下心来慢慢理解，用的多了就理解了。