今天完成的事情：

                           任务十二不用bootstrap重写，用scss重构页面。
明天计划的事情：

                           学习汉堡菜单制作方法 
遇到的问题：

                         感觉是用了scss后，代码还是很多，还不能有效高速的归纳自己写的css样式。 
收获：

                        1.在用scss重构页面时，使用了变量、嵌套、Mixin.用起来比较方便。

                         2.用css制作了下拉框。利用label和input加checked实现。在未checked时，ul列表隐藏，checked时，列表显现。

        3.学习张鑫旭博客的样式分离方法。、

             1.简短的CSS reset

          2.CSS通用样式库

           3网站CSS样式库                    ---------------------实际项目

           4.css sprite合并项 

          5.网站通用小图标样式集

           6.网络通用导航样式

           7.网络通用按钮样式

            8.网络通用选项卡样式

            9.网络通用文本框等控件样式

           10.网络公共主结构样式

           11.单页面的一些精细结构

网站CSS样式库又可以架构为以下几部分：

        ① 网站常见颜色，尤其是链接色

        ② 网站常见背景色（我习惯用bg+颜色前2字母表示，例如.bgf7表示background:#f7f7f7）

        ③ 网站常见边框色，这里类似于CSS 通用库中的margin属性，需拆分，例如.bbdd表示border-bottom:1px solid #ddd;每人的命名习惯不一样，但是尽量简单为好，甚至您可以像Google一样，直接两个字母（大小写混搭）表示。另外，一定要告知设计师，边框取色不宜多，不能凭感觉，要有所牺牲，也就是如果之前使用了#cecece的边框色，后面的#d0d0d0颜色与之相近，请可以使用#cecece代替，用户是看不出来其中差异的。

        ④ 网站遗留的单margin属性，例如，某一div留白较大，有个单独的margin-top:35px的属性，OK，这个属性请放在网站CSS样式库中，以.mt35{margin-top:35px;}保留，以供之后类似布局或需要的地方使用。

        ⑤ 网站遗留的单padding属性，例如，双栏自适应布局时，无论是浮动自适应，还是绝对定位自适应，都需要使用padding-left值，此时的padding-left多单样式，可抽取出来，以网站样式库的形式存在。记住，是单属性，且不可从通用元素中抽取单独的padding值，否则是给自己挖火坑。

        ⑥ 网站已有的width属性，在流体布局思想下，宽度是有限的，是珍贵的，需好好利用。

        ⑦ 网站常用的一些height属性，指一些高度值，例如height:18px，height:20px，height:24px，height:50px，height:100px，height:200px等。

任务八九总结：

    任务八九做的是修真院网站样式展现。这次任务使用了bootstrap的栅格布局和导航栏，自己对bootstrap的理解更深了。bootstrap的导航栏本身是响应式的，而栅格布局搭配媒体查询出来的效果真的不错。任务八九也展示了网站基本内容框架，包含导航栏、侧边栏、主体内容部分。底部的友情链接，底部联系信息以及出版信息等。在内容框架基础之上，再添加轮播图、表格等元素丰富网站构架   

      重点：轮播图实现

         借助于bootstrap实现轮播图。 为了给导航栏添加响应式特性，要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，必须包含 Bootstrap 折叠（Collapse）插件。

        响应式多列布局

       借助于bootstrap的栅格系统和媒体查询，可以响应式的均分想要的列数。  

任务十总结 :

     任务十使我们接触到表单元素，以及学会对表单元素默认样式的修改。radio的修改是重难点，思路有多种，但是都需要实现文字和点击图标相关联，点击文字或者图标，图标发生相应的样式改变。rinput的for和label的for有相关联的意义，设置相同的for值将他们关联。另一个难点是修改select的样式，但是几乎很难对option及其里面的内容进行样式设置。还需要自己做一个流程图，方法也是多样的，可以通过ul li 来做，也可以设置几个div在垂直方向上做文章。  

   Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等. 常用的一般是单选框、多选框等。

 1. type=radio

即单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked.

不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。

2. type=checkbox

多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择）

其实最重要的还是value值，提交到处理页的也就是value。

3.type=text

输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。

参数name：同样是表示的该文本输入框名称。

参数size：输入框的长度大小。

参数maxlength：输入框中允许输入字符的最大数。

参数value：输入框中的默认值

特殊参数readonly：表示该框中只能显示，不能添加修改。

4.type=password

不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。

参数和“type=text”相类似。

 参考资料 https://blog.csdn.net/qq_33226881/article/details/78303928