视频：https://www.bilibili.com/video/BV1pE411q7FU?p=162

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  10.   <style>
  11.     * {
  12.       margin: 0;
  13.       padding: 0;
  14.     }
  16.     .one {
  17.       border: 1px solid #dadcd9;
  18.       width: 444px;
  19.       height: 287px;
  20.     }
  22.     .two {
  23.       border-bottom: 1px dashed #e9ece9;
  24.       height: 52px;
  25.       color: #a7a7a7;
  26.       font-weight: 400;
  27.       line-height: 52px;
  28.       padding-left: 25px;
  29.     }
  31.     ul li {
  32.       margin-left: 38px;
  33.       list-style: none;
  34.       margin: 15px 0 0 38px;
  36.     }
  38.     ul li a {
  39.       color: #989998;
  40.     }
  42.     ul li a:hover {
  43.       text-decoration: underline;
  44.     }
  46.     a {
  47.       text-decoration: none;
  48.     }
  49.   </style>
  50. </head>
  52. <body>
  54. </body>
  56. <div class="one">
  57.   <h3 class="two">品优购快报</h3>
  58.   <ul>
  59.     <li><a href="">【优惠】爆款耳机五折秒！</a></li>
  60.     <li><a href="">【优惠】母亲节，健康好礼低至五折</a></li>
  61.     <li><a href="">【优惠】爆款耳机五折秒！</a></li>
  62.     <li><a href="">【优惠】9.9元洗100张照片！</a></li>
  63.     <li><a href="">【优惠】长虹智能空调立省1000</a></li>
  64.   </ul>
  65. </div>
  69. </html>

效果图
image.png

去掉li前面的点

list-style: none;