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

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

要求：

• 使用无序列表制作热卖彩妆产品列表；

• 页面背景颜色直接使用标签选择器设置；

• 使用margin属性和padding属性设置段落标签、无序列表标签的外边距、内边距为0px；

• 使用list-style-type设置列表的项目符号为无；

• 使用border-bottom设置列表下边框的虚线边框；

• 使用a和a:hover分别设置超链接样式和鼠标悬停在超链接上的文本样式；

• 把列表前的数字放在标签中，使用后代选择器设置数字超链接样式及背景样式和鼠标指针悬停在超链接上的数字超链接样式及背景样式，数字上的背景使用border-radius属性。

代码（html）：

  
    
    
  
  
    

      
大家都喜欢买的美容品
      

        

          1雅诗兰黛即时修护眼部精华霜15ml
        
        

          2伊丽莎白雅顿显效复合活肤霜 75ml
        
        

          3OLAY玉兰油多效修护霜 50g
        
        

          4巨型一号丝瓜水320ML
        
        

          5倩碧保湿洁肤水2号 200ml
        
        

          6比度克细肤淡印霜 30g
        
        

          7兰芝 (LANEIGE)夜间修护锁水面膜 80ml
        
        

          8SK-II护肤精华露 215ml
        
        

          9欧莱雅青春密码活颜精华肌底液
        
      
    
  

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);
    }

效果：

 如果需要，大家可以自己扣一点细节。

将相本无种，男儿当自强。