移动web——学习笔记整理

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

content="width=device-width"：viewport的宽度=设备宽度

initial-scale=1.0：初始缩放比为1，maximum-scale=1.0：最大缩放比为1，

minimum-scale=1.0：最小缩放比为1，user-scalable=no"：用户是否可以缩放（yes或no）

04.物理像素&物理像素比

物理像素：即为分辨率。

物理像素比：一个px能显示物理像素点的个数。

【eg：Iphone8:1px开发像素=2个物理像素】

05.二倍图

即：准备的图片比实际需要的图片大小大两倍。

06.背景缩放（background-size）

语法：background-size：图宽图高

只写其中一个参数时，会等比例缩放
单位可跟%，相对于父盒子而言的
cover：等比例拉伸，但是背景图会显示不全
contain：宽、高等比例拉伸，故可能会有留白区域

07.背景二倍图以及多倍图切图

background:url(...);//插入图片
background-size:...px ...px;//缩放比例50%即可得二倍图

多倍图切图：PS——>cutterman（可一下子切3倍图、2倍图、1倍图原图）

08.移动端开发选择

单独制作移动端页面（主流）	响应式页面（其次）
一般情况下，网址域名前加m（mobile）可以打开移动端。通过判断设备，若为移动设备，则可跳转到移动页面。	通过判断屏幕宽度来改变样式以适应不同终端。

09.移动端技术解决方案

传统模型宽度计算（会撑大盒子）

CSS3盒子模型（不会撑大盒子）

box-sizing:content-box

box-sizing:border-box

盒子的宽度

=CSS中设置的width+border+padding

盒子的宽度

=CSS中设置的width[width里包含了border+padding]

10.移动端特殊样式

CSS盒子模型	box-sizing:border-box; -webkit-box-sizing:border-box;
取消点击时的高亮	设置为transparent完成透明 -webkit-tap-highlight-color:transparent;
在移动端浏览器默认的外观，在ios上加上这个属性才能给按钮和输入框自定义样式	-webkit-appearance:none
禁用长按页面时的弹出菜单	img,a{-webkit-touch-callout:none;}

11.移动端技术选型

单独制作移动端页面（主流）	响应式页面（其次）
一般情况下，网址域名前加m（mobile）可以打开移动端。通过判断设备，若为移动设备，则可跳转到移动页面。	通过判断屏幕宽度来改变样式以适应不同终端。
流式布局（百分比布局） flex弹性布局（推荐使用的） less+rem+媒体查询布局混合布局	媒体查询 bootstrap

12.流式布局（百分比布局）

流式布局，也称为百分比布局，或称为非固定像素布局。
是移动web开发使用的比较常见的布局方式。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

max-width 最大宽度 min-width 最小宽度
max-height 最大高度 min-height 最小高度

13.京东移动端首页

13.1 准备工作

技术选型

方案：采用单独制作移动页面方案

技术：布局采用流式布局

移动端，要设置视口标签以及引入初始化样式（如果没有，则需手动添加）

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

引入css文件

    <!-- 引入css文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">

写入index.css文件中：

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

13.2 App布局——先写顶层Header

分析结构布局

先写顶层 header

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

/*样式*/
.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%;
    background-color: #F63515;
}

13.2.1 App布局内容填充——顶层Header

<body>
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/QQ图片20220125221525.png" alt="">
            </li>
            <li>小龙格林商城APP</li>
            <li>立即打开</li>
        </ul>
    </header>
</body>

/* index.css文件  顶部*/
body {
    width: 100%;
    min-width: 320px;
    max-width: 1080px;
    margin: 0 auto;
    font-size: 14px;
    font-family: Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}
.app {
    height: 45px;
}
ul {
    /* 清除边框，清除ul中的原点 */
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #333333;
    color: #ffff;
}
.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图片和文字需要居中对齐 */
    vertical-align: middle;
}
.app ul li:nth-child(3) {
    width: 57%;
}
.app ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515;
}

得到Header样式

13.3 搜索模块布局

类似圣杯布局：左右固定，中间自适应

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

/* index.css文件  搜索 */
.search-wrap {
    position: relative;
    /* 子盒子添加了一个margin-top，为了不影响自身，则需添加overflow:hidden */
    overflow: hidden;
    height: 44px;
}
.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    background-color: pink;
    width: 40px;
    height: 44px;
}
.search {
    background-color: skyblue;
    height: 30px;
    border-radius: 15px;
    margin: 0 50px;
    margin-top: 7px;
}
.search-login {
    position: absolute;
    top: 0;
    right: 0;
    background-color: purple;
    width: 40px;
    color: #ffff;
    height: 44px;
}

此时的效果图：

13.4 搜索模块布局内容填充

    <!--布局补写 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="gl-icon"></div>
        </div>
        <div class="search-login">登录</div>
    </div>

/*index.css文件 补写*/
.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
}
.gl-icon {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url(../images/gl.png) no-repeat;
    background-size: 20px 15px;
}

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

