<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据元素样式</title>
<style>
/*1.细线无边框表格样式*/
/*table {*/
/* width: 600px;*/
/* height: 200px;*/
/* !*去除表格边框*!*/
/* border: none;*/
/* !*单元格边框间距合并，得到极细线单元格*!*/
/* border-collapse: collapse;*/
/*}*/
/*table td {*/
/* !*为单元格设置边框样式*!*/
/* border: solid 1px #ddd;*/
/* padding: 10px;*/
/*}*/
/*2.数据表格设计*/
/*table {*/
/* width: 600px;*/
/* height: 200px;*/
/* font-size: 14px;*/
/* border: none;*/
/* border-collapse: collapse;*/
/*}*/
/*table td {*/
/* border: none;*/
/* border-top: solid 1px #ddd;*/
/* padding: 10px;*/
/*}*/
/*table tr:hover {*/
/* background-color: #ccc;*/
/* cursor: pointer;*/
/*}*/
/*3.多种方式定义列表符号*/
/*ul {*/
/* !*list-style-type: lower-roman;*!*/
/* !*list-style-type: none;*!*/
/* !*list-style-image: url(文件名);*!*/
/* !*list-style-image: linear-gradient(45deg, red, green);*!*/
/* list-style-image: radial-gradient(5px 5px, red, yellow);*/
/*}*/
/*4.多图背景控制列表符号*/
/*ul {*/
/* list-style-type: none;*/
/*}*/
/*ul li {*/
/* background-image: url('cat.jpg'), url('flower.jpg');*/
/* background-repeat: no-repeat, repeat;*/
/* background-size: 15px 10px,100%;*/
/* background-position: 0 5px, 0 0;*/
/* text-indent: 20px;*/
/* border-bottom: solid 1px #ddd;*/
/* margin-bottom: 10px;*/
/* padding-bottom: 5px;*/
/*}*/
/*5.after与before追加元素样式使用*/
/*h2:hover::before {*/
/* content: attr(data-title);*/
/* color: #fff;*/
/* background-color: #555;*/
/* border: solid 3px #85CE61;*/
/*}*/
</style>
</head>
<body>
<!--1.细线无边框表格样式-->
<!--<table border="1">-->
<!-- <caption>测试表格</caption>-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <td>id</td>-->
<!-- <td>姓名</td>-->
<!-- <td>年龄</td>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <td>1</td>-->
<!-- <td>小明</td>-->
<!-- <td>21</td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>2</td>-->
<!-- <td>小红</td>-->
<!-- <td>22</td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>2</td>-->
<!-- <td>小红</td>-->
<!-- <td>22</td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!--</table>-->
<!--2.数据表格设计-->
<!--<table border="1">-->
<!-- <caption>测试表格</caption>-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <td>id</td>-->
<!-- <td>姓名</td>-->
<!-- <td>年龄</td>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <td>1</td>-->
<!-- <td>小明</td>-->
<!-- <td>21</td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>2</td>-->
<!-- <td>小红</td>-->
<!-- <td>22</td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>2</td>-->
<!-- <td>小红</td>-->
<!-- <td>22</td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!--</table>-->
<!--3.多种方式定义列表符号-->
<!--<ul>-->
<!-- <li>go语言</li>-->
<!-- <li>html</li>-->
<!-- <li>css</li>-->
<!-- <li>javascript</li>-->
<!--</ul>-->
<!--4.多图背景控制列表符号-->
<!--<ul>-->
<!-- <li>go语言开发</li>-->
<!-- <li>html标记语言</li>-->
<!-- <li>css样式表</li>-->
<!-- <li>JavaScript脚本语言</li>-->
<!--</ul>-->
<!--5.after与before追加元素样式使用-->
<!--<h2 data-title="www.google.com">go语言开发</h2>-->
</body>
</html>
