• CSS数据样式

    CSS数据样式

    表格

    定制表格

    　　我们除了可以使用<table>标签进行绘制表格，在css3中display也支持进行表格的样式绘制。

     

    样式规则说明
    table 对应 table
    table-caption 对应 caption
    table-row 对表 tr
    table-cell 对于th或td
    table-row-group 对应 tbody
    table-header-group 对应 thead
    table-footer-group 对应 tfoot

     

    image-20200713205539740

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css学习.css">
</head>
<body>
    <article>
        <nav>一份表格</nav>
        <section>
            <ul>
                <li>姓名</li>
                <li>性别</li>
                <li>年龄</li>
            </ul>
        </section>
        <section>
            <ul>
                <li>小明</li>
                <li>男</li>
                <li>18</li>
            </ul>
        </section>
        <section>
            <ul>
                <li>小红</li>
                <li>女</li>
                <li>19</li>
            </ul>
        </section>
        <section>
            <ul>
                <li>小姜</li>
                <li>女</li>
                <li>21</li>
            </ul>
        </section>
    </article>
</body>
</html>
    元素表单HTML
    body article {
  display: table;
}
body article nav {
  display: table-caption;
  font-weight: bolder;
  
  text-align: center;
  vertical-align: middle;
}
body article section:nth-of-type(1) {
  display: table-header-group;
}
body article section:nth-of-type(2) {
  display: table-row-group;
  
}
body article section:nth-of-type(3) {
  display: table-row-group;
}
body article section:nth-of-type(4) {
  display: table-footer-group;
  
}
body article section ul {
  display: table-row;
}
body article section ul li {
  display: table-cell;
  border: solid 1px #ddd;
  padding: 10px;
}
    元素表单CSS

     

    表格标题

    　　我们可以使用caption-side设置表格标题的位置，值可以是top或者bottom。

     

    image-20200713210356137

    image-20200713210410744

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
​
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
    表格标题位置

     

    内容对齐

    　　表格中内容对齐方式可以使用text-aligen以及vertical-aligen来进行控制。

     

    　　水平对齐text-aligent。

    值描述
    left 左对齐
    right 右对齐
    center 居中对齐

     

    　　垂直对齐vertical-aligen。

    属性说明
    top 顶对齐
    middle 垂直居中
    bottom 底部对齐

     

    image-20200713210949421

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
    表格内容对齐

     

    颜色设置

    　　我们可以为<table>中的任何HTML元素进行颜色设置。

     

    image-20200713211523081

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花儿</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癞子</td>
                <td>男</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
    颜色设置

    边框间距

    　　我们可以使用border-spacing来设置边框的间距。两个值，一个对应上下，一个对应左右，单位可以是px，em，rem，%等等。

     

    image-20200713212003859

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        table{
            border-spacing: 5px 10px;
        }
​
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
        
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花儿</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癞子</td>
                <td>男</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
    边框间距

     

    边框合并

    　　我们可以看一下上面图的表格，他们的表格边框都是有间距的。如果我们想把它设置为单线的可以使用border-collapse: collapse;进行设置。

     

    image-20200713212209708

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
​
        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
        }
​
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
        
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花儿</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癞子</td>
                <td>男</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
    边框合并

     

    隐藏单元格

    　　如果想隐藏没有内容的单元格，可使用empty-cells: hide;进行设置。

     

    image-20200713212344221

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
​
        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
            empty-cells: hide;
        }
