当前位置:首页 » 《随便一记》 » 正文

流式布局案例——京东网页_m0_60264901的博客

19 人参与  2021年12月17日 09:44  分类 : 《随便一记》  评论

点击全文阅读


文章目录

  • 前言
  • 一、京东移动端页面
  • 二、制作步骤
    • 1.页面整体框架
    • 2.注意要点
  • 总结


前言

在之前学了关于移动端的基础知识,接下来我们就需要运用这些知识来进行实际应用。
上才艺!看案例!
在这里插入图片描述


一、京东移动端页面

在这里插入图片描述

京东移动端的页面基本就是如上图
页面有顶部的导航栏、搜索栏、主体栏里面分成三个部分进行设计。

二、制作步骤

1.页面整体框架

代码框架如图展示:
在这里插入图片描述

2.注意要点

  • 我们对于移动端页面采用的是流式布局,代码如下:
body {
    width: 100%;
    /* width:100%可以在320px-640px之间自由缩放 */
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, 'Helvetica Neue', sans-serif;
    color: #666;
    line-height: 1.5;
    background-color: #999;
    height: 2000px;
}
  • 对于页面默认的一些效果我们需要清除,代码如下:
/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

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


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

input {
    -webkit-appearance: none;
}


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

img,
a {
    -webkit-touch-callout: none;
}
  • 页面顶部的导航栏会在用户往下翻的时候消失,而搜索栏会固定在顶部,所以我们就需要用到固定定位

代码如下:

.search-wrap {
    height: 44px;
    position: fixed;
    /* 用了固定定位的就要给宽度,再缩放页面的时候也要给它最大最小宽度 */
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    overflow: hidden;
    /*由于中间有搜索栏会导致外边距塌陷所以需要使用overflow*/
}
  • 导航栏nav我们的搭建结构效果先是如下图:
    在这里插入图片描述
    但是在制作中我们会出现外边距塌陷问题所以我们需要给父盒子加一个overflo:hidden;

在这里插入图片描述

  • 搜索栏中的放大镜效果,是使用了精灵图,在移动端使用精灵图也需要二倍图法则:
    1.将整张图都缩小两倍
    2.再测量坐标轴位置
    3.精灵图图标也需要缩小为原来的一半
.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px ;
    /*精灵图中的放大镜也缩小为原来的一半*/
}
  • 当两栏之间有空隙是因为图片与图片之间会有间隙,情况如下:
    在这里插入图片描述

如下代码解决:

img {
    vertical-align: middle;
}

  • 对于这个界面的设计,是可以点击的三个链接的盒子,所以我们用3个div来装链接
    在这里插入图片描述

在HTML中结构搭建:

<div class="brand">
            <div>
                <a href="#">
                    <img src="upload/pic1.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic2.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic3.dpg" alt="">
                </a>
            </div>
        </div>

在CSS中的代码:

.brand {
    border-radius: 10px 10px 0 0;
    /* 盒子的圆角顺序:左上角、右上角、左下角、右下角 */
    overflow: hidden;
    /* 将溢出盒子部分删除 */
}

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

.brand div img {
    width: 100%;
}

总结

做完这个案例,我们不仅能将新知识运用到还能将旧知识复习一遍,所以,多做案例可以有效提升自己的打代码能力!


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/31662.html

页面  代码  盒子  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • (番外)+(全书)此去经年人未还全书+番外+后续免费下载_(沈青禾霍沉洲)此去经年人未还全书+番外+后续列表_笔趣阁(沈青禾霍沉洲)
  • 完结文毁容的姐姐和瞎眼的我离开后,姜家两兄弟悔哭了+后续列表_完结文毁容的姐姐和瞎眼的我离开后,姜家两兄弟悔哭了+后续(林梦婉)
  • 妻子辱我爸受贿自杀,我掏出一等军功章节选推荐_[陈素云辰朋友]小说精彩章节分享
  • 全书浏览苔藓爬满旧日诺言新上(顾砚廷慕晚夏)_苔藓爬满旧日诺言新上(顾砚廷慕晚夏)全书结局
  • 顾尘傅雅宁(神女老婆,却在背地承欢作乐+后续+结局)结局_(顾尘傅雅宁神女老婆,却在背地承欢作乐+后续+结局全书结局)结局列表_笔趣阁(顾尘傅雅宁)
  • 「老婆怀上助理的孩子后,助理要求我净身出户」章节限时抢先看‌_「黄秋雅秋雅姐刘嘉铭」后续完结版
  • 此去经年人未还,沈青禾霍沉洲_此去经年人未还,沈青禾霍沉洲
  • 我爸娶了九十九个媳妇都死了,这次准备娶我的女同学小说精彩章节免费试读_[小梅娶媳妇孤儿]全文免费在线阅读
  • 此去经年人未还结局+番外文章简述(沈青禾霍沉洲)列表_此去经年人未还结局+番外文章简述
  • 完结文寻你寻不到归期结局+完结列表_完结文寻你寻不到归期结局+完结(姜昭意盛西)
  • 江以蓁的潮起时问归期高分佳作江以蓁秦司礼全书在线
  • 「亲手逼死儿子后,男人悔不当初」后续全文免费阅读_[傅司衍轩轩佳佳]最新章节免费阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1