CSS学习笔记(一)-14.盒子模型-案例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/15006751.html