嘤嘤怪呆呆狗

移动端开发学习笔记

移动端开发

1、移动端开发基础

1.1 常见移动端屏幕尺寸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rr33xZYF-1620388055039)(移动端开发.assets\image-20200716160107819.png)]

1.2 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口、理想视口

1.2.1 布局视口

布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面再手机上显示的问题
iOS，Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nLXnAq2s-1620388055041)(移动端开发.assets\image-20200716160215881.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1OqJ03OF-1620388055043)(移动端开发.assets\image-20200716160231738.png)]

1.2.2 视觉视口

视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SKY0BGmr-1620388055046)(移动端开发.assets/image-20200716160324222.png)]

1.2.3 理想视口

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meat视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽

1.2.4 总结

视口就是浏览器显示页面内容的屏幕区域
视口分为布局视口、视觉视口和理想视口
我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
想要理想视口，我们需要给我们的移动端页面添加meta视口标签

1.2.5 视口标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-99PWlXJ7-1620388055047)(移动端开发.assets/image-20200716160447124.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wzfrKt25-1620388055049)(移动端开发.assets/image-20200716160458785.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
        
    <title>Documenttitle>
head>

<body>

body>

html>

1.2.6 标准的viewport设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L4p4kiGO-1620388055050)(移动端开发.assets/image-20200716160522100.png)]

1.3 二倍图

1.3.1 物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6、7、8是750*1334
我们开发时候的1px不是一定等于1 个物理像素的
PC端页面，1个px等于 1 个物理像素的，但是移动端就不尽相同
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

1.3.2 二倍图做法

如果直接放入图片他会放大 2倍会导致模糊

假设想要一个50X50像素的图片

1、准备一个100X100像素的图片

2、手动把这个图缩小为50X50像素的

这样就可以避免模糊

1.3.3 背景缩放 background-size

background-size：背景图片宽度背景图片高度

单位：长度 | 百分比 | cover | contain；
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域不会留白可能有部分背景图片显示不全
contain把图像扩展至最大尺寸，等比例缩放可能会留白

background-size也是background的一个子属性,可以支持连写:
background：color image repeat attachment position / size

1.3.4 多倍图切图 cutterman

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MViQSSW-1620388055051)(移动端开发.assets/image-20200716160540153.png)]

1.4 移动端开发选择

1.4.1 移动端主流方案

1、单独制作移动端页面（主流）

比如：移动商城手机版、淘宝触屏版、苏宁易购手机版

2、响应式页面兼容移动端（其次）

三星手机官网

1.4.2 单独移动端页面（主流）

通常情况下，网址域名前面加m（mobile）可以打开移动端。通过判断设备，如果是移动端设备打开，则跳转到移动端页面

1.4.3 响应式兼容PC移动端

三星电子官网：www.samsung.com/cn/，通过判断屏幕宽度来改变样式，以适应不同终端

缺点：制作麻烦，需要花很大精力去调兼容性问题

1.5 移动端技术解决方案

1.5.1 移动端浏览器

移动端浏览器基本以 webkit 内核为主，因此我们就考虑 webkit 兼容性问题。

我们可以放心使用H5 标签和CSS3 样式

同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m7qRUaG4-1620388055052)(移动端开发.assets/image-20200716160736190.png)]

1.5.2 CSS初始化 normalize.css

移动端CSS初始化推荐使用 normalize.css/

Normalize.css：保护了有价值的默认值
Normalize.css：修复了浏览器的bug
Normalize.css：是模块化的
Normalize.css：拥有详细的文档

官网地址：http://necolas.github.io/normalize.css/

1.5.3 CSS3 盒子模型 box-sizing

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PHSSsmn6-1620388055053)(移动端开发.assets/image-20200716160747524.png)]

标准盒模型 box-sizing: content-box
content-box:
width = content width;
height = content height
IE盒模型 box-sizing: border-box
border-box:
width = border + padding + content width
heigth = border + padding + content heigth


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div:nth-child(1) {
            /* 传统盒子模型= width + border + padding */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid red;
        }

        div:nth-child(2) {
            /* 有了这句话就让盒子变成css3盒模型 
               padding 和 border 不会再撑大盒子*/
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid purple;
        }
    style>
head>

<body>
    <div>div>
    <div>div>
body>

html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FM4VHFGq-1620388055053)(移动端开发.assets/image-20200716160803819.png)]

1.5.4 移动端 a链接点击后会高亮显示 input的周围高亮长按页面弹出菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NvYgY0aP-1620388055054)(移动端开发.assets/image-20200716160814725.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0cVPpuof-1620388055055)(移动端开发.assets/image-20200716160827940.png)]

1.6 二倍精灵图

在ps里面把精灵图等比例缩放为原来的一半
之后根据大小测量坐标
注意代码里面bacgground-size也要写：精灵图原来宽度的一半

1.7 背景渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8msP8LtK-1620388055057)(移动端开发.assets/image-20200716160910624.png)]

2、移动端开发常见布局

2.1 移动端技术选型

移动端布局和以前我们学习的PC端有所区别：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1LAHA8jb-1620388055057)(移动端开发.assets/image-20200716160924977.png)]

3、流式布局（百分比布局）

3.1 流式布局基本概论

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

核心思路的代码：


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            margin: 0 auto;
            max-width: 980px;
            min-width: 320px;
            width: 100%;
        }

        section div {
            float: left;
            width: 50%;
            height: 400px;

        }

        section div:nth-child(1) {
            background-color: pink;
        }

        section div:nth-child(2) {
            background-color: purple;
        }
    style>
head>

<body>
    <section>
        <div>div>
        <div>div>
    section>
body>

html>

3.2 左侧固定死，右侧自适应 padding版本

