理解
1能说出元素显示隐藏最常见的写法
a.display 设置或检索对象
特点: 隐藏之后,不再保留位置。
b.visibility
特点: 隐藏之后,继续保留原有位置。
c.overflow
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容.
实际开发场景: 清除浮动 隐藏超出内容,隐藏掉, 不允许内容超过父盒子。
2能说出精灵图产生的目的
3能说出去除图片底侧空白缝隙的方法
我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
原因: 图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。 就是图片底侧会有一个空白缝隙。
解决的方法就是:
1能写出最常见的鼠标样式
default
pointer
move
text
2能使用精灵图技术
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),那我们要做的,就是把小图拼合成一张大图。 大部分情况下,精灵图都是网页美工做.
3能用滑动门做导航栏案例
html:
<li> <a href="#"> <span>导航栏内容</span> </a></li>
css:
* {
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}
|