您的位置:首页 > Web前端

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

2019-03-24 11:01 232 查看

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

1.input:

<inputname="textfield"type="text"value="点击添入标题"onfocus="if (value =='点击添入标题'){value =''}"onblur="if (value ==''){value='点击添入标题'}"/>

2textarea:

<textareaname="textarea"cols="80"rows="17"onfocus="if(value=='正文:'){value=''}"onblur="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;

}

第二种起作用,变成绿色!

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: