前端H5学习记录--第四周

1.文本框在为输入文字时提示默认文字，当鼠标放上后文字消失的方式。

1.input:

<inputname="textfield"type="text"value="点击添入标题"οnfοcus="if (value =='点击添入标题'){value =''}"οnblur="if (value ==''){value='点击添入标题'}"/>

2textarea:

<textareaname="textarea"cols="80"rows="17"οnfοcus="if(value=='正文：'){value=''}"οnblur="if (value ==''){value='正文：'}"></textarea>

强制兼容：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

3.属性值：placeholder=””

2.轮播图的实现

Div+css flowover：hidden;

将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。

具体如何实现，对现在的我而言，还是有很大的问题！

3.单伪元素和双伪元素的使用（清除浮动）

单伪元素：

.clearfix {
    conternt:".";
    height: 0;
    visibility: hidden;
    overflow: hidden;
    display: block;
    clear: both;
}
.clearfix {
    *zoom: 1;
}

尽量使用双伪元素，时下较流行。

.clearfix:before, .clearfix:after {
   content: "";
   display: table;
}

.clearfix:after {
   clear: both;
}

.clearfix {
   *zoom: 1; /*IE/7/6*/
}

4.盒子撑开和浮动的相互影响。

5.定位的盒子比浮动的盒子层级高。

6.精灵图

鼠标放上后图片的坐标变化，两张图片的精灵图，转化成第二张，可以直接用background-position：bottom;

7.cursor:pointer(经常使用，模拟鼠标）

/*模拟小手 cursor:pointer;

  插入光标 cursor:text;

  四角光标 cursor:move

  默认箭头 cursor:default*/

8.Css的权限问题 ☆

1.选择器的权限

行内式 ＞ id选择器 ＞ 类选择器 ＞ 标签选择器

2.CSS选择器的权重值

行内式>id>类>标签选择器>通配符选择器

3.就近原则

如：

<ul class="box">
    <li>我是第一个</li>
    <li>我是第二个</li>
    <li>我是第三个</li>
</ul>

.box {

      color: red;

}

li {

    color: lawngreen;

}

第二种起作用，变成绿色！