今天完成的事情:

1.完成任务11

2.学习sass和less的区别；

3.学习配置与运用sass；

4.JS前期准备；学习Http的相关概念；

    明天计划：

1.开始任务12；

2.深入研究sass;

    遇到的问题：

sass不太熟悉，只知道简单的调用，混合宏，占位符的用法；

    收获总结：

1.sass与less：

sass:Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它 可以使用变量、常量、嵌套、混 入、函数等功能，可以更有效有弹性的写出CSS.它可以用来定 义一套新的语法规则和函数，以加强和提升CSS。sass有两种后缀名文件：一种后缀名为sass，一种后缀名为scss，建议使用scss。

less:less是单独的一种文件，可以理解为css的升级版，完全按照css写也没问题，不过它提供了很多便利的东 西。由于html只认css,所以需要配套一些软件将less解析成css,引用时候，直接引用css 就好。LESS的安装和Sass安装有所不同，他不需要依赖于Ruby环境，就能直接安装使用。不过LESS安装分为两种：客户端和 服务器端安装。less文件后缀为.less。

2.sass的配置与运用：

sass配置：

sass依赖于Ruby环境，于是先要去官网下载配置Ruby：https://rubyinstaller.org/downloads/

Ruby环境配置好之后再通过配置webstorm就可以直接再webstorm上使用了；配置方法详参 https://www.cnblogs.com/cshi/p/5622650.html

sass运用：

变量：sass的变量名必须使$开头，后面接变量名(如 $color:#fff；);相同属性可以直接使用变量名，所以配置好属性后调用起来非常方便

写在选择器外的称全局变量，选择器外称局部变量，如果希望局部变量能覆盖全局变量，只需加上(!glogal)

混合宏：使用@mixin声明；使用@include调用；如果代码块中涉及到变量，建议使用混合宏来创建相同的代码块。混合宏的缺点是会让代码文件变得臃肿；

占位符：用%声明；用@extend调用；占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中

继承：我用的还比较少，顾名思义就是继承同种样式，使代码变简洁；

3.学习Http的相关概念：

HTTP协议：协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器

端口：80 http 此端口开放表示服务器提供了HTTP服务，可以让访问者浏览其网页等，大部分针对IIS服务器的溢出攻击都是通过这个端口的，可以说是入侵者最常攻击的一个端口了。要想关闭此端口，需要关闭HTTP服务。 

任务10的任务总结:

链接：http://new.wiki.jnshu.com/pages/viewpage.action?pageId=23103064

任务名称：CSS任务10

成果链接：https://zzzheli.github.io/task10/task10.html

任务耗时：7.16~7.17  共计2天

技能脑图：

      个人脑图：

      官网脑图：

任务总结：

        1.任务符合预期，无延期。

       2.任务10表单页面要点：主要就是对表单元素的使用。首先我们要先弄清有哪些表单元素：form元素即定义收集用户信息的表单；select元素定义下拉菜单；button定义按钮元素；input元素是表单中最重要的元素定义各种输入类型；这几种元素在任务中都被频繁使用，十分重要；其中input元素是重中之重：它能定义text文本输入框；radio单选按钮；password密码区域；submit提交按钮等等。学会了运用了各种各样的表单元素这个任务就很容易完成了；然后布局和主要框架方面使用媒体查询，flex盒子搭配使用，加上使用常规的框架就可以了。

       3.关于任务中遇到的一些问题：

1.radio修改：之前在单选按钮那一块我是想用CSS样式border加上hover效果就可以很简单达成效果的；但是这里要求使用radio单选按钮；那么radio原有样式的修改就成为了一大难点；   

在单选按钮修改这方面由于不能直接简单的修改radio背景颜色，于是我使用CSS伪类:before 和 :after来改变样式；关于::before 和::after：:: before会创建一个伪元素，它是所选元素的第一个子元素。:: after会创建一个伪元素，它是所选元素的最后一个子元素。它们都默认是内联的，通常用于将装饰性内容添加到具有内容属性的元素。通过使用before和after伪元素自定义单选按钮的样式；再结合checked：单选按钮被选中时改变被选

中按钮身上before和after伪元素的样式,从而来实现改变radio样式的效果。

注意：任务要求一组单选按钮只能同时选中一个：name值一定要相同才能够单选，要默认选项，再一个属性checked就可以了。

2.修改select的样式:修改select的样式比起radio来说要简单很多；可以直接对select设置宽高；使用appearance: none;-webkit-appearance: none;-moz-appearance: none;去除原有三角形样式；在给select加上背景来取代原有的下拉小三角，而且select的字体样式，边框样式也可以修改；再通过padding来改变图片和文字在select框中的位置，自定义的select就基本修改完成了。

        任务10主要是要学会运用和修改表单元素；主题结构搭配媒体查询和flex,position；再赋之以基本的样式，hover、active效果就可以了。