Tips_关闭按钮的简单实现 && Felx实现水平垂直居中

最新推荐文章于 2022-07-14 11:02:32 发布

转载最新推荐文章于 2022-07-14 11:02:32 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LinSL/p/9224054.html

本文介绍了使用CSS进行网页布局的方法，包括如何制作带有关闭按钮的卡片组件，并通过Flexbox轻松实现元素的水平垂直居中。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         body{
 8             margin : 0;
 9             padding: 0;
10         }
11         /* 关闭按钮 */
12         .card{
13             width: 200px;
14             height: 240px;
15             border: 1px solid #ccc;
16             border-radius: .2em;
17 
18             margin: 100px auto;
19         }
20         .cardHeader{
21             overflow: hidden;
22             height: 40px;
23             line-height: 40px;
24             border-bottom: 1px solid #ccc;
25         }
26         .closeCard{
27             display: inline-block;
28             padding: 0 10px;
29             font-size: 24px;
30             font-family: helvetica;
31             float: right;
32             cursor:pointer;
33             color: #ccc;
34         }
35         .closeCard:hover{
36             color: #007;
37         }
38 
39         /* flex实现水平垂直居中 */
40         .father{
41             /*以下三个设置*/
42             display: flex;
43             justify-content: center;
44             align-items: center;
45 
46             width: 400px;
47             height: 400px;
48             border: 1px solid #ccc;
49 
50             margin: 100px auto;
51 
52         }
53         .child{
54             width: 40px;
55             height: 60px;
56             background: #ccc;
57         }
58     </style>
59 </head>
60 <body>
61    <h3>关闭按钮</h3>
62    <div class="card">
63        <div class="cardHeader">
64            <span class="closeCard"> &times;</span>
65        </div>
66    </div>
67     
68   <h3>flex实现水平垂直居中</h3>
69    <div class="father">
70        <div class="child"></div>
71    </div>
72 </body>
73 </html>