html布局+css 制作简单的产品分类列表

最新推荐文章于 2024-05-12 21:57:36 发布

五彩斑斓黑123

最新推荐文章于 2024-05-12 21:57:36 发布

阅读量1.6k

点赞数 5

分类专栏： css 作业文章标签： css html css3

本文链接：https://blog.csdn.net/qq_69444691/article/details/130124672

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

作业

4 篇文章 0 订阅

订阅专栏

本篇文章将会使用到常用的布局方式以及常用的css选择器。若需了解更多，请前往常见的布局方式和常用的css选择器两篇文章进行学习。

要求：

使用无序列表制作热卖彩妆产品列表；
页面背景颜色直接使用标签选择器<body>设置；
使用margin属性和padding属性设置段落标签、无序列表标签的外边距、内边距为0px；
使用list-style-type设置列表的项目符号为无；
使用border-bottom设置列表下边框的虚线边框；
使用a和a:hover分别设置超链接样式和鼠标悬停在超链接上的文本样式；
把列表前的数字放在<span>标签中，使用后代选择器设置数字超链接样式及背景样式和鼠标指针悬停在超链接上的数字超链接样式及背景样式，数字上的背景使用border-radius属性。

代码（html）：

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>美容热点产品</title>
  </head>
  <body>
    <div id="beauty">
      <p>大家都喜欢买的美容品</p>
      <ul>
        <li>
          <a href="#"><span>1</span>雅诗兰黛即时修护眼部精华霜15ml</a>
        </li>
        <li>
          <a href="#"><span>2</span>伊丽莎白雅顿显效复合活肤霜 75ml</a>
        </li>
        <li>
          <a href="#"><span>3</span>OLAY玉兰油多效修护霜 50g</a>
        </li>
        <li>
          <a href="#"><span>4</span>巨型一号丝瓜水320ML</a>
        </li>
        <li>
          <a href="#"><span>5</span>倩碧保湿洁肤水2号 200ml</a>
        </li>
        <li>
          <a href="#"><span>6</span>比度克细肤淡印霜 30g</a>
        </li>
        <li>
          <a href="#"><span>7</span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a>
        </li>
        <li>
          <a href="#"><span>8</span>SK-II护肤精华露 215ml</a>
        </li>
        <li>
          <a href="#"><span>9</span>欧莱雅青春密码活颜精华肌底液</a>
        </li>
      </ul>
    </div>
  </body>
</html>

css：

 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #c7c4c4;
    }
    #beauty {
      width: 35%;
      margin: 0 auto;
      background-color: #f9f8f8;
    }
    li {
      list-style: none;
      margin: 10px 0;
      border-bottom: 1px dashed #ccc;
    }
    a {
      color: #323131;
      text-decoration: none;
    }
    a:hover {
      background-color: orange;
    }
    a:hover span {
      background-color: orange;
    }
    ul {
      padding-left: 20px;
    }
    li a span {
      display: inline-block;
      width: 20.8px;
      height: 100%;
      border-radius: 50%;
      text-align: center;
      margin-right: 10px;
      color: #fff;
      background-color: rgb(33, 31, 31);
    }
    p {
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      padding-left: 20px;
      background-color: rgb(199, 20, 95);
    }

效果：