简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 京东秒杀功能HTML源码展示
Blogger Information
Blog 7
fans 0
comment 0
visits 5278
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
京东秒杀功能HTML源码展示
X光头
Original
1931 people have browsed it


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东秒杀功能HTML源码展示</title>
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/icon-font/iconfont.css">
</head>
<body>
    <!-- 页眉 -->
    <div class="header">
    <!-- 搜索框左侧菜单按钮 -->
    <div class="menu iconfont icon-menu"></div>
    <!-- 搜索框 -->
        <div class="search">
            <div class="logo">JD</div>
            <div class="zoom iconfont icon-search"></div>
            <input type="text" value="" placeholder="特价品牌手表" class="words">
        </div>
    <!-- 登录按钮 -->
        <a href="#" class="login">登录</a>
</div>

<!-- 主体部分 -->
    <div class="main">
        <!-- 主导航区 -->
            <ul class="nav">
                <li>
                    <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
                    <a href="">京东超市</a>
                </li>
                <li>
                    <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
                    <a href="">数码电器</a>
                </li>
                <li>
                    <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
                    <a href="">京东服饰</a>
                </li>
                <li>
                    <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
                    <a href="">京东生鲜</a>
                </li>
                <li>
                    <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
                    <a href="">京东到家</a>
                </li>
                <li>
                    <a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
                    <a href="">充值缴费</a>
                </li>
                <li>
                    <a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
                    <a href="">9.9元拼</a>
                </li>
                <li>
                    <a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
                    <a href="">领卷</a>
                </li>
                <li>
                    <a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
                    <a href="">领金贴</a>
                </li>
                <li>
                    <a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
                    <a href="">PLUS会员</a>
                </li>
            </ul>



           <!-- 秒杀区域 -->
           <div class="ms">
            <!-- 秒杀头部 -->
            <div class="ms-top">
             <div class="left">
               <div class="title">京东秒杀</div>
               <div class="notice">
                 <div class="tips">12点专场</div>
                 <div class="time">00:55:11</div>
               </div>
             </div>
             <div class="right">更多秒杀</div>
           </div>
           <!-- 秒杀主体区 -->
            <ul class="ms-body">
              <li class="item">
                <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
                <div class="iconfont icon-rmb">200</div>
                <div class="iconfont icon-rmb">558</div>
              </li>
              <li class="item">
                <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
                <div class="iconfont icon-rmb">88</div>
                <div class="iconfont icon-rmb">258</div>
              </li>
              <li class="item">
                <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
                <div class="iconfont icon-rmb">588</div>
                <div class="iconfont icon-rmb">999</div>
              </li>
              <li class="item">
                <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
                <div class="iconfont icon-rmb">888</div>
                <div class="iconfont icon-rmb">1234</div>
              </li>
              
            </ul>
        </div>

    </div>
    <div class="footer">
        <div>
            <!-- 上面图标 -->
            <div class="iconfont icon-home"></div>
            <!-- 下面文字 -->
            <span>首页</span>
        </div>
        <div>
            <!-- 上面图标 -->
            <div class="iconfont icon-menu"></div>
            <!-- 下面文字 -->
            <span>分类</span>
        </div>
        <div>
            <!-- 上面图标 -->
            <div class="iconfont icon-layers"></div>
            <!-- 下面文字 -->
            <span>京喜</span>
        </div>
        <div>
            <!-- 上面图标 -->
            <div class="iconfont icon-shopping-cart"></div>
            <!-- 下面文字 -->
            <span>购物车</span>
        </div>
        <div>
            <!-- 上面图标 -->
            <div class="iconfont icon-user"></div>
            <!-- 下面文字 -->
            <span>未登录</span>
        </div>
    </div>
</body>
</html>

index.css

* {

  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  /* 去掉a的下划线  */
  text-decoration: none;
  color: #7b7b7b;
}

li {
  list-style: none;
}

body {
  background-color: #f6f6f6;
}

/* :root === html   */
:root {
  /* 字号是可继承的属性,为了后面使用rem  */
  font-size: 10px;
}
body {
  /* font-size:16px; */
  /* 16px = 1.6 * 10px   */
  /* 10px == 1rem  */
  font-size: 1.6rem;
}

