九、移动WEB

最新推荐文章于 2024-09-25 09:53:04 发布
最新推荐文章于 2024-09-25 09:53:04 发布
阅读量939 收藏 21
点赞数 21
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sxsxsx2/article/details/135145462
版权

1、字体图标

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

字体图标

        字体图标展示的是图标，本质是字体。

        处理简单的、颜色单一的图片

字体图标的优点：

        灵活性：灵活地修改样式，例如：尺寸、颜色等

        轻量级：体积小、渲染快、降低服务器请求次数

        兼容性：几乎兼容所有主流浏览器

        使用方便：

                1. 下载字体包

                2. 使用字体图标

图标库 l Iconfont：https://www.iconfont.cn/

下载字体包： l 登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

<!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>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* .iconfont {
            font-size: 60px;
        } */

        i {
            font-size: 60px;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-favorites-fill"></i>
</body>
</html>

案例：淘宝购物车

布局标签

        li > span * 3

字体图标

        引入字体图标样式表

        购物车和箭头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>购物车</title>
    <link rel="stylesheet" href="./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;
        }
                
        .orange {
            color: #f40;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-cart-Empty-fill orange"></span>
                    <span>购物车</span>
                    <span class="iconfont icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

2、渐变

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

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

<!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>
        .box {
            width: 300px;
            height: 200px;
            /* background-image: linear-gradient(
                pink,
                green,
                hotpink
            ); */
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0, .6)
            );
        }
    </style>
</head>

<body>

    <div class="box"></div>


</body>

</html>

<!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>
    <link rel="stylesheet" href="./css/demo.css">
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/product.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>产品</h4>
                        <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>

                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei1.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>行业洞察</h4>
                        <h5>迈向智能世界2030</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei2.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>《ICT新视界》刊首语</h4>
                        <h5>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    vertical-align: middle;
}

.box {
    width: 1110px;
    height: 247px;
    margin: 20px auto;
    /* background-color: pink; */
}

.box li {
    position: relative;
    float: left;
    width: 350px;
    height: 247px;
    margin-right: 30px;
    overflow: hidden;
}

.box li:last-child {
    margin-right: 0;
}

.box .txt {
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 350px;
    height: auto;
    padding: 20px 30px;
    z-index: 1;
    color: #fff;
    transition: transform .5s;
    /* transition: all .5s; */
}

.box .txt h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 2em;
    color: #fff;
}

.box .txt h5 {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 1.5em;
    color: #fff;
}

.box .txt p {
    color: #fff;
    font-size: 14px;
}

.box .txt p .iconfont {
    color: #c7000b;
    vertical-align: middle;
    font-size: 20px;
    font-weight: 700;
}

/* 1. 渐变背景的盒子 */
.box .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 350px;
    height: 247px;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.6)
    );
    opacity: 0;
    transition: all .5s;
}

/* 2. hover效果 */
/* 2.1 图片缩放 */
.box li .pic img {
    transition: all .5s;
}
.box li:hover .pic img {
    transform: scale(1.2);
}


/* 2.2 渐变背景显示 */
.box li:hover .mask {
    opacity: 1;
}

/* 2.3 文字向上移动 */
.box li:hover .txt {
    transform: translateY(-50px);
}

3、空间转换

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

空间：是从坐标轴角度定义的。

x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

        空间转换也叫3D转换

        属性：transform

语法 

        transform: translate3d(x, y, z); 

        transform: translateX(值); 

        transform: translateY(值);  

        transform: translateZ(值);

取值（正负均可） 

        像素单位数值

        百分比

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>空间位移</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
      /* transform: translate3d(50px, 100px, 200px); */
      transform: translateX(100px);
      transform: translateY(100px);
      transform: translateZ(100px);
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

目标：使用perspective属性实现透视效果

思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

        答：近大远小、近清楚远模糊 

思考：默认情况下，为什么无法观察到Z轴位移效果？

        答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

