京东移动端商场步骤来源黑马_京东移动弹出菜单-CSDN博客

本文链接：https://blog.csdn.net/qq_29820687/article/details/125578954

第一部分（顶部）

1.设置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,
    user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

2.引入下载的css初始化文件

<link rel="stylesheet" href="css/normalize.css">

3.引入我们首页的css样式文件

<link rel="stylesheet" href="css/index.css">

4.设置标题

<title>京东移动端首页</title>

5.通用选择器设置"外边距"和"内填充"

*{
    margin:0;
    padding:0;
}

6.body标签(注意！！！后三个根据实际情况来写)

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

7.html中标签中写头部标签…

<header class="app">
        <ul>
            <li>8</li>
            <li>10</li>
            <li>57</li>
            <li>25</li>
        </ul>
</header>

8.css中写样式…

ul {
    margin:0;
    padding:0;
    list-style: none;
}

.app{
    height: 45px;
}

.app ul li{
    float: left;
    height: 45px;
    background-color: #333333;
}

.app ul li:nth-child(1){
    width: 8%;
}

.app ul li:nth-child(2){
    width: 10%;
}

.app ul li:nth-child(3){
    width: 57%;
}

.app ul li:nth-child(4){
    width: 25%;
}

在这里插入图片描述

9.下载关闭图标到image文件夹，并在ul li标签中写img标签引入图片

<header class="app">
        <ul>
            <li>
                <img src="images/关闭.png" alt="">
            </li>
            <li>10</li>
            <li>57</li>
            <li>25</li>
        </ul>
    </header>

10.写好对应的css样式代码

.app ul li:nth-child(1) img{
    width: 15px;
}

11.再在…app ul li{ }原有样式上加水平居中、垂直居中

.app ul li{
    /*此处省略之前的代码*/
    line-height: 45px;
    text-align: center;
}

在这里插入图片描述

12.下载京东logo图标到image文件夹，并在ul li标签中写img标签引入图片

<header class="app">
        <ul>
            <li>
                <img src="images/关闭.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>57</li>
            <li>25</li>
        </ul>
    </header>

13.写好对应的css样式代码

.app ul li:nth-child(2) img{
    width: 30px;
    vertical-align: middle;/* 让文字与图片居中对齐 */
}

在这里插入图片描述

14.将另外两个li标签里面写好对应的文字即可

<header class="app">
        <ul>
            <li>
                <img src="images/关闭.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>
                打开京东App,购物更轻松
            </li>
            <li>
                立即打开
            </li>
        </ul>
    </header>

15.再在…app ul li{ }原有样式上加字体颜色成白色

.app ul li{
    /*此处省略之前的代码*/
    color:#fff;
}

第二部分（搜索）

16.写好搜索盒子标签

<!-- 搜索 -->
<div class="search-wrap">
   
</div>

17.写好对应的css样式代码

/* 搜索 */

.search-wrap{
    height: 44px;
}

18.在类名为.search-wrap标签里面写
两个div,分别为

<!-- 搜索 -->
<div class="search-wrap">
    <div class="search-btn"></div>
    <div class="search-login"></div>
</div>

19.写好对应的css样式代码

.search-btn{
    position: absolute;
    top:0;
    left:0;
    background-color: pink;
    width: 40px;
    height: 44px;
}

.search-login{
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    background-color: purple;
}

20.在.search-wrap类选择器原有基础上加上相对定位relative

.search-wrap{
    position: relative;
    /*此处省略之前的代码*/
}

在这里插入图片描述

21.写上正中间的标签

<!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search"></div>
        <div class="search-login"></div>
    </div>

22.写上对应的css代码

.search{
    height: 44px;
    background-color: skyblue;
    margin: 0 50px;
}

在这里插入图片描述

23.找到最上方的body{ }样式，在里面加上背景色#ccc

body{
    /*此处省略之前的代码*/
    background-color: #ccc;
}

24.更改.search{ }中样式代码

.search{
    height: 30px;
    background-color: #fff;
    margin: 0 50px;
    border-radius: 15px;
    margin-top: 7px;
}

在这里插入图片描述

25.search-wrap{ }中新增

.search-wrap{
	/*此处省略之前的代码*/
    overflow: hidden;
}

在这里插入图片描述

26.写一个.search-btn::before{ }选择器

