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

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

5 人参与  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