css3-6 表格如何设置样式和定位样式是什么
生活随笔
收集整理的這篇文章主要介紹了
css3-6 表格如何设置样式和定位样式是什么
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css3-6 表格如何設置樣式和定位樣式是什么
一、總結
一句話總結：css可以解決所有屬性設置的樣式。
?
1、表格如何設置樣式？
css樣式可以解決一切問題，沒必要在表格上面加屬性來設置樣式。
7 table{ 8 width:1000px; 9 border:2px solid #00f; 10 border-collapse:collapse; 11 } 12 13 td,th{ 14 text-align:center; 15 border:2px solid #00f; 16 }?
2、絕對定位和相對定位異同？
1.相同點
1)脫離文檔流，都在文檔流的上方
2.不同點
1)絕對的坐標系在瀏覽器的左上角，相對的坐標系在自己的左上角
2)絕對不占位，相對占位
?
3、布局實現中父子相對定位和絕對定位的關系是什么？
父相對，子絕對，這樣子就相對于父親來偏移了，不然就是相對窗口左上角
17 position: relative; 18 } 19 20 .bk{ 21 position: absolute; 22 left:10px; 23 top:100px; 24 }?
?
二、表格如何設置樣式和定位樣式是什么
1、相關知識
表格:
border-collapse
border-spacing
定位:
1.position:absolute;
2.position:relative;
絕對定位和相對定位:
1.相同點
1)脫離文檔流，都在文檔流的上方
2.不同點
1)絕對的坐標系在瀏覽器的左上角，相對的坐標系在自己的左上角
2)絕對不占位，相對占位
2、代碼
table表格樣式
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 table{ 8 width:1000px; 9 border:2px solid #00f; 10 border-collapse:collapse; 11 } 12 13 td,th{ 14 text-align:center; 15 border:2px solid #00f; 16 } 17 </style> 18 </head> 19 <body> 20 <table> 21 <tr> 22 <th>編號</th> 23 <th>用戶名</th> 24 <th>密碼</th> 25 </tr> 26 <tr> 27 <td>1</td> 28 <td>小帥</td> 29 <td>200111</td> 30 </tr> 31 <tr> 32 <td>1</td> 33 <td>小帥</td> 34 <td>200111</td> 35 </tr> 36 <tr> 37 <td>1</td> 38 <td>小帥</td> 39 <td>200111</td> 40 </tr> 41 <tr> 42 <td>1</td> 43 <td>小帥</td> 44 <td>200111</td> 45 </tr> 46 <tr> 47 <td>1</td> 48 <td>小帥</td> 49 <td>200111</td> 50 </tr> 51 <tr> 52 <td>1</td> 53 <td>小帥</td> 54 <td>200111</td> 55 </tr> 56 <tr> 57 <td>1</td> 58 <td>小帥</td> 59 <td>200111</td> 60 </tr> 61 <tr> 62 <td>1</td> 63 <td>小帥</td> 64 <td>200111</td> 65 </tr> 66 <tr> 67 <td>1</td> 68 <td>小帥</td> 69 <td>200111</td> 70 </tr> 71 <tr> 72 <td>1</td> 73 <td>小帥</td> 74 <td>200111</td> 75 </tr> 76 <tr> 77 <td>1</td> 78 <td>小帥</td> 79 <td>200111</td> 80 </tr> 81 </table> 82 </body> 83 </html>父定位子絕對，子的坐標系是父的左上角
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 margin:0px; 9 } 10 11 .qp{ 12 width:700px; 13 height:400px; 14 background: #faf; 15 margin:0 auto; 16 margin-top:20px; 17 position: relative; 18 } 19 20 .bk{ 21 position: absolute; 22 left:10px; 23 top:100px; 24 } 25 </style> 26 </head> 27 <body> 28 <div class='qp'> 29 <img src="bk.png" class="bk"> 30 </div> 31 </body> 32 </html>?
?
?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/Renyi-Fan/p/9230278.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的css3-6 表格如何设置样式和定位样式是什么的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mongoose 查询 find 指定字
- 下一篇： 4 微信公众号开发 被动回复消息 回复没