如果一个盒子的宽度是继承的父级的，加padding 不会撑大盒子！！！


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            height: 100px;
            border: 1px solid red;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 100px;
            background-color: green;
            /* 如果一个盒子的宽度是继承的父级的，加padding 不会撑大盒子 */
            padding-left: 100px;

        }

        .info {
            height: 100px;
            background-color: skyblue;
        }
    style>
head>

<body>
    
    <div class="box">
        <div class="left">div>
        <div class="right">
            <div class="info">222div>
        div>
    div>
body>

html>

3.3 左侧固定死，右侧自适应 overflow hidden版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L6118016-1620388055058)(移动端开发.assets/image-20200716160937771.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            height: 100px;
            border: 1px solid red;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 100px;
            background-color: green;
            overflow: hidden;
          /* 添加了overflow:hidden 的元素不会和浮动的盒子有重叠的区域 */

        }

        .info {
            height: 100px;
            background-color: skyblue;
        }
    style>
head>

<body>
    
    <div class="box">
        <div class="left">div>
        <div class="right">
            <div class="info">222div>
        div>
    div>
body>

html>

3.4 左侧固定死，右侧自适应，margin版本

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            height: 100px;

        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 120px;
            background-color: green;
            margin-left: 110px;
            /* 如果这个盒子的宽度是通过继承得到的，那么添加padding,border,margin都不会撑大盒子 */

        }
    style>
head>

<body>
    
    <div class="box">
        <div class="left">div>
        <div class="right">

        div>
    div>
body>

3.5 右侧固定死，左侧自适应，浮动版本


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            height: 100px;
            border: 1px solid red;
        }

        .left {
            float: right;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .right {
            height: 100px;
            background-color: green;


        }

        .info {
            height: 100px;
            background-color: skyblue;
        }
    style>
head>

<body>
    
    
    <div class="box">
        <div class="left">div>
        <div class="right">
            <div class="info">222div>
        div>
    div>
body>

html>

3.6 圣杯布局用定位的方法版本

圣杯布局

两侧浮动中间标准流加高度，左右高宽写死给中间加overflow

<body>
    
    <div class="search-wrap">
        <div class="search-btn">div>
        <div class="search">div>
        <div class="search-login">div>
    div>
body>

/* 搜索 */
.search-wrap {
    position: relative;
    height: 44px;
}

.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;
}

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

3.7 圣杯布局用浮动版本


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            height: 200px;
        }

        .left {
            float: left;
            background-color: blue;
            width: 100px;
        }

        .right {
            float: right;
            background-color: red;
            width: 100px;
        }

        .content {
            background-color: skyblue;
            overflow: hidden;
        }
    style>
head>

<body>
    <div class="box">
        <div class="left">我是左侧div>
        <div class="right">我是右侧div>
        <div class="content">我是内容div>
        
    div>
body>

html>

4、flex布局

4.1 初体验

加上 display:flex 以后，它里面的内容就不分块级元素，还是行内块元素，或者行内元素，都可以直接给大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MF5ml8F9-1620388055060)(移动端开发.assets/image-20200716160953068.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div {
            widows: 80%;
            height: 300px;
            background-color: pink;
            display: flex;
            justify-content: space-between;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: red;
        }
    style>
head>

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

html>

4.2 布局原理

flex是 flexible Box 的缩写，意为“弹性布局” 用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当我们父盒子设置为flex布局以后，子元素的float、clear、vertical-align属性将失效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用flex布局的元素，称为flex容易，简称:容器，它的所有子元素自动成为容器成员，称为flex项目，简称项目

4.3 flex布局父项常见属性

4.3.1 常见父项属性

flex-direction ：设置主轴的方向
justify-content ：设置主轴上的子元素排列方式
flex-wrap ：设置子元素是否换行
align-contet ：设置侧轴上的子元素的排列方式（多行）
align-items ：设置侧轴上的子元素排列方式（单行）
flex-flow ：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

4.3.2 flex-direction 设置主轴的方向

1、主轴与侧轴

默认主轴方向就是X轴方向，水平向右
默认侧轴方向就是Y轴方向，水平向下

2、属性值

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction 设置谁为主轴，剩下的就是侧轴。我们的子元素是跟着主轴来排列的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ek2vQhAz-1620388055060)(移动端开发.assets/image-20200716161109215.png)]

4.3.3 justify-content 设置主轴上的子元素排列的排列方式

justify-content 属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好那个是主轴！！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SjbYKKrL-1620388055061)(移动端开发.assets/image-20200716161122587.png)]

justify-content: flex-start 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NeDxpv1o-1620388055062)(移动端开发.assets/image-20200716161132868.png)]

代码：

    <style>
        div {
            display: flex;
            /* 设置成flex布局 */
            justify-content: flex-start;
          /* 默认值  */
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    style>
head>

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

justify-content: flex-end 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWYvd5Gn-1620388055063)(移动端开发.assets/image-20200716161144747.png)]

代码：

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            justify-content: flex-end;
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }

justify-content: center 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JLxLAM6m-1620388055063)(移动端开发.assets/image-20200716161155377.png)]

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */

            justify-content: center;
            /* 让子子元素居中对齐 */
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }

4.3.4 justify-content: space-around 平均分配剩余的空间，给每一个盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4biggxto-1620388055064)(移动端开发.assets/image-20200716161205791.png)]

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OMhE89yX-1620388055065)(移动端开发.assets/image-20200716161216643.png)]

代码：

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */

            /* justify-content: center;
            让子子元素居中对齐 */

            justify-content: space-around;
            /* 把剩余的空间平均分配给每一格盒子 */
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }

4.3.5 justify-content: space-between 两边先贴边，然后，中间的除了两边的盒子，再平分剩余空间

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DZguXBOZ-1620388055066)(移动端开发.assets/image-20200716161225891.png)]