13.5 二倍精灵图的做法

遇到需要缩放的精灵图做法：
可在firework里将精灵图等比例缩放为原来的一半
根据大小测量坐标。但是注意在代码里，background-size也要写：精灵图原来宽度的一半。

精灵图缩放三个步骤：
1.在切图工具中将精灵图缩放为原来的一半大小。
2.量一下缩放后的大小，写代码width和height，得到坐标59px和194px。
3.将精灵图缩放为原大小的一半，background-size: 104px auto

<!-- 搜索 -->
......
    <div class="sou"></div>
......

.sou {
    position: absolute;
    width: 20px;
    height: 15px;
    top: 8px;
    left: 50px;
    background-color: pink;
    background: url(../images/jd-sprites.png) no-repeat -80px 0;
    background-size: 200px auto;
}

13.6 焦点图制作

放入图片，设置好盒子的宽高

    <!-- 主体内容部分 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="./images/huadong1.jpg" alt="">
        </div>
    </div>

.slider img {
    width: 100%;
}

此时页面展示如下：

应将图片展示在搜索栏下方，所以改动搜索栏的信息，将搜索栏改为固定定位：

注：固定定位与父盒子无关，不继承宽度。所以需要再设置宽高。

/* 将 .search-wrap搜索 的样式进行修改 */
.search-wrap {
    position: fixed;
    /* 子盒子添加了一个margin-top，为了不影响自身，则需添加overflow:hidden */
    overflow: hidden;
    width: 100%;
    height: 44px;
    min-width: 320px;
    max-width: 1080px;
}

最后展示情况如下：

13.7 品牌日模块制作

品牌日的布局如下，分成三块

    <!-- 活动日 -->
    <div class="brand">
        <div class="b1">
            <a href="#">
                <img src="./images/20220126.jpg" alt="">
            </a>
        </div>
        <div>
            <a href="#">
                <img src="./images/20220126-3.jpg" alt="">
            </a>
        </div>
        <div>
            <a href="#">
                <img src="./images/20220126-2.jpg" alt="">
            </a>
        </div>
    </div>

/* 活动日 */
.brand {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
.brand div {
    /* 浮动在一起 */
    float: left;
    width: 33.33%;
}
.brand div img {
    width: 100%;
}

得到展示如下：

发现该层与上一层之间有缝隙。原因：图片默认会有空白缝隙。

解决方法：

/*加入一个样式：*/
img {
    vertical-align: top;
}

13.8 补充：行内元素&块元素&行内块元素

行内元素：不会独占一行，总是和相邻的行内元素在同一行上（物以类聚）；设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。默认宽度是他自身内容的宽度。行内元素只能容纳其他行内元素或者文本。

eg标签：a、abbr、big、br、em、img、input、label、span、strong、select等

注：文字类的块级元素不能放块元素，例如<p>/<h1>~<h6>/<dt>

块元素：独占一行，可以设置其宽度、高度，内外边距。宽度默认为所在容器的100%（即容器宽度）。可以容纳行内元素和其他块元素。

eg标签：div、h1-h6、menu、p、table

注：文字类的块级元素不能放块元素，例如<p>、<h1>~<h6>、<dt>

行内块元素：和相邻行内元素在同一行，但是之间会有空白缝隙。默认宽度是他本身内容的宽度。宽度、高度、行高、外边距以及内边距都可以手动设置。
模式转换：

块元素——>行内元素： display:inline;
行内元素——>块： display:block;
块、行内元素——>行内块： display: inline-block;

13.9 导航栏nav模块制作

    <!-- nav导航 -->
    <nav>
        <a href="">
            <img src="./images/nav1.jpg" alt="">
            <span>超市</span>
        </a>
        <a href="">
            <img src="./images/nav2.jpg" alt="">
            <span>电器</span>
        </a>
        <a href="">
            <img src="./images/nav3.jpg" alt="">
            <span>服饰</span>
        </a>
        <a href="">
            <img src="./images/nav4.jpg" alt="">
            <span>买菜</span>
        </a>
        <a href="">
            <img src="./images/nav5.jpg" alt="">
            <span>速达</span>
        </a>
        <a href="">
            <img src="./images/nav6.jpg" alt="">
            <span>充值</span>
        </a>
        <a href="">
            <img src="./images/nav7.jpg" alt="">
            <span>货运</span>
        </a>
        <a href="">
            <img src="./images/nav8.jpg" alt="">
            <span>促销</span>
        </a>
        <a href="">
            <img src="./images/nav9.jpg" alt="">
            <span>红包</span>
        </a>
        <a href="">
            <img src="./images/nav10.jpg" alt="">
            <span>个人</span>
        </a>
    </nav>

a {
    color: rgb(73, 71, 71);
    text-decoration: none;
}

/* nav导航 */
nav a {
    /* 有浮动即可不用转化 */
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
    width: 40px;
    margin: 10px 0;
}
nav a span {
    /* 行内元素转为块元素 */
    display: block;
}

得到下面展示：

13.10 新闻模块

    <!-- 新闻模块 -->
    <div class="news">
        <a href="#">
            <img src="./images/new1.dpg" alt="">
        </a>
        <a href="#">
            <img src="./images/new2.dpg" alt="">
        </a>
        <a href="#">
            <img src="./images/new3.dpg" alt="">
        </a>
    </div>

/* news新闻模块 */
.news {
    display: inline-block;
    margin-top: 15px;
}
.news img {
    width: 100%;
}
.news a {
    float: left;
    /* c3的盒子模型,border可以直接加进去不占像素位置了 */
    box-sizing: border-box;
}
.news a:nth-child(1) {
    width: 50%;
}


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

.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #fff;
}

