京东首页静态页面

预览效果

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<div class="layout">
    <header class="jd_header">
        <div class="jd_header_box">
            <a href="#" class="icon_logo"></a>
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="提示站位">
            </form>
            <a href="#" class="login">登录</a>
        </div>
    </header>
    <div class="jd_banner">
        <ul class="clearfix">

            <li><a href=""></a><img src="images/l8.jpg" alt=""></li>
            <li><a href=""></a><img src="images/l1.jpg" alt=""></li>
            <li><a href=""></a><img src="images/l2.jpg" alt=""></li>
            <li><a href=""></a><img src="images/l3.jpg" alt=""></li>
            <li><a href=""></a><img src="images/l4.jpg" alt=""></li>
            <li><a href=""></a><img src="images/l5.jpg" alt=""></li>
            <li><a href=""></a><img src="images/l6.jpg" alt=""></li>
            <li><a href=""></a><img src="images/l7.jpg" alt=""></li>
            <li><a href=""></a><img src="images/l8.jpg" alt=""></li>
            <li><a href=""></a><img src="images/l1.jpg" alt=""></li>

        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <!--nav.jd_nav>ul>(li>a>img+p{分类查询})*8-->
    <nav class="jd_nav">
        <ul class="clearfix">
            <li><a href=""><img src="images/nav0.png" alt="">
                <p>分类查询</p>
            </a></li>
            <li><a href=""><img src="images/nav1.png" alt="">
                <p>分类查询</p>
            </a></li>
            <li><a href=""><img src="images/nav2.png" alt="">
                <p>分类查询</p>
            </a></li>
            <li><a href=""><img src="images/nav3.png" alt="">
                <p>分类查询</p>
            </a></li>
            <li><a href=""><img src="images/nav4.png" alt="">
                <p>分类查询</p>
            </a></li>
            <li><a href=""><img src="images/nav5.png" alt="">
                <p>分类查询</p>
            </a></li>
            <li><a href=""><img src="images/nav6.png" alt="">
                <p>分类查询</p>
            </a></li>
            <li><a href=""><img src="images/nav7.png" alt="">
                <p>分类查询</p>
            </a></li>

        </ul>
    </nav>

    <!--商品-->
    <main class="jd_product">
        <section class="product_box jd_sk">
            <div class="product_box_tit no_border">
                <div class="f_left m_l10">
                    <span class="sk_icon"></span>
                    <span class="sk_name m_l10">掌上秒杀</span>
                    <div class="sk_time m_l10">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>

                </div>
                <div class="f_right m_r10"><a href="">更多></a></div>
            </div>
            <div class="product_box_con">
                <ul class="clearfix">
                    <li><a href=""><img src="images/detail01.jpg" alt=""></a>
                        <p>&yen;10.00</p>
                        <p>&yen;100.00</p>
                    </li>
                    <li><a href=""><img src="images/detail02.jpg" alt=""></a>
                        <p>&yen;10.00</p>
                        <p>&yen;100.00</p>
                    </li>
                    <li><a href=""><img src="images/detail01.jpg" alt=""></a>
                        <p>&yen;10.00</p>
                        <p>&yen;100.00</p>
                    </li>
                </ul>
            </div>
        </section>
        <section class="product_box clearfix">
            <div class="product_box_tit"><h3>京东超市</h3></div>
            <div class="product_box_con">
                <a href="" class="f_left w_50 b_right"><img src="images/cp1.jpg" alt=""></a>
                <a href=""><img class="f_right w_50 b_bottom" src="images/cp2.jpg" alt=""></a>
                <a href=""><img class="f_right w_50" src="images/cp3.jpg" alt=""></a>
            </div>
        </section>
        <section class="product_box clearfix">
            <div class="product_box_tit"><h3>京东超市</h3></div>
            <div class="product_box_con">
                <a href="" class="f_right w_50 b_left"><img src="images/cp4.jpg" alt=""></a>
                <a href="" class="f_left w_50 b_bottom"><img src="images/cp5.jpg" alt=""></a>
                <a href="" class="f_left w_50"><img src="images/cp6.jpg" alt=""></a>
            </div>
        </section>
        <section class="product_box">
            <div class="product_box_tit"><h3>京东超市</h3></div>
            <div class="product_box_con">
                <a href="" class="f_left w_50 b_right"><img src="images/cp1.jpg" alt=""></a>
                <a href=""><img class="f_right w_50 b_bottom" src="images/cp2.jpg" alt=""></a>
                <a href=""><img class="f_right w_50" src="images/cp3.jpg" alt=""></a>
            </div>
        </section>
    </main>
