靠乱写写出来的小模块-CSDN博客

本文链接：https://blog.csdn.net/m0_74904496/article/details/128568926

像一开始写的时候还是研究了不少时间。

整体的大盒子没有居中了。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

   

    /* 补充样式，达到效果要求 */

    .box {

      width: 262px;

      height: 340px;

      background-image: url('./images/bg.gif');

      border: 1px solid #009900;

      box-sizing: border-box;

    }

    .box li{

      display: block;

      width: 220px;

      height: 29px;

      font-size: 12px;

      line-height: 30px;

      margin-right: 10px;

      background-color: #fff;

      color: #551a8b;

     

      border-bottom: 1px dashed #666666;

    }

    .son {

      width: 240px;

      height: 270px;

      margin-left: 10px;

      display: block;

      background-color: #fff;

    }

    /*  这一节ul是在审查元素里面复制过来的，因为在一开始的时候发现padding-inline-start自带了40px  */

    ul {

    display: block;

    list-style-type: disc;

    margin-block-start: 0em;

    margin-block-end: 1em;

    margin-inline-start: 0px;

    margin-inline-end: 0px;

    padding-inline-start: 10px;

}

    h2 {

      display:inline-block;

      margin-top: 10px;

      color: #fff;

      font-size: 18px;

    }

    li {

      text-decoration: none;

      display: block;

    }

    .xhz {

      width: 5px;

      height: 25px;

      margin-top: 10px;

      margin-left: 10px;

      background-color: #c9e143;

      display: inline-block;



    }

    a {

      text-decoration: none;

    }





  </style>

</head>

<body>

  <div class="box">

    <div class="xhz"></div>

    <h2>爱宠知识</h2>

    <div class="son">

    <ul>

      <li><img src="./images/tb.gif"><a href="#">养狗比养猫对健康更有利</a></li>

      <li><img src="./images/tb.gif"><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>

      <li><img src="./images/tb.gif"><a href="#">狗狗歌曲《新年旺旺》</a></li>

      <li><img src="./images/tb.gif"><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>

      <li><img src="./images/tb.gif"><a href="#">【爆笑】这狗狗太不给力了</a></li>

      <li><img src="./images/tb.gif"><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>

      <li><img src="./images/tb.gif"><a href="#">狗狗各个阶段健康大事件</a></li>

      <li><img src="./images/tb.gif"><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>

      <li><img src="./images/tb.gif"><a href="#">为什么每次大小便后，会用脚踢土？</a></li>

    </ul>

    </div>

  </div>

</body>

</html>