代码：

        div {
            display: flex;
            /* 设置成flex布局 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */

            /* justify-content: center;
            让子子元素居中对齐 */

            /* justify-content: space-around;
            把剩余的空间平均分配给每一格盒子 */

            justify-content: space-between;
            /* 两边先贴边，然后其他的盒子，平局分布剩余空间*/
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }

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

如果父盒子设置了flex布局，子元素容不下的时候，它会缩小子元素的宽度，始终把他们显示在一行上

比如：父元素宽度600px 子元素一个宽度100px 里面有60 个子元素，子元素在页面显示的宽度就不是100px了

flex 布局中，默认子元素是不换行的，如果装不开，就会缩小子元素的宽度，把所有的子元素都显示在一行上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwpr6XzY-1620388055067)(移动端开发.assets/image-20200716161236418.png)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-26TOSCV5-1620388055067)(移动端开发.assets/image-20200716161246527.png)]

代码:


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div {
            display: flex;
            width: 400px;
            height: 300px;
            background-color: pink;
            flex-wrap: wrap;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    style>
head>

<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
        <span>4span>
        <span>5span>
        <span>6span>
    div>
body>

html>

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgXVZ0h9-1620388055068)(移动端开发.assets/image-20200716161258341.png)]

stretch 使用这个代码，子元素必须是没有高度的否则不起作用

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H9hU2qCF-1620388055070)(移动端开发.assets/image-20200716161309114.png)]

代码:

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

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行）在单行情况下是没有效果的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CEJjaCJU-1620388055071)(移动端开发.assets/image-20200716161323070.png)]

1、align-content: flex-start 属性

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QK7JHLZY-1620388055071)(移动端开发.assets/image-20200716161332412.png)]

代码：

    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            flex-wrap: wrap;
            align-items: stretch;
            /* 因为有了换行，items  不起作用了 */

            align-content: flex-start;
        }

        div span {
            width: 150px;
            height: 100px;
            margin: 5px;
            background-color: purple;
        }
    style>
head>

<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
        <span>4span>
        <span>5span>
        <span>6span>
    div>
body>

2、align-content: center

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rtz4fIOh-1620388055072)(移动端开发.assets/image-20200716161343660.png)]

3、align-between会让这两行盒子一行顶着上边，一行顶着下面

4、align-around

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9OWrvLOZ-1620388055073)(移动端开发.assets/image-20200716161354814.png)]

4.3.9 align-content 和 align-items 区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中、拉伸
align-content 适用于多行（换行）的情况下，（单行情况下无效），可以这是上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行找 align-items 多行找align-content

4.3.10 flex-flow

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

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9yDQXWZP-1620388055074)(移动端开发.assets/image-20200716161406599.png)]

代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JdITGwXv-1620388055074)(移动端开发.assets/image-20200716161417356.png)]

4.4 flex布局子项常见属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

4.4.1 flex 属性

flex 属性定义子项目分配剩余空间，用flex 来表示占多少份数

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWdcN8KN-1620388055075)(移动端开发.assets/image-20200716161426092.png)]

并且红色和蓝色是固定死的，中间是自适应的，也就是圣杯布局

代码：

    <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: green;
            /* 把剩余空间 分配给 XXXX */
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }
    style>
head>

<body>
    <section>
        <div>div>
        <div>div>
        <div>div>
    section>
body>

4.4.2 align-self 控制子项在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖 align-items 属性

默认值为 auto 表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

要求：让三个盒子的某一个盒子垂直居中

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xbqjjDHg-1620388055076)(移动端开发.assets/image-20200716161436050.png)]

代码：


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
            /* 让三个子盒子沿着侧轴底测对齐 */
            align-items: flex-end;

            /* 我们只想让3号盒子下来底测 */

        }

        section div:nth-child(1) {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        section div:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 100px;
            background-color: blue;
            align-self: center;
        }
    style>
head>

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

html>

4.4.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认值为0

要求：三个盒子，每一个盒子的默认内容是 1 2 3 ，把2号盒子提到最前面

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGU9r5fY-1620388055077)(移动端开发.assets/image-20200716161508781.png)]

代码：

    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
            /* 让三个子盒子沿着侧轴底测对齐 */
            align-items: flex-end;

            /* 我们只想让3号盒子下来底测 */

        }

        section div:nth-child(1) {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        section div:nth-child(2) {
            order: -1;
            width: 100px;
            height: 100px;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 100px;
            background-color: blue;
            align-self: center;
        }
    style>
head>

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

5、rem布局

5.1 rem基础

rem是一个相对单位，类似于em ，em是父元素的字体大小。不同的是rem的基准是相对于html元素的字体大小。

rem 的优点就是可以通过html里面的文字大小来改变页面中元素的大小可以整体控制

比如：根元素（html）设置的font-size=12px，非根元素设置width:2rem 则换成px表示就是24px

em 是相对于父元素的字体大小来说的
rem 是相当于 html 的字体大小来说的

    <style>
        div {
            font-size: 12px;
        }

        p {
            width: 10em;
            height: 10em;
        }
        /* 
            p最终  宽高是120px
            因为  p 的  1em   ＝  12px
        */
    style>
head>

<body>
    <div>
        <p>p>
    div>
body>

5.2 媒体查询

媒体查询就是CSS3新语法

媒体查询一般都是从小到大或者从大到小的顺序进行的

使用 @media 查询可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果、安卓、平板等设备都用得到多媒体查询

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3NZB2n8S-1620388055079)(移动端开发.assets/image-20200716161527651.png)]

1、media type 查询类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vdgUtx8Z-1620388055080)(移动端开发.assets/image-20200716161540424.png)]

