DongHao's 个人在线文档库

Appearance

数据元素样式 ​

数据的呈现方式我们可以使用表格或者列表

表格 ​

构建表格 ​

html
<body>
    <table border="1">
        <thead>
			<caption>个人信息表格</caption>
            <tr>
                <td>编号</td>
                <td>标题</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>jlc</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>2</td>
                <td>JLC</td>
            </tr>
        </tfoot>
    </table>
</body>

表格属性 ​

我们经常需要的对表格/列表的外观样式进行修改，使用 CSS 来改善 HTML 表格的外观

属性描述
border设置表格边框属性
height设置表格的高度
width设置表格的宽度，也设置全宽表格，表格的宽度覆盖一整行的宽度：width: 100%;
border-collapse置是否将表格边框折叠为单一边框，border-collapse: collapse;设置表格为单边框的形式
text-align设置 <th> 或<td>中内容的水平对齐方式，其值为right，left，center,默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐
vertical-align设置 <th> 或 <td> 中内容的垂直对齐方式，其值为bottom，middle, top,默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）
padding控制边框和表格内容之间的间距
border-bottom实现水平分隔线，border-bottom: 1px solid #ddd;
html
<style>
    table {
        width: 100%;
        background: red;  // 为表格整体设置背景颜色
    }
    
	// 对表格的标题进行样式的设置
    table caption {
        background: blue;  // 为标题独立设置背景颜色
        color: #fff;
        border: solid 3px #ddd;
        caption-side: top;   // 设置标题在表格的哪个位置
    }
    
    table thead {
        background: yellow;  // 为表格里面的题目设置背景颜色
    }
    
    table tbody {
        background: yellow;  // 为表格里面的内容设置背景颜色
    }
    
    table tbody tr:first-child {
        background: yellow;  // 为表格里面内容的第一行设置背景颜色
    }
    
    table tr td {
        height: 100px;
        text-align: center;  // 设置文本水平对齐方式：left,center,right
        vertical-align: middle;// 设置文本垂直对齐方式：top,middle,bottom
        background: green;  // 为所有的单元格设置背景颜色
    }
</style>

设置表格中隔行变色的效果：

css
table tbody tr:nth-child(odd) {
    background: red;
    color: white;
}

单元格间距样式的设置：（将表格单元格中的分割的线设置的细一点，视觉上看起来为一条线的样子）

css
table {
    border-collapse: collapse;  // 细化单元格间的分割线
    empty-cells: hide;   // 设置空单元格进行隐藏
}

table, td {
    border: solid 1px #ddd;
}

设置细线无边框表格，表格名称背景颜色为浅灰色，表格内容左右两侧没有边框：

css
table {
    border: none;  // 将原始的边框去掉
    border-collapse: collapse;  // 将表格边框折叠为单一边框
}
table thead {
    background: #ddd;  // 设置表格名称的背景颜色
}
table td {
    border: none;
    border-right: solid 1px #ddd;
    border-top: solid 1px #ddd;
    padding: 10px
}
table td: last-child {
    border-right: none;  // 将最后一个td元素的右边框去掉
}
table tr: last-child td {
    border-bottom: solid 1px #ddd;
}

可以在<tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

css
table,
td {
    border: none;
    font-size: 14px;
    border-collapse: collapse;
}
table tr: hover {  // 鼠标放上当前行的时候出现的伪类样式
    background: #ddd;
    cursor: pointer;
}
table td {
    border-top: solid 1px #ccc;
    padding: 10px;
}

列表 ​

构建列表 ​

列表有ul无序列表和ol有序列表

html
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>.
    </ul>
    <ol>
        <li>一</li>
        <li>二</li>
        <li>三</li>.
    </ol>
</body>

列表属性 ​

属性描述
list-style-type指定列表项标记的类型，circle：空心圆形标记；square：实心正方形标记；upper-roman：罗马字符标记；lower-roman：小写的罗马类型；lower-alpha：阿拉伯字符标记；decimal：数字类型；none：将列表的样式进行去掉
list-style-image将图像指定为列表项标记，list-style-image: url('sqpurple.gif');
list-style-position指定列表项标记（项目符号）的位置，outside：表示标记在列表项的外部；inside：表示标记在列表项的内部

对于列表项颜色样式的设置，添加到<ol>或 <ul> 标记的任何样式都会影响整个列表，而添加到 <li> 标记的属性将影响各个列表项

css
ol {
  background: #ff9999;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

给无序列表前面的提示方块设置渐变颜色：

css
ul {
    list-style-image: linear-gradient(45deg, red, green);
    // list-style-image: radial-gradient(5px 5px, red, yellow);
}

使用图片进行列表的样式定义：

css
ul {
    list-style-type: none;
}
ul li {
    background-image: url(图片1), url(图片2);
    background-repeat: no-repeat, repeat;  // 图片1不重复，图片2重复
    background-size: 10px 10px, 100%;
    background-position: 0px 5px, 0 0;
    text-indent: 20px;
    border-bottom: solid 1px #ddd;
    margin:-bottom:  10px;
    padding-bottom: 5px;
}

after和before追加元素样式的使用 ​

html
<body>
    <h2>jlc</h2>
</body>

<style>
    h2::after {
        content: "111";
    }
</style>

网页最后渲染的内容为jlc111

追加的内容是元素，我们可以给其添加任何的样式：

css
h2::after {
 content: "111";
 color: green;
 background: blue;
}

在前面添加before同理

content接收的内容不单单只是我们直接输入的，我们可以获取标签中的属性：

html
<body>
 <h2 title="222">jlc</h2>
</body>

<style>
 h2:hover::after {
     content: attr(title);
 }
</style>

网页最后渲染的内容为jlc，当鼠标放上去时，显示jlc222

使用after和before制作绚丽的表单：

html
<body>
    <div class="field" data-help="请输入100以内的字符">
        <input type="text">
    </div>
</body>

<style>
    body {
        padding: 50px;
    }
    
    input {
        border: none;  // 取消默认的边框
        outline: none;
        width: 100%;
        text-align: center;
        color:#555;
    }
    
    .field {
        position: relative;
        margin-bottom: 10px;
    }
    
    .field::after {   // 在输入框的底部做美化处理，输入框下面有一条渐变色的线
        content: "";  // 设置没有内容，只是占位做美化输入框而已
        background: linear-gradient(to right, white, red, green, blue, white)
        display: block;
        height: 1px;
    }
    
    .field:hover::before {  // 鼠标放上去出现提示效果
        content: after(data-help);
        color: #666;
        font-size: 12px;
        position: absolute;
        top: -10px;
        text-align: center;
        width: 100%;
    }
</style>

Released under the MIT License.

Copyright © 2021-present DongHao's