仿京东抢购商品html

原创

已于 2022-03-24 19:12:15 修改 · 188 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #css3

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

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

在这里插入图片描述

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 {
   
   
      font-style