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

ye空也晴朗
918 阅读8分钟

在试着实现京东移动端页面时候,本以为也是很简单的,但是在细节上,我还是发现了挺有趣的知识点

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

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

知识点补充

圣杯布局

上面搜索模块运用的是圣杯布局,使用绝对定位来说实现的,下面介绍一下圣杯布局

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

圣杯布局的思想就是

  • 两边可以通过定位或者浮动或者flex布局使得自己的位置处在两边
  • 中间部分的宽设为100%,即与父本同宽
  • 中间部分设置两边的padding值,使得本身的content部分的大小减少成刚好在中间的位置
  • 中间部分的子元素的宽设置为100%

京东的案例使用的是绝对定位来实现圣杯布局的, 下面使用浮动来实现(注意实际应用要清除浮动)

<html>
	<head>
		<title></title>
		<style>
			body{
			    min-width: 550px;
			}
			#container{
			    padding-left: 200px;
			    padding-right: 150px;
			}
			#container .column{
				height:300px;
			    float: left;
			}
			#center{
			    width: 100%;
			    background-color: yellow;
			}
			#left{
			    width: 200px;
				margin-left: -200px;			    
			    background-color: blueviolet;
			}
			#right{
			    width: 150px;
			    margin-right: -150px;
			    background-color: hotpink;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="left" class="column">left</div>
		    <div id="center" class="column">center</div>
		    <div id="right" class="column">right</div>
		</div>
	</body>
</html>

双飞翼布局

双飞翼布局的思想:

  • 两边可以通过定位或者浮动或者flex布局使得自己的位置处在两边
  • 中间部分的宽设为100%,即与父本同宽
  • 中间部分的子元素设置两边的margin来使得自身处在中间的位置
<html>
	<head>
		<title>双飞翼布局</title>
	</head>
	<style type="text/css">
		body {
		    min-width: 500px;
		}
		#container {
		    width: 100%;
		   
		}
		.column {
		    float: left;
		    height: 300px;
		}
		#center {
			height: 300px;
		    margin-left: 200px;
		    margin-right: 150px;
		    background-color: yellow;
		}
		#left {
		    width: 200px;
		    margin-right: -200px;
		    background-color: palegreen;
		}
		#right {
		    width: 150px;
		    margin-left: -150px;
		    background-color: blueviolet;
		}

	</style>

	<body>
		<div id="left" class="column">left</div>
		<div id="container" class="column">
		    <div id="center">center</div>
		</div>
		<div id="right" class="column">right</div>

	</body>

</html>

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

圣杯布局巧用padding值,双飞翼布局巧用margin值

轮播图结构

<!--轮播图-->
    <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;
}
avatar
文章
阅读
粉丝