WEB前端-弹性布局
一、css属性补充
1.光标形状
语法:cursor:值
取值:
text:文本图标
help:问号图标
wait:等待的图标
pointer: 小手图标
move 移动
url(),临时替换的样式-----需要在url后面加auto
default 箭头
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width:100px;
height:50px;
border:1px solid #000;
}
.box1{
cursor:text;
}
.box2{
cursor:help;
}
.box3{
cursor:wait;
}
.box4{
cursor:pointer;
}
.box5{
cursor:move;
}
.box6{
cursor:url('bitbug_favicon.ico'),auto;
}
.box7{
cursor:default;
}
</style>
</head>
<body>
<div class="box1">文本</div>
<div class="box2">问号</div>
<div class="box3">等待</div>
<div class="box4">小手</div>
<div class="box5">移动</div>
<div class="box6">图片</div>
<div class="box7">箭头</div>
</body>
应用场景:主要用于修饰鼠标放到元素上面的时候光标的样式
2.强调边框
语法:outline:值------盒子轮廓
取值:和边框一样
应用场景:主要用于设置元素周围的边框,起到强调作用(常用于去掉表单选中的蓝色边框)
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
[type="password"]{outline:none;}
</style>
</head>
<body>
<input type="text" />
<input type="password" />
</body>
效果
3.透明度
语法:opacity:值
取值:0-1之间的小数
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width:200px;
height:100px;
border:1px solid #000;
position:relative;
}
img{
position:absolute;
left:0;top:0;
opacity:0.5;
}
</style>
</head>
<body>
<div class="box">
<img src="1.png" width="200" height="100" />
这是一张图片
</div>
</body>
效果
4.背景透明
语法:rgba(值1,值2,值3,值4)
取值:1-3个值都是0-255的数字,表示颜色,第4个值是透明度0-1之间取值
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width:200px;
height:100px;
border:1px solid #000;
position:relative;
}
img{
position:absolute;
left:0;top:0;
}
.box2{
width:200px;
height:100px;
background:rgba(3,3,3,.5);
color:#fff;
position:absolute;
left:0;top:0;
}
</style>
</head>
<body>
<div class="box">
<img src="1.png" width="200" height="100" />
<div class="box2">
这是一张图片
</div>
</div>
</body>
效果