今天完成的事情：完成了任务八的第一个页面
明天计划的事情：任务八其他页面
遇到的问题：暂无
收获：学习了轮播和栅格系统。

任务八第一个也面大多是运用boothstrap的栅格系统，然后通过已经设计好的媒体查询让其自适应。

boothstrap 轮播（Carousel）插件

（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

步骤一：建立需要轮播的div盒子

<div id="myCarousel" class="carousel slide">

carousel轮播

步骤二：设置下方轮播列表（就是点击可以换图片）【indicators英文：指示】

<!-- 轮播（Carousel）指标 -->
 <ol class="carousel-indicators">
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
     <li data-target="#myCarousel" data-slide-to="1"></li>
     <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>

<ol> </ol>有序列表：

步骤三： 配置轮播所需要的图片【inner英文：内部】

<div class="carousel-inner">
    <div class="item active">
        <img src="图片一 " alt="First slide">
    </div>
    <div class="item">
        <img src="图片二" alt="Second slide">
    </div>
    <div class="item">
        <img src="图片三 " alt="Third slide">
    </div>
</div>

当为item active为显示此图片，item不显示图片。

步骤四，设置左右轮播列表（就是点击可以换图片）

<a class="left carousel-control-l" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>

class="left carousel-control-l" （left为左边，carouselcontrol轮播控制。）

href="#myCarousel" 链接名字为myCarousel的东西；

data-slide="prev"这是自定义的属性。javascript可以获取html元素自定义的属性，后面可以根据这些属性来做相应的动作。

Button：按钮

Glyphicons字体图标

glyphicon-chevron-left：图标-v形状-左

aria-hidden="true"盲人浏览器识别；使用辅助设备的用户知道其作用了。

<span>Previous</span>：sr-only ，盲人浏览器识别；Previous以前的

发现问题：用开发者工具调试时。

解决方案：

发现问题：图片录播挡住了导航栏。

解决问题：原因是把导航栏固定了高度。

栅格系统

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局。

原理

Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容，新版是完全基于flexbox流式布局构建的，完全支持响应式标准。

用栅格系统布置内容一

步骤一：建立盒子

<div class="container">（可以是container或者container-fluid）

container，它呢，是随着屏幕宽度的变化而变化的。自动识别你这个浏览器的分辨率，来帮你设置这个div的宽度是多少，

如果屏幕小于768的话，最大宽度是自动的(满屏)

如果屏幕大于768小于992的话，最大宽度是750

如果屏幕大于992小于1200的话，最大宽度是970

如果屏幕大于1200，最大宽度是1170

因此，屏幕分辨率小于768，container的最大宽度是None自动的，它基本上是占满整个屏幕。

container-fluid它是占满全屏的不管是在哪种分辨率下。就是随便你屏幕大小，它就是100%的宽，

.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐。

<div class=".container">步骤一：建立盒子
    <div class="row">步骤二：建立行

        <div class="col-xs-6 col-sm-3 col-md-3 col-lg-1">步骤三 建立列 xs是超小屏幕 sm是小屏幕 md是中等屏幕 lg是大屏幕；后面的数字是代表次元素所要占的宽度（数/12 *100%）
            <div class="m5-content">步骤四 填写内容
                <div class="m5-conten-1"></div>
                <div class="m5-conten-link">友情链接1</div>
            </div>
        </div>
       重复步骤三步骤四
       重复
   </div>
</div

 对于row和col相关知识点：

1 建立行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。

2网页开发者的呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素，否则都是违法的(不可以在.col-*以上添加呈现内容。

3 .col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响(这正是flexbox布局的特征，子元素的宽比和排列受父元素定义)。

 4列具有水平padding定义，用于创建列与列之的间隙

 5.row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即<div class="row no-gutters"...。

任务五

总结：通过任务五，先使学习了<header> 、<main>、<footer>标签，也了解到position的运用，能运用position: fixed对<header><footer>固定在浏览器位置。知道如何在背景插入图片background:url。也进一步学习到弹性盒子flex和浮动文档流的知识。更深一步了解了flex的运用，以及display的inline block 运用。在任务过程经常遇到元素溢出问题。也解决了父元素如何跟随子元素高度变化。和设置盒子最小的宽，避免屏幕缩小后内容溢出。之后就是来到了线下，在师兄们的帮助下，完成了入学的一些手续，以后就要和大家一起学习了，希望每天都元气满满，收获满满，早日修炼有成。

脑图：

深度思考

1.css可以绘制哪些常见的特殊形状？  

可以绘制绘：制圆形（椭圆形）/三角形(梯形)/平行四边形

在css绘制图形时，一般要使用到border-radius,transform（旋转:rotate,缩放:scale,倾斜:skew,移动:translate)等属性来实现

         transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

         transform: scale(0.5)         一个参数时：表示水平和垂直同时缩放该倍率

