修饰属性

约 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>