又是这么晚写日报，好了，说正题。这次目测不会有太大的问题了。

今天就完成的事情：修改好任务五。

明天计划的事情：完成任务六。

遇到的问题：背景图片无法显示的问题，不过已经解决，url的路径必须采用相对路径，否则图片无法显示。

收获如下：

【1.input内文字设置为只读不可编辑】

方法1: onfocus=this.blur() 当鼠标放不上就离开焦点

<input type="text" name="input1" value="中国" onfocus=this.blur()> 

方法2:readonly 

<input type="text" name="input1" value="中国" readonly> 

<input type="text" name="input1" value="中国" readonly="true"> 

方法3: disabled 

<input type="text" name="input1" value="中国" disabled="true">

注意：

disabled="true" 此果文字会变成灰色，不可编辑。 

readOnly="true" 文字不会变色，也是不可编辑的

css屏蔽输入：<input style="ime-mode: disabled"> 

有两种方法第一：disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。第二：readonly="readonly" 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本； 

【2.背景色透明度(a取值0~1)】

.box{

background-color: rgba(123，,132,123,0.5);

}

【3.上中下划线，闪烁（没见过=。=）】

h1 {text-decoration:overline}

h2 {text-decoration:line-through}

h3 {text-decoration:underline}

h4 {text-decoration:blink}

【4.斜体OR倾斜，卧槽 一直以来只知道斜体=。=】

italic 浏览器会显示一个斜体的字体样式。

oblique 浏览器会显示一个倾斜的字体样式。

inherit 规定应该从父元素继承字体样式。

.text{

font-style:normal;

font-style: italic;

font-style:oblique;

font-style:inherit;

}

【5.字符间距】

letter-spacing定义了字与字之间的距离. 

word-spacing是控制字与字之间空格的宽度. 

.text{

word-spacing:10px;

letter-spacing:10px;

}

【6.背景图片定位三种方法(background: x,y)】

.bg{

background-position: left top;

background-position: 10px 20px;

background-position: 10% 20%;

}

【7.光标变换手指,cursor属性的值类型很多】

.box{ ursor: pointer;}

【8.关于z-index】

只对position定位生效，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

【9.select中不能使用占位符placeholder，模拟占位符小技巧：】

把需要占位的option设置为 [不可选][默认选中][展开隐藏]：

<option value="" disabled selected hidden>Please Choose</option> 

【10.绝对定位层遮挡无法点击下层对象解决办法】

pointer-events:none;

如果层内元素需要点击，需要给层内元素添加

pointer-events:auto;

【11.<textarea>使用placeholder时不显示的情况】

原因：<textarea placeholder="AAABBB"> </textarea>标签中间多了个空格或者换行；

解决办法：去掉空格跟换行即可；

【12.CSS绘制三角形，通过border的边框折角+透明色绘制：】

.triangle {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid green;

}