手把手教你做小米商城-商品展示页面

最新推荐文章于 2026-05-07 13:43:27 发布

原创

最新推荐文章于 2026-05-07 13:43:27 发布 · 7.8k 阅读

标签

#前端

收录于

本文详细介绍如何使用HTML和CSS构建小米商城的商品展示页面。从清除默认样式开始，逐步介绍版心设定、浮动布局的应用、图片及文字内容的排版技巧，并解决了常见的3像素边框间隙问题。

手把手教你做小米商城商品展示页面

思路说明

1 先确定清除基本的默认样式跟基本的css 样式

 /* 清除默认样式 */

    * {
   
   
      margin: 0;
      padding: 0;
    }

    input {
   
   
      outline: none;
      border: 0;
    }
     a {
   
   
     text-decoration: none;
   }

    /* 清除浮动的样式 */

    .clearfix::after,
    .clearfix::before {
   
   
      content: "";
      display: block;
      height: 0;
      visibility: hidden;
      clear