修饰属性
约 343 字大约 1 分钟
2025-06-27
过渡
透明度
提示
会让盒子文字和背景都透明
实际开发时,设置背景色为rgba,避免文字看不清
opacityOptionalnumber
0透明,1不透明,0-1设置透明比
光标类型
| 属性值 | 效果 |
|---|---|
| default | 默认值,通常是箭头 |
| pointer | 小手效果,提示用户可以点击 |
| text | 工字型,提示用户可以选择文字 |
| move | 十字光标,提示用户可以移动 |
表格美化
table,tr,td {
border: 1px solid pink;
/*合并相邻两个边框*/
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: #eee;
}显示和隐藏
.box {
/* 不占用文档流 */
display: none;
width: 100px;
height: 200px;
background-color: blue;
}
.box2 {
/*占用文档流,很少使用*/
visibility: hidden;
width: 100px;
height: 100px;
background-color: pink;
}
.box:hover {
display: block;
}
.box2:hover{
visibility: visible;
}SEO标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Document</title>
</head>
<body>
</body>
</html>favicon图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Document</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
</body>
</html>