黑马程序员技术交流社区

标题: 技术贴 [打印本页]

---

作者: 不知道叫啥    时间: 2019-3-19 19:34
标题: 技术贴
理解
1能说出元素显示隐藏最常见的写法
a.display 设置或检索对象
特点： 隐藏之后，不再保留位置。
b.visibility
特点： 隐藏之后，继续保留原有位置。
c.overflow
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容.

实际开发场景：

• 清除浮动
• 隐藏超出内容，隐藏掉,  不允许内容超过父盒子。
  
  

2能说出精灵图产生的目的
3能说出去除图片底侧空白缝隙的方法
我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

原因：

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

就是图片底侧会有一个空白缝隙。

解决的方法就是：  

• 给img vertical-align:middle | top| bottom等等。  让图片不要和基线对齐
  
  

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);
    }

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2