11種常用css樣式之表格和定位樣式學(xué)習(xí)

新進小設(shè)計 2020-08-04

展開全文

table表格中border-collapse: collapse;/*表格邊框是否合并*/border-spacing: 10px;/*表格邊框之間的距離*/定位詳情可以閱讀position屬性值4缺一帶你了解相對還是絕對抑或是固定定位，實現(xiàn)div絕對居中法/*父定位子絕對，子的坐標(biāo)系是父的左上角；*/絕對定位和相對定位的相同點:脫離文檔流，都在文檔流的上方;不同點(1)絕對的坐標(biāo)系在瀏覽器的左上角，相對的坐標(biāo)系在自己的左上角(2)絕對不占位，相對占位;最后/*z-index定位層級高度，只能配合position屬性*

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>11種常用css樣式之表格和定位樣式學(xué)習(xí)</title>
 7     <style type="text/css">
 8     table{
 9         width: 1000px;
10         border: 1px inset skyblue;
11         border-collapse: collapse;/*表格邊框是否合并*/
12         border-spacing: 10px;/*表格邊框之間的距離*/
13     }
14     th,td{
15         text-align: center;
16         border: 1px inset skyblue;
17     }
18     .box2{
19         position: relative;
20         margin: 0 auto;
21         background-color: #ccc;
22         width: 600px;
23         height:200px;
24     }
25     /* 父定位子絕對，子的坐標(biāo)系是父的左上角 */
26     /* 父集不定位，坐標(biāo)系是瀏覽器窗口的左上角 */
27     .box2 img{
28         position:absolute;
29         left: 100px;
30         top: 50px;
31     }
32     .box2 img:nth-child(1){
33         z-index: 1;/*z-index定位層級高度，只能配合position屬性*/
34     }
35     .box2 img:nth-child(2){
36         z-index: 2;
37     }
38     </style>
39 </head>
40 <body>
41     <!-- table表格 -->
42     <table>
43         <tr>
44             <th>編號</th>
45             <th>用戶名</th>
46             <th>密碼</th>
47         </tr>
48         <tr>
49             <td>1</td>
50             <td>2</td>
51             <td>3</td>
52         </tr>
53         <tr>
54             <td>1</td>
55             <td>2</td>
56             <td>3</td>
57         </tr>
58     </table>
59     <!-- position定位 -->
60     <div class="box1">
61         あなたのストレスは：自分を鍛えることができないが、一生懸命働くふりをする；現(xiàn)狀があなたの內(nèi)なる欲望に追いつくことができない；それであなたは不安でパニックになる
62     </div>
63     <div class="box2">
64         <img src="images/bk.png" alt="">
65         <img src="images/wq.png" alt="">
66     </div>
67     <div class="box3">
68         Your stress comes from: unable to discipline yourself, but pretending to work hard;
69     </div>
70 </body>
71 </html>