续html

1.自动编号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自动编号</title>

    <style>
        body{
            /* count 总数 counter 计数  reset重置 */
            counter-reset:mainIndex;
        }
        h1:before{
            content:'书籍'counter(mainIndex);
            /* increment增加 */
            counter-increment: mainIndex;
        }
        h1{
            counter-reset: subIndex;
        }
        h2:before{
            content:counter(mainIndex) '.' counter(subIndex);
            counter-increment: subIndex;

        }
        h2{
            counter-increment: partIndex;
            text-indent:2em;
        }
        h3:before{
            content:counter(mainIndex)'.'counter(subIndex)'.'counter(partIndex);
            counter-increment: partIndex;
        }
        h3{
            text-indent: 6em;
        }
    </style>
</head>
<body>
    <h1>西游记</h1>
    <h2>第一回 猴王现世</h2>
    <h2>第二回 东游学艺</h2>
    <h2>第三回 大闹东海</h2>
    <h2>第四回 大闹地府</h2>
    <h1>时间简史</h1>
    <h1>舱底密码</h1>
    <h1>明朝那些事</h1>
    <h2>重八同志履历</h2>
    <h3>父母饿死</h3>
    <h3>兄弟饿死</h3>
    <h3>全家饿死</h3>
    <h2>决战陈友谅</h2>
    <h1>活着</h1>
</body>
</html>

2.制作课程表需要注意的

border-collapse : collapse ; 合并边框

tr:nth-child(2) > td:nth-child(6) 意思是第二个tr里的第六个td

rollspan="2" 意为合并两个同列单元格为一个整体

colspan="2"意为合并两个同排单元格为一个整体

box-shadow : 5px 5px 5px gray ;

这是用来制作阴影；

值1：水平方向的偏移距离

值2：垂直方向的偏移距离

值3：阴影的模糊程度

值4：颜色

&#x3000 ; 意为中文空格，可用于设置字间距

font-family : 时尚中黑简体 ; 字体类型的设置

行标签块标签与行内块标签的区别如下

① inline 行标签代表标签 span

特征：1. 在同一行显示 2. 不能设置大小

② block 块标签代表标签 div

特征：1. 独占一行 2. 可以设置大小

③ inline-block 行内块标签代表标签 background-image

特征：1. 在同一行显示 2. 可以设置大小

如果一个标签为span行标签，用display : inline-block ; 可以将行标签转化为行内块标签

猜你喜欢