</div>

</body>
</html>

index.css

.layout{
    width:100%;
    max-width: 640px;
    min-width: 300px;
    margin:0 auto;
    position: relative;

}
.jd_header{
    position: fixed;
    left: 0;
    top:0;
    height:40px;
    width:100%;
    z-index:1000;

}
.jd_header>.jd_header_box{
    position: relative;
    width: 100%;
    max-width: 640px;
    min-width: 300px;
    margin:0 auto;
    background: rgba(201,21,35,0);
    height:40px;

}
.jd_header>.jd_header_box>.icon_logo{
    width:60px;
    height:36px;
    position: absolute;
    /*background: url("../images/sprites.png") no-repeat;*/
    /*background-size:200px 200px;*/
    background-position: 0 -103px;
    top: 4px;
    left: 10px;

}
.jd_header>.jd_header_box>.login{
    width: 50px;
    height: 40px;
    line-height:40px;
    text-align: center;
    color: #ffffff;
    position: absolute;
    right:0;
    top:0;
    font-size: 15px;

}
.jd_header>.jd_header_box>form{
    width:100%;
    padding-left:75px;
    padding-right:50px;
    height:40px;
    position: relative;

}
.jd_header>.jd_header_box>form>input{
    width:100%;
    height:30px;
    border-radius:15px;
    margin-top:5px;
    padding-left:34px;

}
.jd_header>.jd_header_box>form>.icon_search{
    height:20px;
    width:20px;
    position: absolute;
    background-position: -60px -109px;
    top:10px;
    left:85px;
}
.jd_banner{
    width: 100%;
    position: relative;
    overflow: hidden;
}
.jd_banner>ul:first-child{
    width: 1000%;
transform: translateX(-10%);
    -webkit-transform:translateX(-10%);
}
.jd_banner>ul:first-child>li{
    width: 10%;
    float: left;

}
.jd_banner>ul:first-child>li>a{
    width: 100%;
    display: block;
}
.jd_banner>ul:first-child>li>a>img{
    width: 100%;
    display: block;

}
.jd_banner>ul:last-child{
    width: 118px;
    position: absolute;
    height: 6px;
    bottom: 6px;
    left: 50%;
    margin-left: -59px;
}
.jd_banner>ul:last-child>li{
    width: 6px;
    height: 6px;
    float: left;
    border-radius: 3px;
    border:1px solid #ffffff;
    margin-left: 10px;

}
.jd_banner>ul:last-child>li.now{
    background: #ffffff;
}
.jd_banner>ul:last-child>li:nth-child(1){
    margin-left: 0;
}
/*导航栏模块*/
.jd_nav{
    width: 100%;
    background: #ffffff;
border-bottom: 1px solid #e0e0e0;
}
.jd_nav>ul{
    width: 100%;
   padding:10px 0;
}
.jd_nav>ul>li{
    width: 25%;
    float: left;

}
.jd_nav>ul>li>a{
    display: block;
}
.jd_nav>ul>li>a>img{
    width: 40px;
    height: 40px;
    display: block;
    margin:0 auto ;

}
.jd_nav>ul>li>a>p{
    text-align: center;
    color: #666666;
    font-size: 12px;
    padding: 6px 0;

}
/*商品主盒子*/
.jd_product{
    padding:0 5px;

}
.jd_product>.product_box{
    width: 100%;
    background: #ffffff;
    margin-top: 10px;

    box-shadow: 0 0 1px #e0e0e0;

}
.jd_product>.product_box>.product_box_tit{
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #e0e0e0;

}
.jd_product>.product_box>.product_box_tit.no_border{
border-bottom: none;
}
.jd_product>.product_box>.product_box_tit>h3{
font-weight: normal;
    font-size: 15px;
    padding-left: 20px;
    position: relative;
    color: #666666;

}
.jd_product>.product_box>.product_box_tit>h3::before{
    content: ‘‘;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 3px;
    height: 12px;
    background: #d8505c;

}
/*掌上秒杀*/
.jd_sk{}
.jd_sk .sk_icon{
   background:url("../images/seckill-icon.png") no-repeat;

    background-size:16px 20px;
    width: 16px;
    height: 20px;
    float: left;
    margin-top: 6px;
}
.jd_sk .sk_name
{
    color: #d8505c;
    font-size: 15px;
    float: left;

}
.jd_sk .sk_time
{
    float: left;
    margin-top: 8px;

}

