CSS学习笔记(一)-14.盒子模型-案例 

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-13 15:23:35
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-13 15:47:01
 7  * @Description: 
 8  * @FilePath: \css\快报案例.html
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 
14 <head>
15     <meta charset="UTF-8">
16     <meta http-equiv="X-UA-Compatible" content="IE=edge">
17     <meta name="viewport" content="width=device-width, initial-scale=1.0">
18     <title>快报案例</title>
19     <style>
20         * {
21             margin: 0;
22             padding: 0;
23         }
24         
25         li {
26             list-style: none;
27         }
28         
29         .report {
30             border: 1px solid #C9CCC8;
31             height: 165px;
32             width: 250px;
33             margin: 100px auto;
34         }
35         
36         .report h3 {
37             border-bottom: 1px dotted #C9CCC8;
38             height: 30px;
39             line-height: 30px;
40             font-size: 14px;
41             font-weight: 400;
42             padding-left: 20px;
43             color: #B3B3B3;
44         }
45         
46         .report ul {
47             margin-top: 8px;
48         }
49         
50         .report ul li a:hover {
51             text-decoration: underline;
52         }
53         
54         .report ul li {
55             height: 20px;
56             line-height: 20px;
57             padding-left: 20px;
58         }
59         
60         .report ul li a {
61             text-decoration: none;
62             color: #B3B3B3;
63             font-size: 12px;
64         }
65     </style>
66 
67 </head>
68 
69 <body>
70     <div class="report">
71         <h3>xxx快报</h3>
72         <ul>
73             <li><a href="#">[优惠]爆款耳机5折苗！</a></li>
74             <li><a href="#">[优惠]小米手环3折售！</a></li>
75             <li><a href="#">[优惠]旧机换新机！</a></li>
76             <li><a href="#">[优惠]圣诞节狂欢！</a></li>
77             <li><a href="#">[优惠]小米手机1元购！</a></li>
78         </ul>
79 
80     </div>
81 </body>
82 
83 </html>
View Code

 

posted @ 2021-07-13 15:48  kaer_invoker  阅读(46)  评论(0)  编辑  收藏  举报