昨天写的日报忘了提交，和今天的一起提交。

今天完成的事情：

任务8第一个页面做完，基本没有问题，玩了flex游戏，对flex有更深刻的印象，第一个页面实现自适应各种屏幕。第2个页面做了导航栏。

明天计划的事情：

做第2个页面，争取做完。

遇到的问题：

今天遇到了图片太宽，把边框挤掉，我给它套了一个div，然后给了一个高，但是屏幕变小时，点击图片hover效果时，就不行了吧边框直接挤掉了，因为图片本身宽度，大于系统分配给他的宽度。

我用限制它宽度的方法解决了这个问题。

.img-photograph img{
    max-width: 200px;
}
.photograph:hover{
    border: 1px solid #919091;
}
.box-circle{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin-right: 3px;
    background-color: black;

限制一下图片的宽度就完美解决问题，还有上面的图片切下来很正常，但是引用上去就变形了，找了很长时间，才发现原因，因为我用到的框架，它给图片加的有东西，我给了图片

.content-box{
    text-align: center;
    margin-top: 50px;
}
.img-box{
    height: 64px;
}

加上固定宽度，就解决了问题，

.box-circle{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin-right: 3px;
    background-color: black;
}
.friendship-link{
text-align: center;
    margin-bottom: 10px;
}

做了一个小圆点放在字旁边，与字体垂直居中，并且一行、

div class="row">
    <div class=" col-md-3  col-sm-6 detailed-introduction ">
        <div class="friendship-link">
        <div class="box-circle">

今天用的最多的就是框架，用

container 

套着所有元素，就可以让元素垂直居中并且自动分配距离，row就是col-md-3就是一行里面的元素，可以分配大小

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

还有就是换行       可以使用强制换行符号<br />换行。如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行         可以使用<p.>标签来实现大换行。如果在一个文章里需要分段换行形式，可以使用<p>标签来实现换行       可以使用CSS设置宽度自动换行。我们可以在一个div里，添加一个div并加入css样式，对加入的div设置对应的css宽度即可实现自行换行。

收获：

做完第一个页面，对栅格系统有更好的认识，换行有了新了解。

今天完成的事情：9月5日

做完了第2个页面，还差一个动画效果，基本完成，任务8第2个页面，我引用了第一个页面的头部和尾部，今天学会了gird布局。

明天计划的事情：

做完任务8准备小课堂。

遇到的问题：

布局的问题，写那个人物介绍我一开始准备，用flex加上使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row">   <div class="col-sm-9">     Level 1: .col-sm-9     <div class="row">       <div class="col-xs-8 col-sm-6">         Level 2: .col-xs-8 .col-sm-6       </div>       <div class="col-xs-4 col-sm-6">         Level 2: .col-xs-4 .col-sm-6       </div>     </div>   </div> </div>

一个个的往里面套div解决这个问题，师兄给我说了gird布局，我找了gird布局然后开始用，

收获

还知道了flexbox布局

使用 display: grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中。与 flexbox 类似，网格项（grid items）的源顺序无关紧要。你的 CSS 可以以任何顺序放置它们，这使得使用 媒体查询（media queries）重新排列网格变得非常容易。定义整个页面的布局，然后完全重新排列布局以适应不同的屏幕宽度，

• 伸缩容器：一个设有“display:flex”或“display:inline-flex”的元素
• 伸缩项目：伸缩容器的子元素
• 主轴、主轴方向：用户代理沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。
• 主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。
• 主轴长度、主轴长度属性：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
• 侧轴、侧轴方向：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
• 侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
• 侧轴长度、侧轴长度属性：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。
• 我的gird布局，1我用的是俩排的布局，解决了这个问题

.wrapper {
    display: grid;
    grid-template-columns: 42% 0 58% 0 0 0 0;
    grid-template-rows: auto 0 auto 0 auto;
    color: #c6c6c6;
    margin-bottom: 30px;
}