.jd_sk .sk_time>span
{
    float: left;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    background: #333333;
    color: #ffffff;
    margin-left: 3px;

}
.jd_sk .sk_time>span:nth-child(3n)
{
    background: #ffffff;
    color: #333333;
    width: 5px;
}
.jd_sk .product_box_con>ul{
    width: 100%;
    font-size: 12px;
    padding-top: 10px;
}
.jd_sk .product_box_con>ul>li{
    width: 33.333%;
    float: left;
    text-align: center;
}

.jd_sk .product_box_con>ul>li>a{
    display: block;
    width: 100%;
    border-right: 1px solid #e0e0e0;
}
.jd_sk .product_box_con>ul>li:last-child>a{
    border-right:0;

}
.jd_sk .product_box_con>ul>li>a>img{
    width: 64%;
    display: block;
    margin: 0 auto;
}
/*e:first-of-type 选择e同类型的同级的 第一个元素*/
/*e:last-of-type 选择e同类型的同级的 第一个元素*/
/*e:nth-of-type(n) 选择e同类型的同级的 第n个元素*/
.jd_sk .product_box_con>ul>li>p:first-of-type{
color:#d8505c;
    margin-top: 5px;
    margin-top: 5px;
}

.jd_sk .product_box_con>ul>li>p:last-of-type{
text-decoration: line-through;
    color: #666666;
    margin-top: 5px;
}
/*组合样式*/
.w_50{
    width: 50%;
    display: block;
}
.w_50 >img{
    display: block;
    width: 100%;
}
.b_left{
    border-left:1px solid #e0e0e0;

}
.b_right{
    border-right:1px solid #e0e0e0;
}

.b_bottom{
    border-bottom:1px solid #e0e0e0;
}

base.css

/*重置样式*/
*,::before,::after{
    /*选择所有的标签*/
    margin:0;
    padding:0;
    /*清楚移动端默认的 点击高亮效果*/
    -webkit-tap-highlight-color:transparent;
    /*设置所有的都是以边框开始计算宽度 百分比*/
    -webkit-box-sizing:border-box;/*兼容*/
    box-sizing:border-box;
}
body{
    font-size:14px;
    font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/
    color:333;
}
a{
    color:333;
    text-decoration:none;/*不显示下划线*/
}
a:hover{
    text-decoration:none;/*不显示下划线*/
}
ul,ol{
    list-style:none;
}
input{
    border:none;
    outline:none;
    /*清除移动端默认的表单样式*/
    -webkit-appearance:none;
}
/*公共样式*/
.f_left{
    float:left;
}
.f_right{
    float:right;
}
.clearfix::before,.clearfix::after{
    content:"";
    height:0;
    line-height:0;
    display:block;
    visibility:hidden;
    clear:both;
}
[class^="icon_"]{
    background: url("../images/sprites.png") no-repeat;
    background-size:200px 200px;
}
.m_l10{
    margin-left: 10px;
}
.m_r10{
    margin-right: 10px;
}
.m_b10{
    margin-bottom: 10px;
}
.m_t10{
    margin-top: 10px;
}

box-shadow: 0 0 1px #e0e0e0;

.jd_sk .sk_time>span:nth-child(3n)

