学习8
体验字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验字体图标</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.iconfont {
font-size: 200px;
color: red;
}
</style>
</head>
<body>
<span class="iconfont icon-icon-test2"></span>
</body>
</html>
使用字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用字体图标</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* 如果要调整字体大小，注意 选择器的优先级 要高于 iconfont 类 */
.iconfont {
font-size: 200px;
color: orange;
}
</style>
</head>
<body>
<span class="iconfont icon-icon-test3"></span>
</body>
</html>
垂直对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直对齐方式</title>
<style>
div {
border: 1px solid #000;
}
img {
/* vertical-align: middle; */
/* 顶对齐：最高内容的顶部 */
/* vertical-align: top; */
/* 底对齐：最高内容的底部 */
/* vertical-align: bottom; */
/* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
/* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
display: block;
}
</style>
</head>
<body>
<div>
<img src="./images/1.webp" alt="">
<!-- 我是谁？我在哪？ -->
</div>
</body>
</html>
过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 200px;
height: 150px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<img src="./images/huawei.jpg" alt="">
</body>
</html>
透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明度</title>
<style>
div {
width: 500px;
height: 500px;
background-color: orange;
opacity: 0;
opacity: 1;
opacity: 0.5;
}
</style>
</head>
<body>
<div>
<img src="./images/phone.png" alt="">
</div>
</body>
</html>
光标类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>光标类型</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
cursor: pointer;
cursor: text;
cursor: move;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
浙公网安备 33010602011771号