THELIUWEI

Appearance

数据样式 ​

表格 ​

表格可以非常快速的部署数据，灵活控制表格样式时必要的。表格不能设置外边距。

定制表格 ​

除了使用table标签绘制表格外，也可以使用样式绘制。

样式规则说明
table对应table
table-caption对应caption
table-row对表tr
table-row-group对应tboby
table-header-group对应thead
table-footer-group对应tfoot
html
<!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{
      display: table;
      border: solid 1px red;
    }
    .table nav{
      display: table-caption;
      text-align: center;
      background: black;
      color:white;
      padding: 10px;
    }
    .table section:nth-of-type(1){
      font-weight: bold;
      display: table-header-group;
      background: #555;
      color:white;
    }
    .table section:nth-of-type(2){
      display: table-row-group;
    }
    .table section:nth-of-type(3){
      display: table-row-group;
      background: #f4f4f4;
    }
    .table section ul{
      display: table-row;
    }
    .table section ul li{
      padding: 10px;
      display: table-cell;
      border:solid 1px #ddd;
    }
  </style>
</head>
<body>
  <article class="table">
    <nav>HELLO WORLD</nav>
    <section>
      <ul>
        <li>标题</li>
        <li>说明</li>
      </ul>
    </section>
    <section>
      <ul>
        <li>THELIUWEI</li>
        <li>theliuwei.com</li>
      </ul>
      <ul>
        <li>
          hello
        </li>
        <li>world</li>
      </ul>
    </section>
    <section>
      <ul>
        <li>hello</li>
        <li>css</li>
      </ul>
    </section>
  </article>
</body>
</html>

表格标题 ​

通过caption-side可以设置标题位置，值可以设置为top|bottom。

html
<!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{
      background: black;
      color: white;
      padding: 10px;
      caption-side: top;
    }
  </style>
</head>
<body>
  <table border="1">
    <caption>标题</caption>
    <tr>
      <td>theliuwei.com</td>
      <td>THELIUWEI</td>
    </tr>
  </table>
</body>
</html>

内容对齐 ​

水平对齐使用text-align文本对齐规则

html
<!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{
      background: black;
      color: white;
      padding: 10px;
      caption-side: top;
    }
    table tr td{
      height: 100px;
      text-align:center;
    }
  </style>
</head>
<body>
  <table border="1">
    <caption>标题</caption>
    <tr>
      <td>theliuwei.com</td>
      <td>THELIUWEI</td>
    </tr>
  </table>
</body>
</html>

垂直对齐使用vertical-align处理

属性说明
top顶对齐
middle垂直居中
bottom底部对齐
html
<!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{
      background: black;
      color: white;
      padding: 10px;
      caption-side: top;
    }
    table tr td{
      height: 100px;
      text-align:center;
      vertical-align:top;
    }
  </style>
</head>
<body>
  <table border="1">
    <caption>标题</caption>
    <tr>
      <td>theliuwei.com</td>
      <td>THELIUWEI</td>
    </tr>
  </table>
</body>
</html>

颜色设置 ​

为表格设置颜色与普通标签相似，可以为table| thead| tbody| caption|tfoot|tr|td设置颜色样式。

css
table{
background:red;
}

使用选择器设置表格隔行变色

css
table thead tr{
	background: #118d68;
	color:#fff;
}
table tbody tr: nth-child(odd){
	background:#1bb385;
	color:white;
}

边框间距 ​

设置单元格间距，设置间距上下10px，左右50px。

css
table{
	border-spacing: 50px 10px;
}

边框合并 ​

默认表格边框间有间距，以下示例将边框合并形成细线表格。

css
table{
border-collapse: collapse;
}

隐藏单元格 ​

css
table{
	empty-cells:hide;
}

无边框表格 ​

css
table{
	border:none;
	border-collapse:collapse;
}

数据表格 ​

可以为表格元素使用伪类控制样式，使用hover伪类样式。

css
table tr:hover{
	background:#ddd;
	cursor:pointer;
}

列表 ​

使用list-style-type 来设置列表样式，规则是继承的，所以在ul标签上设置即可。

值描述
none无标记
disc默认，标记是实心圆
circle标记是空心圆
square标记是实心方块
decimal标记是数字
decimal-leading-zero0开头的数字标记。
lower-roman小写罗马数字
upper-roman大写罗马数字

隐藏列表符号 ​

css
ul{
	list-style-type:none;
}

自定义列表样式 ​

css
ul li {
  /* list-style-image: url(xj-small.png);
  list-style-image: radial-gradient(10px 10px, red, black); */

  list-style-image: linear-gradient(45deg, red, black);
}

符号位置 ​

控制符号显示在内容外面还是内部

选项说明
inside内部
outside外部
css
ul{
list-style-position: inside;
}

组合定义 ​

可以一次定义列表样式

css
ul{
	list-style: circle inside;
}

背景符号 ​

css
ul li {
  background: url(xj-small.png) no-repeat 0 6px;
  background-size: 10px 10px;
  list-style-position: inside;
  list-style: none;
  text-indent: 15px;
}

多图背景定义 ​

css
<style>
        ul {
            list-style-type: none;
        }

        ul li {
            background-image: url(xj-small.png), url(houdunren.jpg);
            background-repeat: no-repeat, repeat;
            background-size: 10px 10px, 100%;
            background-position: 5px 7px, 0 0;
            text-indent: 20px;
            border-bottom: solid 1px #ddd;
            margin-bottom: 10px;
            padding-bottom: 5px;

        }
</style>

追加内容 ​

基本使用 ​

使用伪类::before向前添加内容，使用::after向后面添加内容。

css
a::after{
content:"坚持"；
}

提取属性 ​

使用属性值添加内容，可以使用标准属性与自定义属性。

css
a::after{
content:attr(href);
}
<a href="theliuwei.com">THELIUWEI</a>

通过属性添加标签提示 ​

css
a{
	position: releative;
}
a::hover{
	&::before{
		content:"URL:" attr(data-url);
		background:white;
		position:absolute;
		top:20px;
    padding: 3px 10px;
    border-radius:10px
	}
}

自定义表单 ​

css
{{<style>
    body {
        padding: 80px;
    }

    .field {
        position: relative;
    }

    input {
        border: none;
        outline: none;
    }

    .field::after {
        content: '';
        background: linear-gradient(to right, white, red, green, blue, white);
        height: 30px;
        position: relative;
        width: 100%;
        height: 1px;
        display: block;
        left: 0px;
        right: 0px;
    }

    .field:hover::before {
        content: attr(data-placeholder);
        position: absolute;
        top: -20px;
        left: 0px;
        color: #555;
        font-size: 12px;
    }
</style>

...
<div class="field" data-placeholder="请输入少于100字的标题">
    <input type="text" id="name">
</div>}}

Released under the MIT License.

Copyright © 2024-present Liu Wei