前端基礎-CSS基礎（六）
- 2019 年 12 月 17 日
- 筆記
本文目錄
背景樣式
文本樣式字體樣式列表樣式表格樣式輪廓樣式參考
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; background: red; } body{ background-image: url(img/小區說事.png); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; } </style> </head> <body> <div class="div1"></div> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </body> </html>
文本樣式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ line-height: 20px; /*設置行高。*/ letter-spacing: 5px; /*設置字元間距。*/ text-align: center; /*規定文本的水平對齊方式。*/ text-decoration: underline; /*通常用於去掉a標籤的下劃線*/ text-indent: 2em; /*設置縮進*/ } </style> </head> <body> <p>專註分享區塊鏈、數據挖掘、前後端技術。</p> <p>一番碼客：挖掘你關心的亮點。</p> </body> </html>
字體樣式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ /* * 字體設置的時候，一般會至少設置三種； * 第一字體不生效的時候會嘗試第二字體； */ font-family: "宋體"; /*設置字體尺寸*/ font-size: 20px; font-style: italic; font-weight: bolder; } </style> </head> <body> <p>專註分享區塊鏈、數據挖掘、前後端技術。</p> <p>一番碼客：挖掘你關心的亮點。</p> </body> </html>
列表樣式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- list-style 在一個聲明中設置所有的列表屬性。 list-style-image 將圖象設置為列表項標記。 list-style-position 設置列表項標記的放置位置。 list-style-type 設置列表項標記的類型。 --> <style type="text/css"> ul.u1{ list-style-image: url(img/小區說事.png); } ul.u2{ list-style-type: upper-latin; list-style-position: inside; } ul.u3{ list-style-type: upper-latin; list-style-position: outside; } </style> </head> <body> <ul class="u1"> <li>北京</li> <li>上海</li> <li>深圳</li> </ul> <ul class="u2"> <li>北京</li> <li>上海</li> <li>深圳</li> </ul> <ul class="u3"> <li>北京</li> <li>上海</li> <li>深圳</li> </ul> </body> </html>
表格樣式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * border-collapse 設置是否把表格邊框合併為單一的邊框。 * border-spacing 設置分隔單元格邊框的距離。 * caption-side 設置表格標題的位置。 * empty-cells 設置是否顯示錶格中的空單元格。 * table-layout 設置顯示單元、行和列的演算法。 */ table,th,tr,td{ border: 1px solid red; /*border-collapse: collapse;*/ border-spacing: 20px; empty-cells: hide; /*設置空單元格*/ table-layout: fixed; } table{ width: 100%; } caption{ caption-side: bottom; } </style> </head> <body> <table id="customers"> <caption> 公司資訊統計 </caption> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td></td> <td>Steven Jobs</td> <td>USA</td> </tr> <tr class="alt"> <td>BaiduBaiduBaiduBaiduBaiduBaiduBaiduBaidu</td> <td>Li YanHong</td> <td>China</td> </tr> <tr> <td>Google</td> <td>Larry Page</td> <td>USA</td> </tr> <tr class="alt"> <td>Lenovo</td> <td>Liu Chuanzhi</td> <td>China</td> </tr> <tr> <td>Microsoft</td> <td>Bill Gates</td> <td>USA</td> </tr> <tr class="alt"> <td>Nokia</td> <td>Stephen Elop</td> <td>Finland</td> </tr> </table> </body> </html>
輪廓樣式
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> </head> <style type="text/css"> .div1{ border: 10px solid red; outline: 10px dashed blue; width: 300px; height: 300px; } </style> <body> <div class="div1"> </div> </body> </html>
參考
- 黑馬程式設計師 120天全棧區塊鏈開發 開源教程 https://github.com/itheima1/BlockChain