.search-btn::before{
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png);
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}

27.写好标签

<!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search"></div>
        <div class="search-login">登录</div>
    </div>

28…search-login{ }选择器去除背景色再增加字体颜色、垂直居中

.search-login{
    /*此处省略之前的代码*/
    /* background-color: purple; */
    color: #fff;
    line-height: 44px;
}

29…search-btn{ }选择器去除背景色

	/*此处省略之前的代码*/
    /* background-color: pink; */
}

在这里插入图片描述

30.写好对应的div标签

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

31.在写好css代码

.jd-icon{
    width: 20px;
    height: 15px;   
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: pink;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}

32.在父盒子.search{ }中写相对定位

.search{
    position: relative;
    /*此处省略之前的代码*/
}

33.给.jd-icon写伪元素

.jd-icon::after{
    content: "";
    position: absolute;
    top:0;
    right: -10px;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

在这里插入图片描述

第三部分（主题内容）

34.写类名为.mian-content主题内容标签，并在里面写一个类名为.slider的滑动图标签，最后在滑动图标签里面写一个img并引入图片

<!-- 主题内容 -->
    <div class="main-content">
        <!-- 话筒图 -->
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>
    </div>

35.对应的css代码

.slider img{
    width: 100%;
}

在这里插入图片描述

36.Ctrl+G组合键找到之前的样式.search-wrap将定位方式修改为固定定位，并设置最小宽度和最大宽度，宽度设置为100%

.search-wrap{
    position: fixed;
    overflow: hidden;
    width: 100%;/*注意固定盒子必须给宽度为100%*/
    height: 44px;
    min-width: 320px;
    max-width: 640px;
}

37.写对应的div标签

<!-- 蔡康永品牌日 -->
        <div class="brand">
            <div>
                <img src="upload/pic1.dpg" alt="">
            </div>
            <div>
                <img src="upload/pic2.dpg" alt="">
            </div>
            <div>
                <img src="upload/pic3.dpg" alt="">
            </div>
        </div>

38.对应的css代码

/* 品牌日 */
.brand {
    overflow: hidden;/*盒子把图切掉 */
    border-radius: 10px 10px 0 0;
}

.brand div{
    float: left;
    width: 33.33%;
}

.brand div img{
    width: 100%;
}

在这里插入图片描述

38.由于图片上方有空隙，所有这里我们要去除掉，按Ctrl+G找到全局ul选择器，在它的下方写这个

ul {
    margin:0;
    padding:0;
    list-style: none;
}

img {
    vertical-align: middle;/*去除上方空隙*/
}

在这里插入图片描述

39.在img标签外套上a标签,并替换原来的图片和注释

<!-- 小家电品牌日 -->
        <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>

在这里插入图片描述
40.写好新的标签

<!-- nav部分 -->
        <nav>
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">1</a>
            <a href="#">1</a>
            <a href="#">1</a>
            <a href="#">1</a>
            <a href="#">1</a>
            <a href="#">1</a>
            <a href="#">1</a>
            <a href="#">1</a>
            <a href="#">1</a>
        </nav>

41.对应的css代码

/* nav */
nav a{
    float: left;
    width: 20%;
    text-align: center;
}

nav a img{
    width: 40px;
    margin:10px 0;
}

nav a span{
    display: block;
}

在这里插入图片描述

42.Ctrl+G找到Body标签选择器，设置高2000px，并在body标签选择器下方，写一个全局a标签设置颜色为color:#666,text-decoration:none

body{
    /*此处省略之前的代码*/
    height: 2000px;
}

a {
    color: #666;
    text-decoration: none;
}

43.写div代码

<!-- nav部分 -->
        <nav>
            <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>
            <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>
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
        </nav>

44.写一个nav标签选择器，并设置上内边距(注意要写在前面)
nav {
padding-top: 5px;
}

45.写新的div标签

<!-- 新闻模块 -->
<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>

46.对应的css代码为

/*  news  */
.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(2) {
    width: 25%;
    border-left: 1px solid #ccc;
}

.news a:nth-child(3) {
    width: 25%;
    border-left: 1px solid #ccc;
}

在这里插入图片描述

47.设置全局css样式

/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

至此项目完成

对编程感兴趣的小伙伴加群
请添加图片描述 👉😂Java编程😂👈