注册 登录
编程论坛 JavaScript论坛

请教大佬一个html+css问题,为什么背景图片不能铺满?不知道哪里有问题(图片和代码在一个大文件夹下)

w525877 发布于 2023-09-14 10:45, 451 次点击
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>爱宠知识</title>
    <style>
      * {
          margin:0;
          padding:0;
      }

      .box {
          margin:20px auto;
          width:320px;
          height:420px;
          background-image:url(images\bg.gif);
          border:1.5px solid #009900;
      }

      .tle {
          border-left:5px solid #c9e143;
          color:white;
          font-size:23px;
          margin:20px 15px 10px 15px;
          padding-left:5px;
      }

      .news {
          background-color:white;
          margin:5px 15px 10px 15px;
      }

      .news ul li {
          list-style:none;
          border-bottom:1px dashed #a1aeb1;
          margin:5px 5px 5px 5px;
          padding-top:5px;
          padding-bottom:7px;
      }

      .news ul li a {
          font-size:15px;
          font-color:#0066cc;
          text-decoration:none;
      }

      a:link{
               color:#0066cc;
            }
      a:visited{
                  color:#0066cc;
               }
      a:hover{
                color:red;
             }
      a:active{
                 color:grey;
              }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="tle">
        <h4>爱宠知识</h4>
      </div>

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

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

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

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

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

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

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

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

          <li>
            <img src="images\tb.gif" alt="">
            <a href="#">为什么每次大小便后,会用脚踢土?</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>



第一个为我的效果。第二个图为要求的效果

只有本站会员才能查看附件,请 登录
只有本站会员才能查看附件,请 登录
1 回复
#2
冰镇柠檬汁儿2023-09-28 16:17
我猜是这里的问题,
      .news {

          background-color:white;

          margin:5px 15px 10px 15px;

      }
不要用margin,在父级里用padding
     .box {

          margin:20px auto;

          width:320px;

          height:420px;

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

          border:1.5px solid #009900;

          padding: 5px 15px 10px 15px;
      }
这样试试
1