css - 06資料元素樣式
阿新 • • 發佈：2022-04-21
<!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>