移动端开发案例-京东移动端首页

1.移动端技术选型

方案：单独制作移动页面方案
布局：流式布局

2.搭建相关文件夹结构

其中index.html是京东首页，index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置.
images主要是放置背景图，upload主要是放置一些产品图片

3.设置视口标签以及引入初始化样式

4.整体html结构

5.分析页面布局

移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位和移动进行布局，不同的是，移动端的布局是用百分比作为单位。
body初始化样式，

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}

body必须先设置好，只有设置好了body后，才能写好里面的内容，body的宽度设置为100%后，里面的内容就默认和body一样宽了

5.1头部

html结构

  <!-- 头部 -->
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>

css样式

.app {
    height: 45px;
}
.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: #333333;
    text-align: center;
    color: #fff;
}
.app ul li:nth-child(1) {
    width: 8%;
}
.app ul li:nth-child(1) img {
    width: 10px;
}
.app ul li:nth-child(2) {
    width: 10%;
}
.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}
.app ul li:nth-child(3) {
    width: 57%;
}
.app ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515;
}

首先将高度写死，然后将li设置浮动，水平居中和垂直居中，利用.app ul li:nth-child(n)对这4个部分的宽度设置百分比，li中的img需要缩放.

logo图片默认和文字的基线对齐，设置line-height是不能垂直居中的，还需要把图片在垂直方向上居中对齐，应该要加上vertical-align: middle;

5.2 搜索区域

html结构

 <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登陆</div>
    </div>

css样式

.search-wrap {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 44px;
    min-width: 320px;
    max-width: 640px;
}
.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}
.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search-login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    line-height: 44px;
}
.search {
    position: relative;
    height: 30px;
    background-color: #fff;
    margin: 0 50px;
    border-radius: 15px;
    margin-top: 7px;
}
.jd-icon {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}
.jd-icon::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}
.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}

左右是用定位实现，中间是自适应的.中间的盒子是一个标准流的盒子，盒子不设置宽度，默认与父级一样宽，父级是一个100%宽的盒子，父级盒子伸缩时，子盒子也跟着伸缩，最后将左右用margin设置，将两侧空出来
放大镜的图标用的是精灵图

二倍精灵图的做法：

• 在firework里面，把精灵图等比例缩放为原来的一半
• 根据大小，测量坐标
• 注意，代码里面background-size也要写： 精灵图原来宽度的一半
• 不要保存firework里缩放的图，否则会修改原图

实现的效果如下：

搜索内容的部分，要设置的样式挺多的：

.search .put{
	width: 90%;
	box-sizing: border-box;
	line-height: 16px;
	vertical-align: middle;
	border: 0;
	color: #232326;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 6px;
	padding-left: 65px;
	outline: none;
}

5.3 主体内容部分

首先先建一个大盒子，把下面的所有内容包起来，再来一块块划分内容。

5.3.1 轮播图

html结构

<!-- 轮播图 -->
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>

css样式

.slider img {
    width: 100%;
}

img插入的图片要进行缩放，让图片的宽度设置为100%
轮播图应该位于搜索的下面，将search部分包起来的盒子设置为固定定位，同时要设置min-width和max-width，宽度也要设置为100%

5.3.2 小家电品牌日部分

html结构

 <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/pic11.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic22.dpg" alt="">
                </a>

            </div>
            <div>
                <a href="#">
                    <img src="upload/pic33.dpg" alt="">
                </a>

            </div>
        </div>

css样式

.brand {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.brand div {
    float: left;
    width: 33.33%;
}
.brand div img {
    width: 100%;
}

首先建一个大盒子，大盒子的高度不用设置，大盒子里面是3个大小相等的盒子，每个盒子各占33.33%，并且设置浮动。大盒子的左上角和右上角是小圆角，因此要设置 border-radius，我们将 border-radius写在了大盒子上，图片是没有变化的，要将图片也设置小圆角，在大盒子上设置 overflow: hidden;
同时要注意一点图片默认底部有空白缝隙，要在img上设置vertical-align: middle

5.3.3 移动端导航栏部分

首先建一个大盒子，大盒子的宽度、高度都不用设置，让内容自动撑开，一行上分为5个小块，每个各占20%，不设置高度，给它们设置浮动

html结构

    <!-- nav部分 -->
        <nav class="clearfix">
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav2.webp" alt="">
                <span>数码电器</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东服饰</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东生鲜</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东到家</span>
            </a>
            <a href="">
                <img src="upload/nav3.webp" alt="">
                <span>充值缴费</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东服饰</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
        </nav>

css样式

nav {
    padding-top: 5px;
}
nav a {
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
    width: 40px;
    margin: 10px 0;
}
nav a span {
    display: block;
}

5.3.4 新闻部分

首先设置一个大盒子，里面有3个链接，链接a中放img

html结构

 <div class="news">
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new2.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new3.dpg" alt="">
            </a>
        </div>

css样式

.news {
    margin-top: 20px;
}
.news img {
    width: 100%;
}
.news a {
    float: left;
    box-sizing: border-box;
}
.news a:nth-child(1) {
    width: 50%;
}
.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #ccc;
}

/* .news a:nth-child(2),
.news a:nth-child(3),
{
    width: 25%;
} */

利用 .news a:nth-child(n)设置这三个部分的宽度百分比，
.news a:nth-child(n+2) {
width: 25%;
}
是
.news a:nth-child(2),
.news a:nth-child(3),
{
width: 25%;
}
的简写形式，n+2就是从第二个开始往后面选

小竖线的写法是让第二个和第三个盒子设置左边框，此时盒子会掉下来，因为多了2px,解决办法是利用CSS3盒子模型，设置box-sizing:border-box,它可以将边框和内边距的值算进去，因此盒子就不会掉下来啦

总结回顾：

(1).清除点击高亮效果

-webkit-tap-highlight-color:transparent;/*清除点击高亮效果*/

在移动端浏览器会遇见点击出现高亮的效果，如在某个项目不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。

(2).所有盒子以内容边框开始计算（盒子内减）

/*设置宽度以内容边框开始计算*/
-webkit-box-sizing: border-box;
box-sizing: border-box;

在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding或使容器的宽度超出屏幕的宽度产生滚动条。那么我们的解决方案是什么试用css3属性 box-sizing设置所有的盒子从边框开始计算宽度。

(3).清除移动端默认的样式

/*在移动端清除浏览器默认样式*/
-webkit-appearance: none;

在移动设备的浏览器当中表单一般会有默认的属性 通过border：none;outline:none;是无法完全清楚的，还是会有一些浏览器默认的属性，比如：内阴影，立体感…我们可以将属性 -webkit-appearance 这个属性指的是设置成 none;

(4).最小宽度和最大宽度的限制
max-width: 640px; /在行业当中的移动端的设计图一般使用的是640px/
min-width: 320px; /在移动设备当中现在最小的尺寸320px/

(5).Img的下间隙问题

<div>
<a href="#">
<img src="../images/nv-fy.jpg" alt=""/>
</a>
<a href="#">
<img src="../images/nv-fy.jpg" alt=""/>
</a>
</div>

Img是行内块级元素 它也会有默认的基线对齐。那么和文字一样也会距离底部有一定的间隙。又因为 a标签是inline-block的，框模型是：行内框。行内框没有包含图片的表现，所以要使img能像放进一个盒子一样，就应该使用块级框：比如：display:block;或者display:inline-block

(6).结构性伪类选择器
E:first-of-type匹配同类型中的第一个元素E。
E:last-of-type匹配同类型中的最后一个元素E。
E:nth-of-type(n) 匹配同类型中的第n个元素E。