京东移动端页面布局

原创于 2019-05-20 14:40:57 发布 · 3.6k 阅读

20 ·

本内容遵循CC 4.0 BY-SA版权协议

博客展示了自适应移动端京东的HTML和CSS代码。包含重置CSS样式、通用样式，以及顶部搜索、轮播图、导航栏、产品部门、秒杀部分等模块的代码，实现了页面的布局和样式设计。

html代码

京东m

</header>

<div class="jd_banner">
    <ul>
        <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
    </ul>
    <ul>
        <li class="now"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<!--导航栏-->

<!--产品部分-->
<div class="jd_product">

掌上描述

0 0 : 0 0 : 0 0

更多>

   </div>
   <div class="con">
       <ul class="pro clearFix">
           <li>
               <a href="#"><img src="images/detail01.jpg" alt=""></a>
               <p class="nowPrice">&yen;10.00</p>
               <p class="oldPrice">&yen;100.00</p>
           </li>
           <li>
               <a href="#"><img src="images/detail02.jpg" alt=""></a>
               <p class="nowPrice">&yen;10.00</p>
               <p class="oldPrice">&yen;100.00</p>
           </li>
           <li>
               <a href="#"><img src="images/detail01.jpg" alt=""></a>
               <p class="nowPrice">&yen;10.00</p>
               <p class="oldPrice">&yen;100.00</p>
           </li>
       </ul>
   </div>

京东超市

京东自营

京东热门

css代码

/=reset css==/
,
::before,
::after{
/所有的标签，和伪元素都选中/
margin: 0;
padding: 0;
/移动端常用布局是非固定像素/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/点击高亮效果的清除/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
body{
font-size: 14px;
font-family: “Microsoft YaHei”,sans-serif;
color: #333;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
input,textarea{
border: none;
outline: none;
/不允许改变尺寸/
resize: none;
/元素的外观 none没有任何样式/
-webkit-appearance: none;
}
/=common css==/
.f_left{
float: left;
}
.f_right{
float: right;
}
.clearFix::before,
.clearFix::after{
content: “”;
display: block;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}
.m_l10{
margin-left:10px;
}
.m_r10{
margin-right:10px;
}
.m_t10{
margin-top:10px;
}
.m_b10{
margin-bottom:10px;
}
/使用精灵图的公用样式/
[class^=“icon_”],[class=" icon_"]{
background-repeat: no-repeat;
background-image: url("…/images/sprites.png");
background-size: 200px 200px;
}

body{
background: #f5f5f5;
}
/版心/
.jd_container{
min-width: 320px;
max-width: 640px;
width: 100%;
margin: 0 auto;
}
/顶部搜索/
.jd_search{
width: 100%;
height: 40px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
}
/内容居中/
.jd_search .jd_search_box{
height: 40px;
background: rgba(201,21,35,0.85);
min-width: 320px;
max-width: 640px;
width: 100%;
margin: 0 auto;
position: relative;
}
.jd_search .jd_search_box .icon_logo{
position: absolute;
left: 10px;
top: 4px;
width: 60px;
height: 36px;
background-position: 0 -103px;
}
.jd_search .jd_search_box .login{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 40px;
line-height: 40px;
text-align: center;
color: #ffffff;
}
.jd_search .jd_search_box form{
width: 100%;
padding-left: 70px;
padding-right: 50px;
position: relative;
}
.jd_search .jd_search_box form .icon_search{
width: 20px;
height: 20px;
position: absolute;
left: 80px;
top: 10px;
background-position:-60px -109px;
}
.jd_search .jd_search_box form input{
width: 100%;
height: 30px;
margin-top: 5px;
background-color: #fff;
border-radius: 15px;
padding-left: 40px;
}
/轮播图/
.jd_banner{
width: 100%;
overflow: hidden;
position: relative;
}
.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{
display: block;
width: 100%;
}
.jd_banner ul:first-child li a img{
display: block;
width: 100%;
}
.jd_banner ul:last-child {
position: absolute;
width: 118px;
height: 6px;
left: 50%;
margin-left: -59px;
bottom: 6px;
}
.jd_banner ul:last-child li{
width: 6px;
height: 6px;
border-radius: 3px;
border: 1px solid #ffffff;
float: left;
margin-left: 10px;
}
.jd_banner ul:last-child li:first-child{
margin-left:0;
}
.jd_banner ul:last-child li.now{
background: #fff;
}
/导航栏/
.jd_nav{
width: 100%;
background: #ffffff;
border-bottom: 1px solid #cccccc;
}
.jd_nav ul{
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
.jd_nav ul li{
float: left;
width: 25%;
}
.jd_nav ul li a{
width: 100%;
display: block;
}
.jd_nav ul li a img{
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
}
.jd_nav ul li a p{
text-align: center;
font-size: 12px;
color: #666;
padding: 5px 0;
}
/产品部门/
.jd_product{
padding: 0 5px;

}
.jd_product_box{
margin-top: 10px;
box-shadow: 0 0 2px #ccc;
background: #fff;
/min-height: 320px;/
}
.jd_product_box .tit{
height: 34px;
line-height: 34px;
border-bottom: 1px solid #ddd;
}
.jd_product_box .tit.nb{
border-bottom: none;
}
.jd_product_box .tit h3{
font-weight: normal;
position: relative;
padding-left:23px;
}
.jd_product_box .tit h3::before{
content: “”;
width: 3px;
height: 12px;
background: #d8505c;
position: absolute;
left: 10px;
top: 11px;
}
/秒杀部分/
.sk .icon{
width: 16px;
height: 20px;
float: left;
margin-left:10px;
margin-top:7px;
background: url("…/images/seckill-icon.png") no-repeat center/16px 20px;
}
.sk .name{
float: left;
margin-left:10px;
font-size: 16px;
color: #d8505c;
}
.sk .time{
float: left;
margin-left:10px;
}
.sk .time span{
float: left;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
color: #fff;
background: #333;
margin-left: 3px;
margin-top:9px;
}
.sk .time span:nth-child(3n){
background: #fff;
width: 3px;
color: #333;
}
.sk .pro{
width: 100%;
padding: 10px 0;
}
.sk .pro li{
width: 33.3333%;
float: left;
}
.sk .pro li a{
display: block;
border-right: 1px solid #cccccc;
}
.sk .pro li:last-child a{
border-right: none;
}
.sk .pro li a img{
display: block;
margin: 0 auto;
width: 64%;
}
.sk .pro li p{
text-align: center;
font-size: 12px;
padding: 5px 0;
}
.sk .pro li .nowPrice{
color: #d8505c;
}
.sk .pro li .oldPrice{
color: #666;
text-decoration: line-through;
}
/组合样式/
.w_50p{
width: 50%;
}
.w_50p img{
display: block;
width: 100%;
}
.bl{
border-left: 1px solid #dddddd;
}
.br{
border-right: 1px solid #dddddd;
}
.bb{
border-bottom: 1px solid #dddddd;
} 在这里插入图片描述