仿京东抢购商品html

程序员会掉发

已于 2022-03-24 19:12:15 修改

阅读量142

点赞数

分类专栏：笔记文章标签： html5 css css3

于 2022-03-24 19:05:50 首次发布

本文链接：https://blog.csdn.net/m0_53613555/article/details/123718784

版权

本文档详细介绍了如何使用HTML、CSS和CSS3技术来创建一个仿京东抢购商品的页面。主要内容涵盖HTML结构布局以及CSS样式设计，旨在实现一个具有京东抢购特色的网页效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

html

<div class="box">
    <a href="#"><img src="images/iphone.png" alt=""></a>
    <a href="#">
      <h2><span> 自营 </span>Apple iPhone 13 128GB 绿色 支持移动联通电信5G 双卡双待手机</h2>
    </a>
    <a href="#">
      <h3><i>&yen; </i>5999.00</h3>
    </a>
    <a href="#">
      <h4>已售<em>87%</em></h4>
    </a>
    <div class="bar">
      <div class="bar-in"></div>
    </div>
    <h5>剩余<em>29</em>件</h5>
    <div class="hopping">
      <a href="#">立即抢购</a>
    </div>
  </div>

CSS

 * {
   
      margin: 0;
      padding: 0;
    }

    body {
   
      background-color: #e5e5e5;
    }

    a {
   
      text-decoration: none;
    }

    i,
    em