/*e:first-of-type 选择e同类型的同级的 第一个元素*/
/*e:last-of-type 选择e同类型的同级的 第一个元素*/
/*e:nth-of-type(n) 选择e同类型的同级的 第n个元素*/
.jd_sk .product_box_con>ul>li>p:first-of-type{

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

时间： 2024-07-31 14:34:41

京东首页静态页面的相关文章

html+css实现小米商城首页静态页面

学了一个星期的html和css,用新学的东西写点东西,仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面. 源代码:链接:https://pan.baidu.com/s/1qf63B6dBAUoDd6tpHFgESQ 密码:lwc5 总结写前端时的不足: css很多属性名记不住,经常需要去查笔记 类名命名不是很规范 没有充分利用css类的特性 整个页面布局像是东拼西凑出来的(虽然拼凑的挺不错) 暂时还没实现页面的动态效果,比如说轮播图,选项卡,鼠标放在某个a标签上的动态效果(

用HTML+CSS实现一个计科院网站首页静态页面

链接:https://pan.baidu.com/s/1akwyc89q3nzKDQQulaFelQ 提取码:s6ys 原文地址:https://www.cnblogs.com/hzlshijie/p/10560255.html

基础复习（京东静态页面的实现）第一天

一.前言 作为一个技术小白决定记录下自己前端学习过程的点点滴滴,欢迎各为大神轻喷! 二.引入 前端最为基础的就是Html.css.js,为了巩固并且加强自己的基础所以挑选出了京东的静态页面作为这三天的复习内容!在第一天中我首先完成的是页面的快速导航.头部广告.搜索栏三个基础页面! 三.重点内容 ㈠ 开发前的准备工作: 在开始一个完整的项目之前首先要做的并不是着急的去写代码,完成项目前的准备工作.项目的准备工作可以分为以下几个部分 ① 配置开发环境     ② 建立项目文件夹     ③css文件

开发“小米商城官网首页”（静态页面）

一,项目题目:开发"小米商城官网首页"(静态页面) 二,项目需求 1.熟练运用所学知识还原小米商城官网首页静态页面 * 不需要做动态效果,只实现静态页面, 后期学完js再回来实现动态效果 三,项目布局 四,效果对比 目前的官网图片和小编做的图片对比 官网图片 小编做的效果图 五,代码附上 链接:https://pan.baidu.com/s/1EVyF8RIgRXFvEIHQf42Pow 密码:zqs4 index.html <!DOCTYPE html> <html

京东静态页面第一天

书写页面前的准备 1.配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 2.建立项目文件夹   为了将与项目相关的文件放在一块,便于管理和以后的维护 包括与项目相关的一些文件 主页或是首页    index.html   default.html Css文件夹    css文件的 Base.css     global.css Images文件夹  用来放置网站中的所有的图片Js文件 音频或是视频文件 3. 样式初始化 我们的结构中的标签都有默

2016最新京东商城首页静态模板下载

2016最新京东商城首页静态模板下载 预览 百度云盘下载

仿新浪首页、主题、详情页，纯html静态页面

仿新浪首页.主题.详情页,纯html静态页面,下载地址: http://download.csdn.net/detail/sweetsuzyhyf/8085535

扒皮下京东首页楼层图标的动画效果实现方式

京东首页的楼层图标默认是灰色的,但拉动滚动条,让该图标从下方挪动到屏幕正中的时候,该图标会显示出从上到下由灰变绿的动画效果,如下图 这种效果很有Lazyload的范,也是挺吸引眼球的交互方式,下面用JQ来仿造下这种效果的实现方式,其实挺简单. 首先我是做了2个gif分别作为图标的默认状态和动画状态(注意第二个gif的动画效果只显示一次,不循环的,而且是从下往上<做的着急了点,跟京东的动画方向相反了哈哈>,错过效果的朋友请刷新吧):        P.S. 京东的动画效果并非用动态gif实现的,

只用table模仿一个静态页面

尝试只用table标签来模仿一个静态页面,这样做可以很好的增加对网页结构理解. 要尝试模仿的页面如下: 附上我自己写的代码,因为只是用了HTML,没有用到CSS和js,所以有些样式写出来和原图有些出入 <!DOCTYPE html> <html> <head> <title>只用table来模仿一个网页</title> <meta charset="utf-8"> </head> <body>