@media screen and (min-width: 480px) {
  :root {
    font-size: 12px;
  }
}

@media screen and (min-width: 640px) {
  :root {
    font-size: 14px;
  }
}

@media screen and (min-width: 720px) {
  :root {
    font-size: 16px;
  }
}

.header {
  background-color: #e43130;
  color: #fff;
  height: 4.4rem;
  position:fixed;
  left: 0;
  top: 0;
  right: 0;
}

.main{
  position:absolute;
  top:4.4rem;
  left: 0;
  right: 0;
  min-width: auto;
}

.footer {
  background-color: #ccc;
  color: #fff;
  height: 4.4rem;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

/* header css*/
.header{
    display: flex;
    align-items: center;
}
.header .menu{
    flex:1;
    font-size: 2.5rem;
    text-align:center;
}

.header .search{
    flex:6;
    background-color:white;
    border-radius: 3rem;
    padding: 0.5rem;
    display: flex;
}
.header .search .logo{
    color: #e43130;
    flex: 0 1 4rem;
    font-size:2rem;
    text-align:center;
    line-height:2rem;
}
.header .search .zoom{
    color: #ccc;
    font-size: 2rem;
    flex: 0 1 4rem;
    text-align:center;    
    line-height:2rem;
    border-left:1px solid;
}

/* 右边登录 */
.header .login{
    flex:1;
    color:white;
    text-align:center;

}
.header .search .words{
    flex: auto;
    border:none;
    outline: none;
    color: #aaa;
}

/* 底部CSS*/

.footer {
  display: flex;
  justify-content:space-around;
  align-items: center;
  color: #666;
  background-color: #eee;
  box-shadow: 0 0 6px #aaa;
}

/* flex支持嵌套布局，flex项目本身也可以是一个flex容器，它内部的子元素也可以使用flex布局 */
.footer div{
  display:flex;
  flex-flow: column nowrap;
  align-items:center;
}
.footer div:hover{
  cursor: pointer;
}
.footer > div > .iconfont{
  font-size:2rem;
}
.footer >div >span{
  font-size: 1rem;
}

/* 搜索框左边NAV CSS*/

.main .nav img{
    height: 4rem;
    width:4rem;
}

.main .nav{
    /* border: 1px solid; */
    padding: 1rem;
    display: flex;
    flex-flow: row wrap;
}

.main .nav li{
    flex: 1 1 20%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

/*秒杀CSS*/
.main .ms {
  background-color: #fff;
  /* border: 1px solid #000; */
  padding: 1rem;
  margin: 1rem 0;
}

/* 头部 */
.main .ms .ms-top {
  font: 1.3rem;
  height: 3rem;
  display: flex;
  justify-content: space-between;
}
/* 头部的左 */
.main .ms .ms-top .left {
  display: flex;
}
.main .ms .ms-top .left .notice {
  display: flex;
  height: 2rem;
  font-size: 1.1rem;
  border: 1px solid #e43130;
  border-radius: 2rem;
  justify-content: center;
  align-items: center;
}
.main .ms .ms-top .left .notice .tips {
  background-color: #e43130;
  color: #fff;
  border-radius: 2rem;
  padding: 0.3rem 0.5rem;
}
.main .ms .ms-top .right {
  color: #e43130;
  font-size: 1.2rem;
}

/* 秒杀主体区 */

.main .ms .ms-body {
  display: flex;
  justify-content: space-between;
}

/* 图片与价格居中对齐 */
.main .ms .ms-body .item {
  /* display: flex;
    flex-flow: column nowrap;
    align-items: center; */

  text-align: center;
}

.main .ms .ms-body .item img {
  height: 8rem;
  width: 8rem;
}

/* 当前秒杀价 */
.main .ms .ms-body .item div:first-of-type {
  color: #e43130;
  font-weight: bolder;
}

/* 原价 */
.main .ms .ms-body .item div:last-of-type {
  color: #666;
  text-decoration-line: line-through;
  text-decoration-color: #666;
}



Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！