京东移动端页面的部分实现与思考

时间  2019-11-07
标签 京东 移动 页面 部分 实现 思考 栏目 无线 繁體版
原文   原文链接

base.css(公共样式)

/*公共样式*/

/*1.样式重置*/
html,body,ul,li,img,a,p,div,form,input{
    padding: 0;
    margin: 0;
    /*设置盒模型*/
    box-sizing: border-box;
    /*去除移动端特有的点击高亮效果*/
    -webkit-tap-highlight-color: transparent;
}
body{
    font-family: "微软雅黑",sans-serif;
    font-size: 13px;
}
a,
a:hover{
    color: #666;
    text-decoration: none;
}
ul{
    list-style: none;
}
input{
    /*1.清除文本框获取焦点时默认的边框阴影*/
    outline: none;
    /*2.去除边框*/
    border: none;
    /*3.添加边框*/
    border: 1px solid #ccc;
}

/*2.添加新的样式*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.m_left10{
    margin-left: 10px;
}
.m_right10{
    margin-right: 10px;
}
.m_top10{
    margin-top: 10px;
}
.clearfix::before,
.clearfix::after{
    content: "";
    display: block;
    height: 0;
    line-height: 0px;
    clear: both;
    visibility: hidden;
}
复制代码

index.html

页面结构：
<div class="jd_layout">
    <!--搜索块-->
    <div class="jd_search">
      
    </div>
    <!--轮播图-->
    <div class="jd_banner">
        
    </div>
    <!--导航块-->
    <div class="jd_nav">
       
    </div>
    <!--产品块-->
    <div class="jd_product"></div>
</div>
复制代码

页面样式

.jd_layout{
    width: 100%;
    /*最大宽度*/
    max-width: 640px;
    /*最小宽度*/
    min-width: 320px;
    margin:0 auto;
    height: 1000px;
    background-color: #ccc;
}
复制代码

搜索块

<div class="jd_search">
        <a href="javascript:;" class="jd_logo"></a>
        <form action="" class="jd_searchBox">
            <!--<span></span>-->
            <input type="text" placeholder="请输入商品名称">
        </form>
        <a href="javascript:;" class="jd_login">登陆</a>
  </div>
复制代码

搜索块模式

/*顶部搜索块*/
.jd_search{
    width: 100%;
    max-width: 640px;
    height: 40px;
    /*固定在顶部*/
    position: fixed;
    background: #e92322;
    z-index: 999;
}
.jd_logo{
    width: 56px;
    height: 30px;
    position: absolute;
    left: 10px;
    top: 5px;
    background: url("../images/jd-sprites.png");
    /*设置背景大小*/
    background-size: 200px 200px;
    background-position: 0px -108px;
}
.jd_login{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    line-height:40px;
    color: #fff;
}
.jd_searchBox{
    width: 100%;
    height: 100%;
    padding-left:76px;
    padding-right:50px;
}
.jd_searchBox > input{
    width: 100%;
    height: 30px;
    margin-top:5px;
    border-radius: 15px;
    padding-left:30px;
    color: #666;
}

/*使用伪元素添加放大 镜*/
.jd_searchBox::before{
    content: "";
    width: 27px;
    height: 23px;
    position: absolute;
    background: url("../images/jd-sprites.png");
    background-size: 200px 200px;
    background-position: -56px -108px;
    left: 80px;
    top:9px;
}
复制代码

注意:大部分的表单元素是不支持伪类的,因此上面的代码使用的在表单的父级使用伪类来实现搜索图标javascript

知识点补充:css

圣杯布局html

上面搜索模块运用的是圣杯布局,下面简单介绍一下圣杯布局java

上图就是咱们要实现的效果图,logo,登陆按钮分别在两边,中间是搜索框,在伸缩页面的宽度时,两边的logo,登陆按钮是不会变更的,可是中间搜索框的宽会随着变化

圣杯布局的思想就是web

  • 两边能够经过定位或者浮动使得本身的位置处在两边
  • 中间部分的宽设为100%,即与父本同宽
  • 中间部分设置两边的padding值,使得自己的content部分的大小减小成恰好在中间的位置
  • 中间部分的子元素的宽设置为100%

双飞翼布局bash

既然有圣杯布局能够实现上面的效果,咱们还可使用双飞翼布局,来看下面的一段代码实现的效果 布局

