1、移动Web

作者: 奶油裙子 | 来源:发表于2023-04-25 13:49 被阅读0次

移动web开发-1
HTML基础
4.1_实际应用
Flutter入门初步2019-11-22
移动web开发与适配
文集
移动web
移动web
移动Web
移动Web

一、字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果

1、字体图标：

字体图标展示的是图标，本质是字体。
处理简单的、颜色单一的图片

2、字体图标的优点：

（1）灵活性：灵活地修改样式，例如：尺寸、颜色等
（2）轻量级：体积小、渲染快、降低服务器请求次数
（3）兼容性：几乎兼容所有主流浏览器
（4）使用方便：
<1>下载字体包
<2> 使用字体图标

3、图标库

Iconfont：https://www.iconfont.cn/
下载字体包：
登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体标签基本使用-类名</title>
    <!-- 1、引入样式表；2、调用类名 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .iconfont{
            font-size: 200px;
        }

    </style>
</head>
<body>
    <!-- iconfont 是固定 -->
    <span class="iconfont icon-xihuan"></span>
</body>
</html>

运行结果：

4、案例：淘宝购物车

（1）布局标签：li > a>span * 3
（2）字体图标
<1>引入字体图标样式表

<2>购物车和箭头span调用字体图标类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../移动web-资料/day01/01-案例/01-字体图标/iconfont/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }

        a{
            color: #333;
            text-decoration: none;
        }
        
        .nav{
            width: 200px;
            margin: 50px auto;
            font-size: 12px;
        }

        .icon-cart-Empty-fill{
            color: orange;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-cart-Empty-fill"></span>
                    <span>购物车</span>
                    <span class="iconfont arrow-down icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

5、上传矢量图：

（1）思考：如果图标库没有项目所需的图标怎么办？
答：IconFont网站上传矢量图生成字体图标
1、与设计师沟通，得到SVG矢量图
2、 IconFont网站上传图标，下载使用
（2）上传矢量图：
上传 → 上传SVG图标
浏览本地图标 → 去除颜色提交
加入购物车 → 下载使用

二、平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

1、平面转换

（1）平面转换概念
<1>改变盒子在平面内的形态（位移、旋转、缩放）
<2>2D转换
(2)平面转换属性:transform

2.1 位移

（1）语法
transform: translate(水平移动距离, 垂直移动距离);
（2）取值（正负均可）
a.像素单位数值
b.百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
(3)技巧
a.translate()如果只给出一个值, 表示x轴方向移动距离
b.单独设置某个方向的移动距离：translateX() & translateY()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位移-基本使用</title>
    <style>
         .father {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
    
        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
            /* transform: translate(100px, 50px); */

            /* 百分比: 盒子自身尺寸的百分比 */
            /* transform: translate(100%, 50%); */

            /* transform: translate(-100%, 50%); */

            /* 只给出一个值表示x轴移动距离 */
            /* transform: translate(100px); */

            transform: translateY(100px);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

运行结果：

2.2 位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位元素居中效果</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */
            
            /* 位移:百分比参考盒子自身尺寸计算结果 */
            transform: translate(-50%, -50%);

            width: 203px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

2.3 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background-image: url(../../移动web-资料/day01/01-案例/02-平面转换/03-案例-双开门/images/bg.jpg);

            /* 超出父级范围的隐藏 */
            overflow: hidden;
        }

        /* 左右相同的样式 */
        /* 伪元素：行内显示模式 */
        .box::before,
        .box::after{
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(../../移动web-资料/day01/01-案例/02-平面转换/03-案例-双开门/images/fm.jpg);
            transition: all, 1s;
        }
        .box::after{
            background-position: right 0;
        }

        /* 鼠标移入box，before向左移动 */
        .box:hover::before{
            transform: translate(-100%);
        }
        /* 鼠标移入box，after向右移动 */
        .box:hover::after{
            transform: translate(100%);
        }

    </style>
</head>
<body>
    <div class="box">
        <!-- 手写2个div;用css伪元素 before after -->
    </div>
</body>
</html>

运行结果：

3.1 旋转

目标：使用rotate实现元素旋转效果
（1）语法
transform: rotate(角度);
(必须配合着过渡)
（2）注意：角度单位是deg
（3）技巧：取值正负均可
a.取值为正, 则顺时针旋转
b.取值为负, 则逆时针旋转

    <style>
        img{
            width: 250px;
            transition: all 2s;
        }
        img:hover{
            /* transform: rotate(360deg); */
            transform: rotate(-360deg);

        }

    </style>
</head>
<body>
    <img src="../../移动web-资料/day01/01-案例/02-平面转换/images/rotate.png" alt="">
</body>

3.2 转换原点

目标：使用transform-origin属性改变转换原点
（1）语法
a.默认圆点是盒子中心点
b.transform-origin: 原点水平位置原点垂直位置;
(2)取值
<1>方位名词（left、top、right、bottom、center）
<2>像素单位数值
<3>百分比（参照盒子自身尺寸计算）

3.3 多重转换

目标：使用transform复合属性实现多形态转换
多重转换：一个盒子有多重形态的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        img{
            width: 200px;
            transition: all 8s;
        }
        .box:hover img{
            transform: translate(600px) rotate(720deg);
            
            /* 不行：旋转会改变坐标轴向，先旋转改变了坐标轴向，位移方向会受影响
            ---多重转换如果涉及到旋转往最后书写 */
            /* transform:rotate(720deg) translate(600px) ; */
           
           /* 不行，因为层叠性，最后只会实现最后一行旋转的代码 */
            /* transform: translate(600px);
            transform: rotate(720deg); */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../../移动web-资料/day01/01-案例/02-平面转换/images/tyre1.png" alt="">
    </div>
</body>
</html>

4.1 缩放

目标：使用scale改变元素的尺寸
（1）思考: 改变元素的width或height属性能实现吗？
不能
（2）语法
transform: scale(x轴缩放倍数, y轴缩放倍数);
（3）技巧
a.一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
b.transform: scale(缩放倍数);
c.scale值大于1表示放大, scale值小于1表示缩小

<style>
        .box {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink;
            
        }

        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
            /* 宽高实现不了效果 */
            /* width: 400px;
            height: 300px; */

            /* transform: scale(1.2); */
            transform: scale(0.8);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/product.jpeg" alt="">
    </div>
</body>

4.2 案例

播放按钮
Ø 布局
Ø ::after
Ø 样式
Ø 居中
Ø 效果
Ø 缩放
Ø 透明度（opacity）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }

        img{
            width: 100%;
        }

        .box{
            width: 249px;
            height: 210px;
            margin: 50px auto;
            /* 超出父级的隐藏 */
            overflow: hidden;
        }
        .box p{
            color: #3b3b3b;
            padding: 10px 10px 0 10px;
        }
        .box .pic{
            position: relative;
        }
        /* 
        1.播放按钮的盒子，压在img标签的上面（定位）
        2.hover 的时候缩放效果
           默认：看不见；特别大
           hover：看得见；小的：58
        */
        .box .pic::after{
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -29px;
            margin-top: -29px; */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);

            /* 复合元素一起写，分开写影响效果 */
            transform:translate(-50%, -50%) scale(5);
            opacity: 0;

            /* 过渡 */
            transition: all, 0.5s;
        }
        /* 鼠标移入li，让after 有变化 */
        .box li:hover .pic::after{
            opacity: 1;
            transform:translate(-50%, -50%) scale(1);
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic"><img src="./images/party.jpeg" alt="">
                    <!-- 伪元素添加播放按钮 -->
                </div>
                <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
            </li>
        </ul>
    </div>
</body>
</html>

运行结果：

三、渐变

目标：使用background-image属性实现渐变背景效果

1、渐变背景

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

四、综合案例

略

移动web开发-1
一. 移动web开发基础 1. 现状浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览...
HTML基础
新的征程 web前端介绍 web前端开发做什么 pc端web开发；移动端web开发；混合app开发；网页游戏/移动...
4.1_实际应用
1.移动iOS端 2.web前端 3.移动Android端 4.后端 5.设计
Flutter入门初步2019-11-22
前端的特点 1. 复杂多样，有各种各样的端。常见的有以下几种：移动-iOS 移动-Android 移动-Web，...
移动web开发与适配
学习目标了解移动web简单调试方法了解移动web常见适配方案掌握移动端布局技巧全面掌握rem适配方法移动...
文集
若web前端到达了瓶颈，如何冲出重围? 移动端汇总腾讯移动web知识库移动前端开发指南移动端上遇到的各种坑移动端...
移动web
移动web
# 移动适配方案 1. 定高不定宽 2. 响应式布局 3.rem # 视口属性 meta:vp+table wid...
移动Web
基础JS Zepto.js：Zepto.js中文API： UI FrozenUI:jndroid:Javascri...
移动Web
Pixel移动开发像素知识 px：css pixels逻辑像素，浏览器使用的抽象单位 dp,pt:device i...