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

最新推荐文章于 2024-08-14 16:46:28 发布

FSL-在学习

最新推荐文章于 2024-08-14 16:46:28 发布

阅读量5.4k

点赞数 8

文章标签： html css css3 html5

本文链接：https://blog.csdn.net/m0_37643322/article/details/108816991

版权

本文详细讲解了京东移动端首页的开发过程，包括技术选型、文件夹结构搭建、视口设置、布局分析。重点阐述了头部、搜索区域、主体内容（轮播图、小家电品牌日、导航栏、新闻部分）的HTML结构和CSS样式设计，以及移动端开发中常见的问题和解决方案，如点击高亮、最小最大宽度限制、Img的下间隙等。

摘要由CSDN通过智能技术生成

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是不能垂