2、关键字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzWZdx6j-1620388055080)(移动端开发.assets/image-20200716161552099.png)]

    <style>
        /* 这句话的意思就是：在我们屏幕上并且 最大的宽度是800像素，设置我们想要的样式 */
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }

        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
        /* 
        当屏幕的尺寸 在500--800px 之间   背景色是pink 
        如果在0--500px  之间 背景色是purple
        */
    style>
head>

<body>
body>

5.3 媒体查询+rem实现元素变化


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @media screen and (min-width:320px) {

            /* 表示 320  以上的 */
            html {
                font-size: 50px;
            }

            @media screen and (min-width:640px) {
                html {
                    font-size: 100px;
                }
            }
        }

        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
        }
    style>
head>

<body>
    <div class="top">购物车div>
body>

html>

5.4 rem适配方案技术使用（市场主流）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FjVMBMiV-1620388055081)(移动端开发.assets/image-20200716161604320.png)]

页面元素的rem 页面元素的px / html 字体大小 50

因为基准值是50，要按照设计稿来，做网页，然后根据页面的大小来不断地调整fontsize

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iF7aBgXX-1620388055082)(移动端开发.assets/image-20200716161615040.png)]

6、响应式布局

6.1 响应式开发原理

就是使用媒体查询对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gHBdhVc7-1620388055083)(移动端开发.assets/image-20200716161625338.png)]

6.2 响应式布局容器

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

6.3 响应式导航栏


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 750px;
            margin: 0 auto;
        }

        ul li {
            list-style: none;
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }

        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }

            .container ul li {
                width: 33.33%;
            }
        }
    style>
head>

<body>
    <div class="container">
        <ul>
            <li>1li>
            <li>2li>
            <li>3li>
            <li>4li>
            <li>5li>
            <li>6li>
            <li>7li>
            <li>8li>
        ul>
    div>
body>

html>

6.4 bootstrap 简介

中文官网：http://www.bootcss.com/
官网：http://getbootstrap.com/
推荐使用：http://bootstrap.css88.com/

优点：

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断地更新迭代
让开发更简单，提高了开发地效率

6.5 container类和 container-fluid类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9CDynnA-1620388055084)(移动端开发.assets/image-20200716161640552.png)]

6.6 栅格系统简介

栅格系统：它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多 12列

Bootstrap 里面 container 宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container化为12等份。

6.7 栅格系统参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AwvAD273-1620388055084)(移动端开发.assets/image-20200716161651299.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-psWiPZRL-1620388055085)(移动端开发.assets/image-20200716161659976.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Documenttitle>
    <style>
        .row div {
            background-color: pink;
        }
    style>
head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4div>
            
        div>
    div>
body>

html>

6.8 列嵌套

列嵌套最好加一个行这样可以消除父元素的padding的值并且高度自动和父亲一样高

6.8 列偏移

使用 .col-md-offset-*类可以讲列向右偏移

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y8XUZW3s-1620388055086)(移动端开发.assets/image-20200716161712935.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Documenttitle>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }
    style>
head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">左侧div>
            <div class="col-md-4 col-md-offset-4">右侧div>
          
        div>
body>

html>

6.9 列排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HcBE4rfd-1620388055088)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200705155754102.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jzBpOjoA-1620388055089)(移动端开发.assets/image-20200716161723389.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Documenttitle>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }
    style>
head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧div>
            <div class="col-md-8 col-md-pull-4">右侧div>
            
        div>
    div>
body>

html>

6.10 列隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ja6J983n-1620388055089)(移动端开发.assets/image-20200716161739809.png)]


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <title>Documenttitle>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
        }

        .row>div:nth-child(3) {
            background-color: red;
        }
    style>
head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">1div>
            <div class="col-xs-3">2div>
            <div class="col-xs-3 hidden-md">我会变魔术div>
            
            <div class="col-xs-3">4div>
        div>
    div>
body>

html>

你可能感兴趣的:(前端学习笔记)

