寒假14

最新推荐文章于 2024-02-15 21:00:27 发布
原创最新推荐文章于 2024-02-15 21:00:27 发布 · 114 阅读
CC 4.0 BY-SA版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分类列表页</title>
  <style>
    div{
      border: 2px solid;
      border-color:orange;
      margin: 0px auto;
      border-radius: 20px;
      width: 210px;
      height: 510px;
    }
     p:nth-of-type(1){
      border: 1px solid;
      background: url("../图片素材/icon_01.jpg") no-repeat;
      width: 195px;
      height: 46px;
       margin: 0px auto;
       margin-top: 3px;
       border-radius: 1px;
       border-color: #999999;
       line-height: 46px;
       text-indent: 3em;
       border-style:none none dashed none;
    }
    p:nth-of-type(2){
      border: 1px solid;
      background: url("../图片素材/icon_02.jpg") no-repeat;
      width: 195px;
      height: 46px;
      margin: 0px auto;
      margin-top: 3px;
      border-radius: 1px;
      border-color: #999999;
      line-height: 46px;
      text-indent: 3em;
      border-style:none none dashed none;
    }
    p:nth-of-type(3){
      border: 1px solid;
      background: url("../图片素材/icon_03.jpg") no-repeat;
      width: 195px;
      height: 46px;
      margin: 0px auto;
      margin-top: 3px;
      border-radius: 1px;
      border-color: #999999;
      line-height: 46px;
      text-indent: 3em;
      border-style:none none dashed none;
    }
    p:nth-of-type(4){
      border: 1px solid;
      background: url("../图片素材/icon_04.jpg") no-repeat;
      width: 195px;
      height: 46px;
      margin: 0px auto;
      margin-top: 3px;
      border-radius: 1px;
      border-color: #999999;
      line-height: 46px;
      text-indent: 3em;
      border-style:none none dashed none;
    }
    p:nth-of-type(5){
      border: 1px solid;
      background: url("../图片素材/icon_05.jpg") no-repeat;
      width: 195px;
      height: 46px;
      margin: 0px auto;
      margin-top: 3px;
      border-radius: 1px;
      border-color: #999999;
      line-height: 46px;
      text-indent: 3em;
      border-style:none none dashed none;
    }
    p:nth-of-type(6){
      border: 1px solid;
      background: url("../图片素材/icon_06.jpg") no-repeat;
      width: 195px;
      height: 46px;
      margin: 0px auto;
      margin-top: 3px;
      border-radius: 1px;
      border-color: #999999;
      line-height: 46px;
      text-indent: 3em;
      border-style:none none dashed none;
    }
    p:nth-of-type(7){
      border: 1px solid;
      background: url("../图片素材/icon_07.jpg") no-repeat;
      width: 195px;
      height: 46px;
      margin: 0px auto;
      margin-top: 3px;
      border-radius: 1px;
      border-color: #999999;
      line-height: 46px;
      text-indent: 3em;
      border-style:none none dashed none;
    }
    p:nth-of-type(8){
      border: 1px solid;
      background: url("../图片素材/icon_08.jpg") no-repeat;
      width: 195px;
      height: 46px;
      margin: 0px auto;
      margin-top: 3px;
      border-radius: 1px;
      border-color: #999999;
      line-height: 46px;
      text-indent: 3em;
      border-style:none none dashed none;
    }
    p:nth-of-type(9){
      border: 1px solid;
      background: url("../图片素材/icon_09.jpg") no-repeat;
      width: 195px;
      height: 46px;
      margin: 0px auto;
      margin-top: 3px;
      border-radius: 1px;
      border-color: #999999;
      line-height: 46px;
      text-indent: 3em;
      border-style:none none dashed none;
    }
    p:nth-of-type(10){
      border: 1px solid;
      background: url("../图片素材/icon_10.jpg") no-repeat;
      width: 195px;
      height: 46px;
      margin: 0px auto;
      margin-top: 3px;
      border-radius: 1px;
      line-height: 46px;
      text-indent: 3em;
      border-style:none none none none;
    }
    a{
      text-decoration: none;
      color: black;
    }
    a:hover{
      text-decoration: none;
      color: red;
    }
  </style>
</head>
<body>
<div>
<p><a href="#">酒水、饮料</a></p>
  <p><a href="#">进口食品</a></p>
  <p><a href="#">休闲零食</a></p>
  <p><a href="#">地方特产</a></p>
  <p><a href="#">保健冲调</a></p>
  <p><a href="#">粮油、生鲜</a></p>
  <P><a href="#">美容洗护</a></P>
  <p><a href="#">清洁洗涤</a></p>
  <p><a href="#">母婴、纸品</a></p>
  <p><a href="#">家居百货</a></p>
</div>
</body>
</html>