属性（添加给父级）

 perspective: 值;

 取值：像素单位数值， 数值一般在800 – 1200。

作用

 空间转换时，为元素添加近大远小、近实远虚的视觉效果

属性（添加给父级）

        perspective: 值;

        透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    body {
      perspective: 1000px;
      /* perspective: 200px; */
      /* perspective: 10000px; */
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

使用rotate实现元素空间旋转效果

语法

transform: rotateZ(值); 

transform: rotateX(值);

transform: rotateY(值);

<!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>空间旋转-Z轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box img:hover {
            transform: rotateZ(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>





<!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>空间旋转-X轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateX(60deg);
            transform: rotateX(-60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>






<!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>空间旋转-Y轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateY(60deg);
            transform: rotateY(-60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

拓展

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

目标： 使用transform-style: preserve-3d呈现立体图形

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小、近实远虚的视觉效果。

实现方法

添加 transform-style: preserve-3d;

使子元素处于真正的3d空间

呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；

2. 按需求设置子盒子的位置（位移或旋转） 

注意 --空间内，转换元素都有自已独立的坐标轴，互不干扰

<!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>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

目标：使用立体呈现技巧实现3D导航效果

观察：绿色和橙色盒子是如何摆放的？

实现思路

1. 搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面

2. 添加hover状态旋转切换效果

实现思路

1. 搭建立方体

        调节a标签的位置

                a标签定位（子绝父相）

                英文部分添加旋转和位移样式

                中文部分添加位移样式

2. 过渡效果

鼠标滑过li， 添加空间旋转样式

li添加过渡属性 注意： 案例完成后，删除li的旋转样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(30deg); */

            /* 测试缩放效果 */
            /* transform: scale3d(0.5, 1.1, 2); */
        }

        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

4、动画

目标：使用animation添加动画效果

思考：过渡可以实现什么效果？

答：实现2个状态间的变化过程

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或动画帧

<!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>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            /* 使用动画 */
            animation: change 1s;
        }

        /* 一. 定义动画：从200变大到600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比指的是动画总时长的占比 */
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

目标：使用animation相关属性控制动画执行过程

<!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>animation拆分写法</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            animation-name: change;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            
        }

        .box:hover {
           /* 鼠标移入的时候暂停动画 */
           animation-play-state: paused;
        }


        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

5、Bootstrap的使用

了解Bootstrap

目标：知道 UI框架的作用

UI框架概念 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。 l

作用 基于框架开发，效率高，稳定性高

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: https://www.bootcss.com/

使用步骤 1. 引入： BootStrap提供的CSS代码

2. 调用类：使用BootStrap提供的样式

container：响应式布局版心类

栅格化是指将整个网页的宽度分成若干等份

BootStrap3默认将网页分成12等份

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。 .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

分别使用.row类名和 .col类名定义栅格布局的行和列。

注意: 1. container类自带间距15px; 2. row类自带间距-15px

分类： 布局样式 内容美化样式

​​​​​​​

三金呐
关注
移动Web
m0_73198722的博客
09-03 178
二维，三维，flex布局，移动端适配
Web---2D&3D 转换与动画
qq_43658148的博客
07-10 326
一、字体图标一、字体图标目的：使用字体图标技巧实现网页中简洁图标效果1.iconfont的使用1）iconfont的网址2）生成iconfont文件，导入到项目a.创建项目b.创建好项目c.选择自己要使用的图标，点击上面的购物车d.点击购物车添加到项目e.在我的项目中点击下载到本地f. 下载完成以后就会有如下的文件，导入到项目中使用就可以2.购物车案例a.使用link的方式导入iconfont.css文件。
CSS（七）
bishan2898498的博客
11-08 167
字体图标的下载和使用、平面转换、渐变
前端小结1（空间平面转换及动画）
XiaoChen10086的博客
02-23 199
css进阶之空间平面转换、动画
Web前端进阶
weixin_45784511的博客
03-16 339
字体图标-iconfont，平面转换，渐变，空间转换（3D转换），动画，移动端特点，百分比布局，Flex布局，移动适配，Less，响应式，BootStrap
移动web学习总结
奋斗的小绿萝
08-07 2954
最近学习了些移动web开发的知识，总结一下： Hello,移动web： https://www.imooc.com/learn/494 一、基础知识 1. 关于Pixel px : CSS px，逻辑像素，浏览器使用的抽象单位 dp，pt： device independence pixel 物理像素：设备无关像素 dpr ： devicePixelRatio 设备像...
web移动开发总结(一)
热门推荐
庚中
12-02 1万+
概述 移动web的概念和发展历史 移动web的开发方式和区别 响应式原理和媒体查询(重点) 响应式框架的介绍 bootstrap框架的基本使用 bootstrap全局CSS样式布局容器使用(重点) bootstrap全局CSS样式栅格系统使用(重点) bootstrap全局CSS样式响应式工具使用 微金所项目搭建和头部的结构 (重点) web前端 PC端的web ： 在PC端电脑访问的web...
常用移动web开发框架
简单
05-01 7973
纯粹的总结一下移动web开发框架，移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发，是成熟的框架，jQuery Mobile出自于jQuery家族，Sencha Touch来自于ExtJS。jQuery Mobile 和Sencha Touch都是比较成熟老牌的框架，项目中也有应用。国内也有公司，像BAT巨头也在探索和实现了适合自己的移动web...
web移动开发总结(四)
庚中
12-10 4410
总结 移动端的一些基本基础知识 移动京东的项目搭建 公共样式的定义 顶部通栏的布局 轮播图的布局 导航条的布局 秒杀商品布局 京东超市布局 原生移动web开发 响应式开发： 写一个页面同时适配多个终端 原生的移动web开发： 分别针对每个端都写一套代码 PC端写一套代码 移动端写一套代码 PC端一般使用固定宽高的布局 移动端全屏撑满整个页面 全屏100% 使用百分比布局（流式布局） 目...
移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移
03-13
移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web移动开发web...
移动WEB前端高级开发项目实战_移动Web常用开发方式_编程案例实例详解课程教程.pdf
05-22
移动Web技术随着设备和网络的优化迭代,包含更多、更复杂的应用功能,不再是大家所认识的简单交互、单纯展示的页面而已。如今移动Web开发者早期基于DOM的开发方式,逐渐向 MVC/MVVM类库框架迁移,比较有代表性的框架有 ...
HTML5移动Web开发
03-27
HTML5移动Web开发是当前互联网应用开发的重要领域，随着移动设备的普及，越来越多的开发者将目光转向了构建适应各种屏幕尺寸、操作系统且具有良好用户体验的移动Web应用。本资源提供了“HTML5移动Web开发”指南，...
移动web手册
05-29
移动Web手册 【知识点一】：移动Web开发的兴起与发展 移动Web手册主要关注的是移动设备上网页的开发技术。随着智能手机与平板电脑的普及，移动Web的重要性日益凸显。移动Web技术的兴起与发展是因应移动设备用户日益...
day01
最新发布
JiangMeiXue的博客
09-25 188
目录。
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。
李浩洋
09-24 230
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。up-form组件 :model=“formData” :rules=“rules”要赋初始值
Vue中集中常见的布局方式
张雨的博客
09-24 392
【代码】Vue中集中常见的布局方式。
webview2加载本地页面
qq_25160759的博客
09-23 625
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 416
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
HTML5移动Web开发实战指南
"HTML5移动Web开发指南由唐俊开撰写，主要面向对移动Web技术感兴趣的读者，包括初学者和有一定HTML经验的开发者。书中详细介绍了HTML5在移动Web技术中的应用，涵盖新功能和特性，以及如何使用JavaScript框架如jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值