人力资源智能化管理项目（day04:组织架构）我是如此相信ᯤ⁶⁶ᴳ 人力资源智能化管理项目 vue.js javascript 前端
学习源码可以看我的个人前端学习笔记(github.com):qdxzw/humanResourceIntelligentManagementProject觉得有帮助的同学，可以点心心支持一下哈树组件应用depts:[{name:'传智教育',children:[{name:'总裁办'},{name:'行政部'},{name:'人事部',children:[{name:'财务核算部'},{name:
人力资源智能化管理项目（day03:主页模块）我是如此相信ᯤ⁶⁶ᴳ 人力资源智能化管理项目前端
学习源码可以看我的个人前端学习笔记(github.com):qdxzw/humanResourceIntelligentManagementProject觉得有帮助的同学，可以点心心支持一下哈主页权限验证(permission.js)importrouterfrom'@/router'importnprogressfrom'nprogress'//进度条import'nprogress/nprog
Web前端学习笔记 jusw123456 前端学习 javascript
文章目录HTML+CSS系列学习笔记①之拨云见日1、什么是HTML、CSS？2、VSCode编译器（宇宙第一编译器）3、五大浏览器4、深入了解网站开发5、web前端的三大核心技术6、HTML基本结构和属性7、HTML初始代码8、HTML注释9、标题与段落10、文本修饰标签11、引入文件的地址路径12、图片标签13、跳转链接14、跳转锚点15、特殊符号16、列表标签17、表格标签18、表格属性19、
前端学习笔记day02--CSS m0_38077048 学习自用 html html5
前端学习笔记day02–CSS一、CSS知识CSS（cascadingstylesheet）：层叠样式表（级联样式表）作用：设置html标签的字体、颜色、背景、边框、边距和宽高等，使界面美观、漂亮，从而提高用户体验。html搭起结构，CSS起美观作用，html和CSS分离、解耦，方便统一修改维护。二、CSS和html结合写法：选择器{声明；（属性名：属性值；）}1.行内样式行内样式作用域小，只作用
[前端学习笔记1] 前端学习路线 Lumos_zbj 前端
按顺序学习一、做网页HTML：定义网页结构CSS（Cascadingstylesheets层叠样式表）：对网页进行装饰JS（JavaScript）：网页与用户的交互效果，【重要】WebAPI：将HTML,CSS,JS结合在一起，通过JS可以改变HTML,CSS.JQuery：老牌框架，了解即可。Bootstrap：响应式页面，了解即可移动端开发：【重要】二、数据库和服务器数据库：mongoDB（J
爬虫配套学习-前端学习笔记03 丰。。爬虫学习笔记 python html
插入图片水平线无月的中秋据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，中秋节的来历，这就是月饼的来历，大家会在这一天，和嘉园也，吃月饼，赏月。®效果图像的超链接水平线无月的中秋据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，中秋节的来历，这
前端学习笔记 | CSS动画+移动web 简·AI 前端前端 html css 笔记学习
一、平面转换为元素添加动态效果，一般与过渡配合使用。1、设置transition给元素本身，表示过渡变换方式和时间2、在元素hover设置transform（动态效果）transform:【移动】translate(x方向，y方向)、translateX（x、translateY(y)位移【旋转】rotate(数字+deg）【缩放】scele(数字)大于1放大，小于1缩小【倾斜】skew（数字+d
前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）简·AI 前端学习笔记
注：本文的css样式均使用less写法1、字体居中（1）先text-align:center;行内元素水平居中（2）再line-heigh:(盒子高度);行内元素垂直居中text-align:center;line-height:(30/@vw);2、盒子居中情景1：版心居中margin:0auto;情景2：标题栏制作时让左右两个弹性盒子居中的方法（1）设置浮动（2）给父级添加行高line-hei
前端学习笔记 | CSS高级技巧简·AI 前端前端学习笔记
一、定位注：需要同时设置定位模式和边偏移才生效。1、定位模式相对定位-position:relative特点：（1）灵活改变盒子在网页中的位置，改变位置的参照物是自己原来的位置（2）不脱标，占位（3）标签显示模式特点不变绝对定位-position:abusolute(子级绝对定位，父级相对定位-子绝父相)特点：（1）脱标，不占位（2）参照物先找祖先元素，如果祖先没有定位，则参照浏览器可视区域位置（
前端学习笔记 | 响应式网页+Boostrap 简·AI 前端前端学习笔记 html css
一、响应式网页一套代码适应多端1、媒体查询@media(条件){css}max-width小于等于max-width生效min-width【案例】左侧隐藏因为CSS的层叠性，书写顺序：max-width从大到小；min-width从小到大。【媒体查询完整写法】在html中link用于不同视口的css样式，media=""中一定要加（），否则不生效。2、BootstrapBootstrap是由Twi
自学前端学习笔记html5(简称H5) Informal杨
image.pngimage.pngimage.pngH5在语义上的改进在此基础上，HTML5增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。我们常见的css+div布局是：image.png在html5中，我们可以这样写：image.pngH5的经典网页布局：H5中新增的语义标签表示区块表示文章。如文章、评论、帖
前端自己整理的学习面试笔记小江的博客 IT资源前端学习面试 vue
简介以下是本人一年多整理的前端学习笔记，现汇总分享给大家，很多问题都是面试必问的更多学习资源，可以点击我获取更多1js数据类型原始类型：nullundefinednumberstringbooleanSymbolBigInt引用类型：对象2判断一个对象属性是否存在本身属性判断：obj.hasOwnProperty(key)包括了上级属性判断：keyinobjReflect.get(obj,‘key
前端学习笔记一一HTML常用标签之列表标签前前前端小飞
HTML常用标签之列表标签列表标签的用途，就是用于编排短语句的文字。1.无序列表在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。设置无序列表的类型—type无序列表的默认符号是圆点（●）。�元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：�disc(圆●)、circle（圆圈○）、square（方块■）定
字节跳动内部前端学习笔记在互联网上火了，在Github标星33K+，完整版开放下载书苏
一、入门前端三剑客1、HTMLhtml学起来还是挺简单的，无论你是否有编程基础，我觉得都可以快速入门，对于新手，我推荐找个入门的视频看一下，然后跟着视频打代码就可以了，入门教程随便在网上找个免费的视频就可以了，随便搜索「html入门」即可，或者看菜鸟教程的一个入门教程也行。看完视频，也可以看一下文字版的教程，不知道大家有没有看过阮一峰写过的教程，我觉得他写的教程都很棒，所以这里我也推荐下大家看一下
前端学习笔记-HTML、CSS、Javascript基础知识 m0_53527658 学习笔记 html css javascript
认识web网站的开发模式采用前后端分离技术开发Web前端三个组成部分HTML：负责网页结构（页面元素的内容）CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）JavaScript：负责网页的行为（交互效果）HTML和CSSHTML：超文本标记语言：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容；HTML标签都是预定义好的。例如：使用展示超
ES6前端学习笔记已注销面试前端
修正ES6是ECMA为JavaScript制定的第6个标准版本，相关历史可查看此章节《ES6-ECMAScript6简介》。标准委员会最终决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript2015是在2015年6月发布ES6的第一个版本。以此类推，
【前端学习笔记1】css基础 __dh 前端学习笔记
css可以使页面更漂亮，即美化网页css：层叠样式表标签选择器：类选择器：id只能单次调用，类似人的身份证css里只要是word里面有的功能，他们都有对应的，不会的时候查一下就行实现垂直居中:height等于line-height就行font-family：可以修改字体font顺序：是否倾斜字号行高字体必须严格按照这个顺序来与文本相关text-indent：文本缩进text-align：cente
【前端学习笔记2】javaScript基础 __dh 前端学习笔记
是什么：是一种运行在客户端（服务器的编程语言）javacript分为行内JavaScript，内部JavaScript，外部JavaScript内部JavaScript直接写在html中body里面alert（“hello，world”）我们将script放在html文件的地步附近的原因是浏览器会按照代码在文件中的顺序加载html如果先加载的JavaScript期望修改其下方的html，那么他可能
自学前端学习笔记-02CSS基础样式语法 Informal杨
◆CSS三大特性1.继承性2.层叠性3.优先级继承<通配符选择器<标签选择器<类选择器
【wow-ts】前端学习笔记Typescript基础语法（一） miskirito 前端学习笔记
项目地址是https://github.com/datawhalechina/wow-ts。我选择的是ts前端课程Typescript笔记TypeScript入门介绍基础数据类型TypeScript基础数据结构TypeScript变量声明变量作用域TypeScript入门介绍第一次接触ts，先去了解了下ts的内容，复制内容如下TypeScript是JavaScript的一个超集，支持ECMAScr
前端学习笔记 5：大事件魔芋红茶前端前端学习笔记
前端学习笔记5：大事件本文将学习一个示例项目（大事件）的前端搭建过程。1.准备工作1.1.创建工程创建一个名称为big-event的Vue3项目，具体可以参考这篇文章。1.2.安装插件安装ElementPlus：npminstallelement-plus--save安装好后还需要在main.js中导入相关模块和样式：import'./assets/main.scss'import{createA
前端学习笔记 6：Pinia 魔芋红茶前端前端学习笔记
前端学习笔记6：PiniaPinia是Vue的一个官方库，用于状态管理。1.安装首先创建一个Vue3项目，具体方式可以参考这里。安装Pinia：npminstallpinia创建一个pinia实例(根store)并将其传递给应用：import'./assets/main.css'import{createApp}from'vue'import{createPinia}from'pinia'impo
【前端学习笔记3——选不中按钮、全局变量、表格不显示、查看变量值】 weixin_47227105 前端学习 javascript
前端学习笔记三，覆盖button选不中，可能是被别的元件覆盖了，用开发者工具选择元件，可以在样式里添加z-index或者用position把相对定位变为绝对定位。.back{z-index:99999999;position:absolute;right:40px;top:95px;}el-option筛选框里不显示label，显示value，而且有的列筛选框有label有value全局变量写法，
暑期字节青训营前端学习笔记——简略放荡不羁的小雨鸽前端学习笔记
文章目录前端与HTML什么是前端？前端应该关注那些方面？注意HTML标签的语义化web开发的基本情况关于前端的开发：起源、架构、变迁前端应用的领域前端应用领域---浏览器前端应用领域---服务器前端应用领域---终端和跨端语言、框架、工具浏览器、网络、服务器Web标准标准组织：HTTP协议初识HTTP协议什么是HTTP协议协议分析报文methodWeb安全攻击防御对于XSS攻击：CSRF的防御Ty
【前端学习笔记】HTML5中的video和audio 花上
标签定义声音，比如音乐或者其他音频流。标签定义视频，比如电影片段或其他视频流。video和audio的优点：都不需要第三方插件就能播放音频和视频，可以直接插入，并且用同一的API接口控制。video和audio的缺点：1）暂时没有对流视频的支持和规范。流媒体分HTTP渐进式下载和实时流式传播，video和audio属于HTTP属于渐进式下载，不需要流媒体服务器，普通HTTP服务器就可以。2）播放媒
前端学习笔记 3：Vue 工程魔芋红茶前端前端学习笔记
前端学习笔记3：Vue工程上一篇文章介绍了如何在单一Html页面中使用Vue，本文介绍如何从头开始用Vue构建一个前端工程项目。环境准备Vue框架代码的创建依赖于Node.js，因此需要先安装Node.js。创建和启动创建通过以下命令可以创建Vue的框架代码：npmcreatevue@latest该命令执行后会先检查是否安装create-vue工具，如果没有，就安装。然后再使用create-vue
前端学习笔记 2：Vue 魔芋红茶前端 vue.js 前端学习
前端学习笔记2：VueVue是一个目前最流行的前端响应式框架，关于它的简单介绍可以观看这里。1.快速入门Vue的官网提供一个快速上手指南，有多种方式可以安装和使用Vue，这里展示一个最简单的方式——直接导入官方提供的在线的核心JS文件进行使用。这里展示的内容相当于官方快速上手指南中的使用ES模块构建版本。需要先像在之前文章中介绍的那样，在JS模块中导入Vue的createApp函数：import{
前端学习笔记 1：js 导入导出魔芋红茶前端前端学习笔记
前端学习笔记1：js导入导出1.传统引用一般性的，用以下方式引入JS中定义的函数或对象到Html中使用：functionshowMessage(){console.log("hello");}functionshowChineseMessage(){console.log("你好");}hello按我有惊喜document.getElementById("btn").onclick=functio
前端学习笔记 4：Element Plus 魔芋红茶前端前端学习笔记
前端学习笔记4：ElementPlus1.准备工作在使用ElementPlus之前，需要先创建一个Vue工程，具体可以参考上一篇文章。创建好后就可以按照官方文档中的指示，在工程目录下安装Element依赖：npminstallelement-plus--save注意，Element和ElementPlus是两个不同的项目，前者适用于Vue2.X，后者适用于Vue3.X。这里使用的是后者。2.快速开
2021-08-25_vue环境搭建前端学习笔记 kikop
20210825_vue环境搭建前端学习笔记1概述1.1目录结构image-20211001195604044.png1.2项目配置细节1.2.1配置拦截器//E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front\src\config\http.js//接口请求拦截器importVuefro
多线程编程之卫生间周凡杨 java 并发卫生间线程厕所
如大家所知，火车上车厢的卫生间很小，每次只能容纳一个人，一个车厢只有一个卫生间，这个卫生间会被多个人同时使用，在实际使用时，当一个人进入卫生间时则会把卫生间锁上，等出来时打开门，下一个人进去把门锁上，如果有一个人在卫生间内部则别人的人发现门是锁的则只能在外面等待。问题分析：首先问题中有两个实体，一个是人，一个是厕所，所以设计程序时就可以设计两个类。人是多数的，厕所只有一个（暂且模拟的是一个车厢）。
How to Install GUI to Centos Minimal sunjing linux Install Desktop GUI
http://www.namhuy.net/475/how-to-install-gui-to-centos-minimal.html I have centos 6.3 minimal running as web server. I’m looking to install gui to my server to vnc to my server. You can insta
Shell 函数 daizj shell 函数
Shell 函数 linux shell 可以用户定义函数，然后在shell脚本中可以随便调用。 shell中函数的定义格式如下： [function] funname [()]{ action; [return int;] } 说明： 1、可以带function fun() 定义，也可以直接fun() 定义,不带任何参数。 2、参数返回
Linux服务器新手操作之一周凡杨 Linux 简单操作
1.whoami 当一个用户登录Linux系统之后，也许他想知道自己是发哪个用户登录的。此时可以使用whoami命令。 [ecuser@HA5-DZ05 ~]$ whoami e
浅谈Socket通信（一）朱辉辉33 socket
在java中ServerSocket用于服务器端，用来监听端口。通过服务器监听，客户端发送请求，双方建立链接后才能通信。当服务器和客户端建立链接后，两边都会产生一个Socket实例，我们可以通过操作Socket来建立通信。首先我建立一个ServerSocket对象。当然要导入java.net.ServerSocket包 ServerSock
关于框架的简单认识西蜀石兰框架
入职两个月多，依然是一个不会写代码的小白，每天的工作就是看代码，写wiki。前端接触CSS、HTML、JS等语言，一直在用的CS模型，自然免不了数据库的链接及使用，真心涉及框架，项目中用到的BootStrap算一个吧，哦，JQuery只能算半个框架吧，我更觉得它是另外一种语言。后台一直是纯Java代码，涉及的框架是Quzrtz和log4j。都说学前端的要知道三大框架，目前node.
You have an error in your SQL syntax; check the manual that corresponds to your 林鹤霄
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'option,changed_ids ) values('0ac91f167f754c8cbac00e9e3dc372
MySQL5.6的my.ini配置 aigo mysql
注意：以下配置的服务器硬件是：8核16G内存 [client] port=3306 [mysql] default-character-set=utf8 [mysqld] port=3306 basedir=D:/mysql-5.6.21-win
mysql 全文模糊查找便捷解决方案 alxw4616 mysql
mysql 全文模糊查找便捷解决方案 2013/6/14 by 半仙 [email protected] 目的: 项目需求实现模糊查找. 原则: 查询不能超过 1秒. 问题: 目标表中有超过1千万条记录. 使用like '%str%' 进行模糊查询无法达到性能需求. 解决方案: 使用mysql全文索引. 1.全文索引 : MySQL支持全文索引和搜索功能。MySQL中的全文索
自定义数据结构链表(单项 ,双向,环形) 百合不是茶单项链表双向链表
链表与动态数组的实现方式差不多, 数组适合快速删除某个元素链表则可以快速的保存数组并且可以是不连续的单项链表;数据从第一个指向最后一个实现代码: //定义动态链表 clas
threadLocal实例 bijian1013 java thread java多线程 threadLocal
实例1： package com.bijian.thread; public class MyThread extends Thread { private static ThreadLocal tl = new ThreadLocal() { protected synchronized Object initialValue() { return new Inte
activemq安全设置—设置admin的用户名和密码 bijian1013 java activemq
ActiveMQ使用的是jetty服务器, 打开conf/jetty.xml文件，找到 <bean id="adminSecurityConstraint" class="org.eclipse.jetty.util.security.Constraint"> <p
【Java范型一】Java范型详解之范型集合和自定义范型类 bit1129 java
本文详细介绍Java的范型，写一篇关于范型的博客原因有两个，前几天要写个范型方法(返回值根据传入的类型而定)，竟然想了半天，最后还是从网上找了个范型方法的写法；再者，前一段时间在看Gson, Gson这个JSON包的精华就在于对范型的优雅简单的处理，看它的源代码就比较迷糊，只其然不知其所以然。所以，还是花点时间系统的整理总结下范型吧。范型内容范型集合类范型类
【HBase十二】HFile存储的是一个列族的数据 bit1129 hbase
在HBase中，每个HFile存储的是一个表中一个列族的数据，也就是说，当一个表中有多个列簇时，针对每个列簇插入数据，最后产生的数据是多个HFile，每个对应一个列族，通过如下操作验证 1. 建立一个有两个列族的表 create 'members','colfam1','colfam2' 2. 在members表中的colfam1中插入50*5
Nginx 官方一个配置实例 ronin47 nginx 配置实例
user www www; worker_processes 5; error_log logs/error.log; pid logs/nginx.pid; worker_rlimit_nofile 8192; events { worker_connections 4096;} http { include conf/mim
java-15.输入一颗二元查找树，将该树转换为它的镜像，即在转换后的二元查找树中，左子树的结点都大于右子树的结点。用递归和循环 bylijinnan java
//use recursion public static void mirrorHelp1(Node node){ if(node==null)return; swapChild(node); mirrorHelp1(node.getLeft()); mirrorHelp1(node.getRight()); } //use no recursion bu
返回null还是empty bylijinnan java apache spring 编程
第一个问题，函数是应当返回null还是长度为0的数组（或集合）？第二个问题，函数输入参数不当时，是异常还是返回null？先看第一个问题有两个约定我觉得应当遵守： 1.返回零长度的数组或集合而不是null（详见《Effective Java》）理由就是，如果返回empty，就可以少了很多not-null判断： List<Person> list
[科技与项目]工作流厂商的战略机遇期 comsci 工作流
在新的战略平衡形成之前，这里有一个短暂的战略机遇期，只有大概最短6年，最长14年的时间，这段时间就好像我们森林里面的小动物，在秋天中，必须抓紧一切时间存储坚果一样，否则无法熬过漫长的冬季。。。。在微软，甲骨文，谷歌，IBM,SONY
过度设计-举例 cuityang 过度设计
过度设计，需要更多设计时间和测试成本，如无必要，还是尽量简洁一些好。未来的事情，比如访问量，比如数据库的容量，比如是否需要改成分布式都是无法预料的再举一个例子，对闰年的判断逻辑：　　1、 if($Year%4==0) return True; else return Fasle; 　　2、if ( ($Year%4==0 &am
java进阶，《Java性能优化权威指南》试读 darkblue086 java性能优化
记得当年随意读了微软出版社的.NET 2.0应用程序调试，才发现调试器如此强大，应用程序开发调试其实真的简单了很多，不仅仅是因为里面介绍了很多调试器工具的使用，更是因为里面寻找问题并重现问题的思想让我震撼，时隔多年，Java已经如日中天，成为许多大型企业应用的首选，而今天，这本《Java性能优化权威指南》让我再次找到了这种感觉，从不经意的开发过程让我刮目相看，原来性能调优不是简单地看看热点在哪里，
网络学习笔记初识OSI七层模型与TCP协议 dcj3sjt126com 学习笔记
协议：在计算机网络中通信各方面所达成的、共同遵守和执行的一系列约定　　计算机网络的体系结构：计算机网络的层次结构和各层协议的集合。　　两类服务：　　面向连接的服务通信双方在通信之前先建立某种状态，并在通信过程中维持这种状态的变化，同时为服务对象预先分配一定的资源。这种服务叫做面向连接的服务。　　面向无连接的服务通信双方在通信前后不建立和维持状态，不为服务对象
mac中用命令行运行mysql dcj3sjt126com mysql linux mac
参考这篇博客：http://www.cnblogs.com/macro-cheng/archive/2011/10/25/mysql-001.html 感觉workbench不好用（有点先入为主了）。 1，安装mysql 在mysql的官方网站下载 mysql 5.5.23 http://www.mysql.com/downloads/mysql/，根据我的机器的配置情况选择了64
MongDB查询（1）——基本查询[五] eksliang mongodb mongodb 查询 mongodb find
MongDB查询转载请出自出处：http://eksliang.iteye.com/blog/2174452 一、find简介 MongoDB中使用find来进行查询。 API:如下 function ( query , fields , limit , skip, batchSize, options ){.....} 参数含义： query:查询参数 fie
base64，加密解密经融加密，对接 y806839048 经融加密对接
String data0 = new String(Base64.encode(bo.getPaymentResult().getBytes(("GBK")))); String data1 = new String(Base64.decode(data0.toCharArray()),"GBK"); // 注意编码格式，注意用于加密，解密的要是同
JavaWeb之JSP概述 ihuning javaweb
什么是JSP？为什么使用JSP？ JSP表示Java Server Page，即嵌有Java代码的HTML页面。使用JSP是因为在HTML中嵌入Java代码比在Java代码中拼接字符串更容易、更方便和更高效。 JSP起源在很多动态网页中，绝大部分内容都是固定不变的，只有局部内容需要动态产生和改变。如果使用Servl
apple watch 指南啸笑天 apple
1. 文档 WatchKit Programming Guide（中译在线版 By @CocoaChina）译文译者原文概览 - 开始为 Apple Watch 进行开发 @星夜暮晨 Overview - Developing for Apple Watch 概览 - 配置 Xcode 项目 - Overview - Configuring Yo
java经典的基础题目 macroli java 编程
1.列举出 10个JAVA语言的优势 a:免费，开源，跨平台(平台独立性)，简单易用，功能完善，面向对象，健壮性，多线程，结构中立，企业应用的成熟平台, 无线应用 2.列举出JAVA中10个面向对象编程的术语 a:包，类，接口，对象，属性，方法，构造器，继承，封装，多态，抽象，范型 3.列举出JAVA中6个比较常用的包 Java.lang;java.util;java.io;java.sql;ja
你所不知道神奇的js replace正则表达式 qiaolevip 每天进步一点点学习永无止境纵观千象 regex
var v = 'C9CFBAA3CAD0'; console.log(v); var arr = v.split(''); for (var i = 0; i < arr.length; i ++) { if (i % 2 == 0) arr[i] = '%' + arr[i]; } console.log(arr.join('')); console.log(v.r
[一起学Hive]之十五-分析Hive表和分区的统计信息(Statistics) superlxw1234 hive hive分析表 hive统计信息 hive Statistics
关键字：Hive统计信息、分析Hive表、Hive Statistics 类似于Oracle的分析表，Hive中也提供了分析表和分区的功能，通过自动和手动分析Hive表，将Hive表的一些统计信息存储到元数据中。表和分区的统计信息主要包括：行数、文件数、原始数据大小、所占存储大小、最后一次操作时间等； 14.1 新表的统计信息对于一个新创建
Spring Boot 1.2.5 发布 wiselyman spring boot
Spring Boot 1.2.5已在7月2日发布，现在可以从spring的maven库和maven中心库下载。这个版本是一个维护的发布版，主要是一些修复以及将Spring的依赖提升至4.1.7(包含重要的安全修复)。官方建议所有的Spring Boot用户升级这个版本。项目首页 | 源

移动端开发学习笔记