指针 透明度 溢出
指针 透明度 溢出
今天主要讲的是指针,透明度和溢出;
其中指针就是我们平时移动鼠标时的形状,我们可以设置在网页上使用我们自己想用形状的指针,透明度就是指设置整个标签的透明度,使标签的颜色看起来会淡很多;
溢出就是指元素内容的超出处理,当一个标签的内容超出本身所在的位置时,我们可以对其进行超出处理的设置
源代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>指针 透明度 溢出 </title>
<meta name="descrption" content="">
<meta name="keywords" content="">
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:pink;
/* 指针样式cursor
设置鼠标放在元素上的时候的指针样式
值:
auto:默认。浏览器设置的光标。
pointer:光标呈现为指示链接的指针(一只手)
move:此光标指示某对象可被移动。
text:光标指示文本。
wait:光标指示正忙(通常是一只表或沙漏)
help:光标指示帮助(通常是一个问号或一个气球)
*/
cursor:pointer;
/* 自定义图标
url("图标地址")
,pointer 备胎 当图片不生效时使用*/
cursor:url(".cur"),pointer;
}
.box1{
width:100px;
height:100px;
color:red;
background-color:rgba(255,0,0,0.5);
}
.box2{
width:200px;
height:200px;
color:red;
background-color:black;
/* 元素透明度
设置元素的透明度
同样能够影响内容透明度
0~1
低版本ie不支持*/
opacity:0.5;
/* filter:alpha(opacity=50); 仅仅IE可以使用 0~100 */
}
.one{
width:200px;
height:200px;
background-color:red;
/* 元素内容超出的处理 overflow
hidden 超出的部分隐藏起来
auto 自适应出现滚动条
scroll 一直出现滚动条
*/
overflow:hidden;
/* overflow-x:hidden; x轴隐藏 y轴出现滚动条
overflow-y:auto; */
}
p{
width:300px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<div class="box"></div><!-- 指针 -->
<a href="">a标签</a><!-- 指针 -->
<div class="box1">这是背景颜色</div> <!-- 透明度 -->
<div class="box2">这是透明度</div><!-- 透明度 -->
<div class="one"> div标签
<p>P标签</p> <!-- 内容超出处理 -->
</div>
</body>
</html>
效果图如下:
指针 透明度和溢出还是比较简单的,在以后的运用中会经常用到,到时候时间长了大家就容易掌握了