王老师html零基础学习笔记第11课—cousor+opacity

原创 老王  2020-09-10 12:54:04  阅读 373 次 评论 0 条
摘要:

重新认识下html中的img,以及透明度opacity,指针部分略难

一、img特征

1、重新认识img(特征): 

 A、支持宽高

 B、支持margin 

 C、(横排展示)

 D、能设置text-align 

 E、 能设置vertical-align 

 问题: 标签中间隙被解析 

           不支持margin:auto;

二、vertical-align

vertical-align 垂直对齐方式: 

 1、定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

 2、inline  inline-block    img图片标签才具有,块级元素没有 

 3、vertical-align 可能的值:

     top 元素的顶端与行中最高元素的顶端对齐 

     middle 此元素放置在父元素的中部。 

     bottom 元素的顶端与行中最低的元素的顶端对齐。

    总结:以上值与line-height相关

 text-top 元素的顶端与父元素字体的顶端对齐 

 text-bottom 把元素的底端与父元素字体的底端对齐。

 baseline 默认。元素放置在父元素的基线上。

    总结:以上值与font-size相关 

 注意: a、加vertical-align的同排元素都要vertical-align;

         b、vertical-align可以解决img下方间隙问题;

三、cursor指针样式

1、cursor 指针样式 (规定要鼠标进入元素内容区域要显示的光标的类型) 

 2、Cursor 可能的值:

         default 默认光标(通常是一个箭头)

         auto 默认。浏览器设置的光标。 

         pointer 光标呈现为指示链接的指针(一只手) 

         move 此光标指示某对象可被移动。 

         text 光标指示文本。 

         wait 光标指示正忙(通常是一只表或沙漏)。

         help 光标指示帮助(通常是一个问号或一个气球)

 3、cursor:url(hand.cur),pointer; 

 第一个值:Url() 定义指针文件路径,此文件得是cur后缀 

 第二个值:当第一个值出错的时的备用类型

四、opacity透明度

1、opacity 属性设置元素的不透明级别 

 A 、标准 不透明度:  opacity:0~1; 从 0(完全透明) 到 1(完全不透明) 

 B、IE 滤镜(兼容IE下不支持opacity的版本):  filter:alpha(opacity=0~100); 从 0(完全透明) 到 100(完全不透明)

本文地址:http://www.wangfangwen.com/post/94.html
版权声明:本文为原创文章,版权归 老王 所有,欢迎分享本文,转载请保留出处!
阿里云服务器优惠券
减肥不为美,只为走路不磨腿,付出不亚于任何人的努力,成功永远没有尽头,只有岔路口...

发表评论


表情

还没有留言,还不快点抢沙发?