<html>
	<head>
		<title>双飞翼布局</title>
	</head>
	<style type="text/css"> .bd{ position: relative; width: 600px; box-sizing: border-box; } .main{ width: 100%; height: 100px; } .main-content{ margin: 0 80px 0; height: 100px; background-color: #FFCD43; } .left,.right{ position: absolute; top: 0; width: 80px; height: 100px; background-color: #A6E081; } .left{ left: 0; } .right{ right: 0; } </style>

	<body>
		<div class="bd">
			<div class="main text">
				<div class="main-content">main</div>
			</div>
			<div class="left text">
				left
			</div>
			<div class="right text">
				right
			</div>
		</div>
	</body>

</html>
复制代码

经过观察双飞翼布局的代码,不难发现,双飞翼布局的思想:字体

  • 两边能够经过定位或者浮动使得本身的位置处在两边
  • 中间部分的宽设为100%,即与父本同宽
  • 中间部分的子元素设置两边的margin来使得自身处在中间的位置

圣杯布局与双飞翼布局的区别就在于:ui

一个巧用padding值,一个巧用margin值url

轮播图结构

<!--轮播图-->
    <div class="jd_banner">
        <!--图片-->
        <ul class="jd_bannerImg">
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l4.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l5.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l6.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l7.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l8.jpg" alt="">
                </a>
            </li>
        </ul>
        <!--点标记-->
        <ul class="jd_bannerIndicator">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

复制代码

轮播图样式

/*轮播图样式*/
.jd_banner{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.jd_bannerImg{
    /*注意这里为何是800%?*/
    width:800%;
}
.jd_bannerImg > li{
    /*注意这里为何是12.5%?*/
    width:12.5%;
    float: left;
}
.jd_bannerImg > li img{
    /*1.设置为块元素 2.能够将文本的字体大小设置为0 3.vertical-align:bottom*/
    display: block;
    width: 100%;/*800%*12.5%*100%=100%*/
}
.jd_bannerIndicator{
    /*width: 128px; height: 10px;*/
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    border:1px solid black;
}
.jd_bannerIndicator > li{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 1px solid #fff;
    float: left;
    
}
.jd_bannerIndicator > li+li{
	margin-left:10px;
}

.jd_bannerIndicator > li.active{
    background-color: #fff;
}

复制代码

注意:

解释上面两处代码的疑问

1.为何jd_bannerImg的width的值为800%?

首先在移动端的页面的width的值咱们很注重,通常是使用百分比,既然是百分比,那就是相对于父原本说的,若是元素的直接的父本没有设置width,则默认为这一级的父本是相对上一级的父本width的100%,以此类推

若是一开始咱们这么设置

(注意:原图自己的width值为720px )

.jd_bannerImg{
    width:100%;//640px
}
.jd_bannerImg > li{
    float: left;//640px
}
.jd_bannerImg > li img{
    width: 100%;//640px<720px
}
复制代码

按照计算,img的width值为640px<720px,因此此时图片是按照width640px来显示的,可是父本的width值也是640px,因此就算li标签浮动,因为父级宽度不够,只能往下掉,就会获得上图的效果,此时img的width:640px

如今,你说父本宽度不够,才致使li往下掉的,我如今改为这样,我把父本的宽度改成原来的8倍(由于有8张图),这样能够了吧

.jd_bannerImg{
	width: 800%;//640px*8
}
.jd_bannerImg > li{
    float: left;
}
.jd_bannerImg>li img{
	width: 100%;//640px*8*100%=5120px>720px
}
复制代码

经过计算能够知道img的width是远远大于原图自己的width,因此此时图片是按照width720来显示,因为父本widthd的值为640px*8,有足够的大小,因此在浮动的做用下,li会向右并排,可是最后一张是并排不下的(720px*8=5760px>5120px),所以会获得下面的效果

因此,经过分析,正确的写法就是案例中的写法,在li中也要设置width的百分比,经过计算800%*12.5%*100%=100%,即640px*8*12.5%*100%=640px<720,因此图片按照width值为640px显示,因为父本的width恰好为640px*8,因此li依次向左浮动

总结:

在移动端写结构的时候,为了不出现上面的状况,每个父本都要设置百分比,这里的百分比通常只考虑width

导航块结构

<!--导航块-->
    <div class="jd_nav">
        <ul class="clearfix">
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_1.png" alt="">
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_2.png" alt="">
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_3.png" alt="">
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_4.png" alt="">
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_5.png" alt="">
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_6.png" alt="">
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_7.png" alt="">
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_8.png" alt="">
                    <p>商品分类</p>
                </a>
            </li>
        </ul>
    </div>
复制代码

导航块结构样式

/*导航块样式*/
.jd_nav{
    width: 100%;
    padding:10px 0;
    background-color: #fff;
}
.jd_nav li{
    width: 25%;
    float: left;
    text-align: center;
    margin-top:5px;
}
.jd_nav li img{
    width: 50px;
}
.jd_nav li p{
    line-height:25px;
}
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程