本小节知识点：

/* c3的盒子模型,border可以直接加进去不占像素位置了 */
/*
.news a:nth-child(2) {width: 25%;}
.news a:nth-child(3) {width: 25%;} 
可写成：*/

/* n+2表示从第2个往后面选 */
.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #fff;
}

得到展示图：

13.11 商城移动端首页终结

/*css3盒子模型*/

box-sizing:border-box;

-webkit-box-sizing:border-box;

/*点击高亮需清除，将其设置为transparent完成透明*/
*{-webkit-tap-highlight-color:transparent;}
/*在移动端浏览器默认的外观在ios上加这个属性才能给按钮和输入框自定义样式*/
input{-webkit-appearance:none;}
/*禁止长按页面时弹出的菜单*/
img,a{-webkit-touch-callout:none}

此时，Header上方的叉叉按钮偏上，将代码更新为：

img {vertical-align: middle;}

得到这个样子：

Day2

00. 移动WEB开发之flex布局

00.1目标

说出flex盒子的布局原理

使用flex布局常用属性

独立完成携程移动端首页案例

00.2目录

flex布局体验

flex布局原理

flex布局父项常见属性

flex布局子项常见属性

携程网首页案例制作

01.flex布局体验

flex布局体验

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>
<style>
    div {
        /* 给父盒子加上display:flex */
        /* 不需要再清除浮动了，功能很多 */
        display: flex;
        width: 80%;
        height: 300px;
        background-color: pink;
        /* flex布局中的方法有很多，举例 */
        justify-content: space-around;
    }
    
    div span {
        width: 150px;
        height: 100px;
        background-color: blue;
        margin-right: 5px;
        flex: 1;
    }
</style>

02.flex布局原理

原理总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

任何一个容器都可以指定为flex布局。

当父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效。

(flex布局=弹性布局=弹性盒布局=伸缩盒布局=伸缩布局)

采用了Flex布局的元素都称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为Flex项目（flex item），简称“项目”。

举例：

03.flex布局父项常见属性（6个）

03.1 flex-direction 设置主轴的方向☆

默认的主轴为x轴，则y轴为侧轴。flex-direction：row

也可以设置y轴为主轴，则x轴就为侧轴。flex-direction：column

元素是跟着主轴来排列的。

03.2 justify-content 设置主轴子元素排列☆

默认值为justify-content：flex-start。

03.3 flex-wrap 设置子元素是否换行

默认值为flex-wrap：nowrap。

03.4 align-items 设置侧轴上的子元素的排列方式（单行）

默认主轴依旧为x轴，侧轴为y轴

居中代码直接使用：

align-items:center

justify-content:center

03.5 align-contents 设置侧轴上的子元素的排列方式（多行）

03.6 align-contents和align-items的区别

03.7 flex-flow 设置复合属性

flex-flow属性时flex-direction和flex-wrap属性的复合属性


        flex-direction: column;
        flex-wrap: wrap; 
 
        /* 复合写法，可写为： */
        flex-flow: column wrap;

04.flex布局子项常见属性（个）

04.1 flex子项目占的份数

item{ 
    flex:<number>
}

可以用于圣杯布局的写法

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>

</html>
<style>
    section {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 0 auto;
    }
    
    section div:nth-child(1) {
        width: 100px;
        height: 150px;
        background-color: red;
    }
    
    section div:nth-child(2) {
        flex: 1;
        background-color: yellow;
    }
    
    section div:nth-child(3) {
        width: 100px;
        height: 150px;
        background-color: skyblue;
    }
</style>

04.2 align-self和order

align-self

order

    /* 用order来排序 */
    div span:nth-child(2) {
        /* 默认是0，-1比0小，所以要往前面排序{ */
        order: -1;
    }

得到图示

05.携程网案例

05.1 准备工作，技术选型

方案：采用单独制作移动端页面方案

技术：布局采用flex布局

自己已制作好的界面链接：格林旅行记

05.2 搜索模块布局

    <div class="search-index"></div>

/* 搜索模块 */

.search-index {
    /* 固定定位对margin的修改没有作用 */
    /* 固定定位是

最低0.47元/天解锁文章

Thaley

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
移动web——学习笔记整理

学习笔记整理——移动web(黑马的)
复制链接

扫一扫

专栏目录