今天完成的事：

一、完成了任务12

使用@media调整了主页的布局，使其看起来更舒服

使用text-overflow:ellipsis;并给元素设置white-space:nowrap;不让其换行破坏布局，实现溢出文字的省略号隐藏

二、初步学习了js

初步认识了变量，函数，对象，作用域、if else

变量：

var z = 2;

var可以声明一个变量，z就是被声明的变量，变量的数值为2

需要注意数值与文本不同，文本内容需要用双引号包裹，数值则直接输入

z = 2

去掉var以后，z为全域变量，即所有之后的内容都会以z = 2为标准

全域变量可以被覆盖，在函数中可以设置 var z = 2 ，则该函数中的z变量数值为2

可以在script内容内再次设置z变量的数值，例如z = 3，则z = 3之后的所有z变量都为3

注：只要z= 3声明在z = 2之后，无论是在函数中还是在函数外，都会替换掉z = 2

函数：

<script>
    function changeText() {
        y=document.getElementById('demo3')

        if (y.innerHTML.match("aaa"))
        {
            y.innerHTML="bbb";
        }
        else
        {
            y.innerHTML="aaa"
        }
    }
</script>

    <p id="demo3">aaa</p>
<button type="button" onclick="changeText()">aaa</button>

function 可以定义一个函数，changeText()就是函数的名称

getElementByID('id')可以用id关联一个元素

if和match和选择元素内匹配的值

if和else相当于如果和其他

上述代码的意思就是如果y变量获取的元素中含有aaa，则文本变化为bbb

如果不含有aaa，则显示为aaa

通过onclick来触发函数，改变文本

三、学习了任务1-6的深度思考

重点学习了一下inline inline-block block三种display

常见元素： 

inline：a,span,br,i,em,strong,label,q,var,cite,code 

block：p，div,p,h1...h6,ol,ul,dl,table,address,blockquote,form 

inline-block：img,input

inline是行内元素，无法设置宽度和高度，宽高完全靠内部元素撑开，当多个元素同行，超过父元素宽度时会自动换行

block就是正常的块元素，可以设置宽高，宽度默认为父元素宽度，高度默认为0，可以被元素撑开

inline-block就是两种的结合，可以设置宽高的行内元素

遇到的问题：

暂无

明天计划：

暂时放下js，做任务13

收获：

算是在入门js的路上迈出了半步，对于js有了初步的认识

html是内容，css是布局和样式，js就是功能

任务总结：

任务名称：CSS TASK12

成果链接：https://jihpeng.github.io/Task/t12/t12-1.html

任务耗时：2019/05/10-2019/05/11 共2天

官方脑图

个人脑图

任务总结：

使用sass重写了任务5/6

对于sass的应用更加熟练了一些，使用body{}将所有的标签嵌套其中，可以对body声明变量，作为全局变量使用，修改页面时更加方便

同时，@media无法直接重新定义全局变量，需要有元素嵌套才能修改，所以用body将所有元素嵌套非常方便，修改样式时也更加一目了然