zoukankan      html  css  js  c++  java

  • 京东首页静态页面

    预览效果

    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;
}

      1、box-shadow: 0 0 1px #e0e0e0;

    box-shadow 属性向框添加一个或多个阴影。

    语法

    box-shadow: h-shadow v-shadow blur spread color inset;

    注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

    值描述 
    h-shadow 必需。水平阴影的位置。允许负值。  
    v-shadow 必需。垂直阴影的位置。允许负值。  
    blur 可选。模糊距离。  
    spread 可选。阴影的尺寸。  
    color 可选。阴影的颜色。请参阅 CSS 颜色值。  
    inset 可选。将外部阴影 (outset) 改为内部阴影。  
  • 相关阅读:
    Markdown示例
    初识Markdown
    Ubuntu源整理
    Vi编辑器入门
    Ubuntu，Linux入门系统
    [其他]volatile 关键字
    Qt5：随窗口大小变化背景图片自动缩放的实现
    Qt5：不规则按钮的实现---通过贴图实现
    windows编程:创建DLL
    [转]Firefox拦截12306订票网站的解决办法
  • 原文地址：https://www.cnblogs.com/hongmaju/p/6711509.html
Copyright © 2011-2022 走看看