A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 不知道叫啥 初级黑马   /  2019-3-19 19:34  /  817 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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





0 个回复

您需要登录后才可以回帖 登录 | 加入黑马