​
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
        
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花儿</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癞子</td>
                <td>男</td>
                <td>15</td>
            </tr>
            <tr>
                <td>未知</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
    隐藏单元格

     

    无边框表格

    　　无边框表格需要用到之前结合的知识，使用很多选择器进行设置。

     

    image-20200713213758279

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
            empty-cells: hide;
        }

        table>caption:first-child{
            caption-side: top;
            border: solid 1px #ddd;
            border-left: unset;
            border-right: unset;
        }


        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
            vertical-align: middle;
            text-align: center;
        }

        table tbody tr:nth-child(odd){
            background-color: #ddd;
        }
        
        table,table tr th,table tr td:last-child,table tr td:first-child{
            border-left: unset;
            border-right: unset;
        }

    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花儿</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癞子</td>
                <td>男</td>
                <td>15</td>
            </tr>
            <tr>
                <td>未知</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
    无边框表格

     

    数据表格

    　　我们可以利用hover对<tr>进行一些样式上的调整。比如变色，鼠标变小手等等，让用户知道自己目前鼠标所在的表格区域。

     

    image-20200713214115958

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
            empty-cells: hide;
        }

        table>caption:first-child{
            caption-side: top;
            border: solid 1px #ddd;
        }


        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
            vertical-align: middle;
            text-align: center;
        }

        
        tr:hover{
            /* 鼠标停留留变色 */
            background-color: #ddd;
            /* 小手 */
            cursor: pointer;
        }

    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花儿</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癞子</td>
                <td>男</td>
                <td>15</td>
            </tr>
            <tr>
                <td>未知</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
    数据表格

     

    列表

    列表符号

    　　默认的<ul>标签都有一个小黑点，我们可以对<ul>进行list-style-type的设置，让每个<li>都取消掉（继承性）。也可以自定义我们的列表符号。

     

    值描述
    none 无标记。
    disc 默认。标记是实心圆。
    circle 标记是空心圆。
    square 标记是实心方块。
    decimal 标记是数字。
    decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
    lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
    upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
    lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
    lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
    lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
    upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
    hebrew 传统的希伯来编号方式
    armenian 传统的亚美尼亚编号方式
    georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
    cjk-ideographic 简单的表意数字
    hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
    katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
    hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
    katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

     

    image-20200713214619590

     

    image-20200713214654438

     

    ul{
    list-style-type: none;
}

     

    　　自定义列表符号可以使用list-style-image。可以是图片，或者渐变色等等。

     

    image-20200713215027762

     

    ul{
    /* 线性渐变 */
    list-style-image:linear-gradient(45deg, red, black);
}

     

    符号位置

    　　我们可以使用list-style-position来定义列表符号的位置。

     

    选项说明
    inside 内部
    outside 外部

     

    image-20200713215300284

    ul{
    list-style-position: inside;
}

     

    image-20200713215339580

    ul{
    list-style-position: outside;
}

     

    组合定义

    　　我们可以使用list-style来一次性指定list-style-tpye与list-style-position。

     

    image-20200713215614126

    ul{
    list-style:decimal outside;
}

     

    背景符号

    　　我们可以为<li>来增加一个背景，然后将它调小作为列表样式符号。

     

    image-20200713220716146

     

     

    ul li{
    background: url(huaji.png) no-repeat 0 6px;
    background-size: 10px 10px;
    list-style-position: inside;
    list-style: none;
    /* 文本缩进 */
    text-indent: 1em;

}

     

    　　我们可以为<li>增加多背景，一个背景做列表样式符号，一个背景做标签背景。

     

    image-20200713221746450

     

    ul li{

    background: url(./huaji.png) no-repeat 0 6px,url(./bj.jpg) no-repeat;
    background-size: 10px 10px,100%;
    list-style-position: inside;
    list-style: none;
    /* 文本缩进 */
    text-indent: 1em;
    margin-bottom: 10px;

}

     

    追加内容

    基本使用

    　　我们可以使用伪元素选择器::after向后追加内容，以及::before向前追加内容。

    　　内容放在content中，我们可以将content增加的内容当做一个元素去看待。

     

    image-20200713222720101

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }

        a::after{
            content: "<--你就知道";
            color: blue;
        }
        a::before{
            content: "请点击-->";
            color: blue;
        }

    </style>
</head>
<body>
    <a href="http://www.baidu.com/">百度一下</a>
</body>
</html>
    基本使用

     

    提取属性

    　　我们可以使用attr()将属性提取出来。当鼠标放到连接上时，给予用户一些提示信息，如下：

     

    image-20200713223122591

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }

        a:hover::before{
            content: "您将访问:"attr(href);
            background-color: #555;
            color: white;
            position: absolute;
            top: 30px;
            padding: 5px 2px;
            border-radius: 10px;
        }

    </style>
</head>
<body>
    <a href="http://www.baidu.com/">百度一下</a>
</body>
</html>
    提取属性

    自定义输入框

    　　原本的表单输入框实在太丑了，我们可以给他做一些改变。

     

    image-20200713223922138

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 80px;
        }

        .field {
            position: relative;
        }

        input {
            border: none;
            /* 去除轮廓线 */
            outline: none;
            text-align: center;
            vertical-align: middle;
        }

        .field::after {
            content: '';
            /* content的背景为渐变，高度为1px */
            background: linear-gradient(to right, white, red, green, blue, white);
            height: 30px;
            position: relative;
            /* 与输入框的大小相同 */
            width: 171px;
            height: 1px;
            display: block;
            left: 0px;
            right: 0px;
        }

        .field:hover::before {
            /* data开头的属性都是让我们提取用的....这是一种规范。 */
            content: attr(data-placeholder);
            position: absolute;
            top: -20px;
            left: 0px;
            color: #555;
            font-size: 12px;
        }
</style>
</head>
<body>
    <div class="field" data-placeholder="请输入少于100字的标题">
        <input type="text" id="name">
    </div>
</body>
</html>
    自定义输入框
  • 相关阅读:
    在C#中使用消息队列RabbitMQ
    从url到页面经历了什么
    jsonp跨域远离
    DNS预处理
    一个架构师需要考虑的问题
    angular2和Vue2对比
    图片多的问题
    xinwenti
    xss和csrf
    ajax是什么
  • 原文地址：https://www.cnblogs.com/Yunya-Cnblogs/p/13296399.html
Copyright © 2020-2023  润新知