或者  transform: scale(0.5, 2);     两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。    

         transform: skew(30deg)    一个参数时：表示水平方向的倾斜角度；【参数表示倾斜角度，单位deg】

或者  transform: skew(30deg, 30deg);两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

         transform: translate(45px)  或者 transform: translate(45px, 150px); 参数表示移动距离

2.如何理解vertical-align与line-height？ 

最简单的理解就是：line-height一行垂直居中，而vertical-align不管有多少行，都能垂直居中！

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

3.请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？  

什么是flex
 ？

flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。

基本概念 

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 项目默认沿主轴排列。 

适用场景

可以简便、完整、响应式地实现各种页面布局

4.title与h1、b与strong、i与em、img的alt与title、src与href有什么区别  

title与h1的区别: 

定义：title是网站标题，h1是文章主题

作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的

b与strong,i与em的区别: 

但从视觉上效果观看b与strong、i与em是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签

建议：为了符合CSS3的规范，b应尽量少用而改用strong ,i应尽量少用而改用em

img中的alt与title属性区别: 

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方

title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover

src与href的区别: 

href，.是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。 

src是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用 

src通常用作“拿取”（引入），href 用作 “连结前往”（引用） 

5.如何使用IconFont

iconfont网址：http://www.iconfont.cn/

说起iconfont，做前端开发的应该知道它的好处，图标库之丰富，只有你想不到的，没有你找不到的，而且轻量高清。用户在iconfont.cn可以下载，多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

下面给大家介绍一下具体使用步骤：

1.使用新浪微博或者github账号登录一下。

2.找到图标管理->我的项目->然后新建项目:

3.查找你需要的icon,这里有两种方式：一是直接输入关键词搜索，二是通过页面上方的图标库进行查找

4.找到心仪的图标后加入购物车，每次可添加多个。鼠标悬停在图标上就会有三个选项：添加入库、收藏、下载。我们可以直接选择添加入库，然后如上图一个类似购物车的小图标上会显示我们添加的图标个数。

被加入库的图片会如图显示，然后我们点击下载至本地按钮，选择路径会有一个压缩包被下载，解压后长这样：

把它们放在同一个文件夹里。

5.在页面中引入图标（以下图的目录为准）：

我的fonts文件夹就是刚才解压之后的所有文件，demo1.html是引入iconfont的小例，具体代码如下：

需要注意的地方只有三个，一是引入iconfont.css，二是创建一个span或者i标签并给一个iconfont的类名，三是找到图标对应的unicode写在标签中，就是以&符号开头的那个。

然后这个图标就能在页面高清显示了，一般我们都用font-size来控制它的大小。

6.HTML中dl、ul、ol用哪个比较好？

什么是dl标签

dl标签就是定义列表，英文的单词是 definition list

接下来还有definition title  dt  列表的标题 这个标签是必须要的

definition description 列表的列表项，如果不需要它，可以不加 dd

就是说，dt、dd只能在dl里面；dl里面只能有dt、dd。

什么是ul标签

无序列表 unordered list，“无序列表”的意思。

无序列表中的每一项是li标签

li：list item，“列表项”的意思。

什么是ol标签

有序列表ol 英文单词：Ordered List。

里面的每一项都是li标签

列表

dl标签的作用非常大，在很多的大型网站上面都用它

上图可以看出，定义列表表达的语义是两层：

（1）是一个列表，列出了几个dd项目

（2）每一个词儿都有自己的描述项。

ul标签

li不能单独存在，必须包裹在ul里面；反过来说

ul的“儿子”不能是别的东西，只能有li。

我们这里再次强调，ul的作用，并不是给文字增加小圆点的，

而是增加无序列表的“语义”的。

ol标签

和无序列表一样，有序列表也是可以嵌套的哦

ol和ul就是语义不一样，怎么使用都是一样的

ol里面只能有li，li必须被ol包裹。li是容器级。