菜单 搜索
首页 前端知识 2023【黑马程序员】移动 Web 第四天

2023【黑马程序员】移动 Web 第四天

2024-09-12 23:09:49 前端知识 前端哥 34 38 我要收藏

目录

一、适配方案

1. vw 布局

2. vh 布局

3. vh单位问题

 二、案例 项目 – 酷我音乐

1. 准备工作

2. 头部区域

3. 搜索区域

5. 标题公共样式

6. 排行榜内容

7. 推荐歌单区域

8. 下载区域

9. 头部固定

10. 核心源码

一、适配方案

  • 相对单位
  • 相对视口的尺寸计算结果
  • vw：viewport width ：1vw = 1/100视口宽度
  • vh：viewport height ：1vh = 1/100视口高度

例子： 

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

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

        .box {
            width: 50vw;
            height: 30vw;
            background-color: skyblue;
        }
    </style>
</head>

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

</html>

网页运行效果：

例子： 

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

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

        /* .box {
            width: 50vw;
            height: 30vw;
            background-color: skyblue;
        } */

        .box {
            width: 50vh;
            height: 30vh;
            background-color: goldenrod;
        }
    </style>
</head>

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

</html>

网页运行效果：

1. vw 布局

确定设计稿对应的vw尺寸 （1/100视口宽度）

  • 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定 vw 尺寸 （1/100 视口宽度）

vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

 例子： 

（html)

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./6.css">
</head>

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

</html>

(less)

.box {
    width: (68/3.75vw);
    height: (29/3.75vw);
    background-color: skyblue;
}

(css)

.box {
  width: 18.13333333vw;
  height: 7.73333333vw;
  background-color: skyblue;
}

网页运行效果：

 2. vh 布局

确定设计稿对应的vh尺寸 （1/100视口高度）

  • 查看设计稿高度 → 确定参考设备高度 (视口高度) → 确定 vh 尺寸 （1/100 视口高度）

vh单位的尺寸 = px 单位数值 / ( 1/100 视口高度 )

例子：

（html)

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./6.css">
</head>

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

</html>

(less)

// .box {
//     width: (68/3.75vw);
//     height: (29/3.75vw);
//     background-color: skyblue;
// }

.box {
    width: (68/6.67vh);
    height: (29/6.67vh);
    background-color: orange;
}

(css)

.box {
  width: 10.19490255vh;
  height: 4.34782609vh;
  background-color: orange;
}

网页运行效果：

3. vh单位问题

思考：开发中，能不能vw和vh混用呢？

回答：不能

原因：vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

 二、案例 项目 – 酷我音乐

1. 准备工作

项目目录

 

index.less 导入导出 

//out: ../css/

@import "./base.less";

 index.css 导入

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷我音乐</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>

</body>

</html>

2. 头部区域

总体布局

 在 index.html 中添加

    <!-- 头部区域 -->
    <header>
        <div class="left">left</div>
        <a href="#">下载APP</a>
    </header>

在 index.less 中添加

@vw: 3.75vw;

// 头部区域
header {
    display: flex;
    // 左右分布
    justify-content: space-between;
    // 垂直居中
    align-items: center;
    padding: 0 (15 / @vw);
    height: (50 / @vw);
    background-color: #fff;
}

网页运行效果：

内容填充

 在 index.html 中添加修改

    <!-- 头部区域 -->
    <header>
        <div class="left"></div>
        <a href="#">下载APP</a>
    </header>

在 index.less 中添加修改

// 头部区域
header {
    display: flex;
    // 左右分布
    justify-content: space-between;
    // 垂直居中
    align-items: center;
    padding: 0 (15 / @vw);
    height: (50 / @vw);
    background-color: #fff;

    .left {
        width: (235/@vw);
        height: (50/@vw);
        background-image: url(../assets/head.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    a {
        width: (80/@vw);
        height: (30/@vw);
        background-color: #ffe31b;
        border-radius: (15/@vw);
        text-align: center;
        line-height: (30/@vw);
        font-size: (14/@vw);
    }
}

网页运行效果：

3. 搜索区域

  在 index.html 中添加

    <!-- 搜索区域 -->
    <div class="search">
        <div class="txt">
            <span class="iconfont icon-sousuo"></span>
            <span>搜索你想听的歌曲</span>
        </div>
    </div>

在 index.less 中添加

// 搜索区域
.search {
    padding: (10/@vw) (15/@vw);
    height: (52/@vw);
    // 测试颜色
    // background-color: skyblue;

    .txt {
        height: (32/@vw);
        background-color: #f2f4f5;
        border-radius: (16/@vw);
        text-align: center;
        line-height: (32/@vw);
        color: #a1a4b3;
        font-size: (14/@vw);

        .iconfont {
            font-size: (16/@vw);
        }
    }
}

网页运行效果：

 在 index.html 中添加

    <!-- banner区域 -->
    <div class="banner">
        <ul>
            <li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li>
        </ul>
    </div>

在 index.less 中添加

// banner区域
.banner {
    padding: 0 (15/@vw);
    height: (108/@vw);
    // 测试颜色
    // background-color: skyblue;

    ul {
        li {
            width: (345/@vw);
            height: (108/@vw);

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: (5/@vw);
            }
        }
    }
}

网页运行效果：

5. 标题公共样式

 在 index.html 中添加

    <!-- 排行榜区域 -->
    <div class="list">
        <!-- 标题区域 -->
        <div class="title">
            <h4>酷我排行榜</h4>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>
    </div>

在 index.less 中添加

// 排行榜区域
.list {
    margin-top: (20/@vw);
    padding: 0 (15/@vw);
}

// 标题 公共样式
.title {
    display: flex;
    justify-content: space-between;
    margin-bottom: (16/@vw);
    line-height: (25/@vw);

    h4 {
        font-size: (20/@vw);
    }

    a {
        font-size: (12/@vw);
        color: #a1a4b3;
    }
}

网页运行效果：

6. 排行榜内容

 在 index.html 中添加修改

<!-- 排行榜区域 -->
    <div class="list">
        <!-- 标题区域 -->
        <div class="title">
            <h4>酷我排行榜</h4>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <ul>
                <li>
                    <div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div>
                    <div class="txt">
                        <a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
                        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
                        <a href="#">3.缺氧 - 轩辕（相信光）</a>
                    </div>
                </li>
                <li>
                    <div class="pic"><img src="./assets/icon_rank_new.png" alt=""></div>
                    <div class="txt">
                        <a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
                        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
                        <a href="#">3.缺氧 - 轩辕（相信光）</a>
                    </div>
                </li>
                <li>
                    <div class="pic"><img src="./assets/icon_rank_rise.png" alt=""></div>
                    <div class="txt">
                        <a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
                        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
                        <a href="#">3.缺氧 - 轩辕（相信光）</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

在 index.less 中添加修改

// 排行榜区域
.list {
    margin-top: (20/@vw);
    padding: 0 (15/@vw);

    li {
        display: flex;
        height: (105/@vw);
        margin-bottom: (16/@vw);
        background-color: #fff;
        border-radius: (10/@vw);

        .pic {
            margin-right: (20/@vw);

            img {
                width: (105/@vw);
                height: (105/@vw);
                border-radius: (10/@vw);
            }
        }

        .txt {
            a {
                display: block;
                font-size: (12/@vw);
                color: #a1a4b3;
                line-height: 1.8;
            }

            .more {
                font-size: (14/@vw);
                color: #333;

                .iconfont {
                    font-size: (16/@vw);
                }
            }
        }
    }
}

网页运行效果：

7. 推荐歌单区域

总体布局

在 index.html 中添加

    <!-- 推荐歌单区域 -->
    <div class="recommend">
        <!-- 标题区域 -->
        <div class="title">
            <h4>推荐歌单</h4>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
    </div>

在 index.less 中添加

// 推荐歌单区域
.recommend {
    padding: 0 (15/@vw);

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
            margin-bottom: (16/@vw);
            width: (105/@vw);
            height: (143/@vw);
            // 测试颜色
            background-color: skyblue;
        }
    }
}

网页运行效果：

内容填充

 在 index.html 中添加修改

 <!-- 推荐歌单区域 -->
    <div class="recommend">
        <!-- 标题区域 -->
        <div class="title">
            <h4>推荐歌单</h4>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <ul>
                <li>
                    <div class="pic">
                        <img src="./assets/song01.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
                <li>
                    <div class="pic">
                        <img src="./assets/song02.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
                <li>
                    <div class="pic">
                        <img src="./assets/song03.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
                <li>
                    <div class="pic">
                        <img src="./assets/song01.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
                <li>
                    <div class="pic">
                        <img src="./assets/song02.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
                <li>
                    <div class="pic">
                        <img src="./assets/song03.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
            </ul>
        </div>
    </div>

在 index.less 中添加修改

// 推荐歌单区域
.recommend {
    padding: 0 (15/@vw);

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
            margin-bottom: (16/@vw);
            width: (105/@vw);
            height: (143/@vw);
            // 测试颜色
            // background-color: skyblue;

            // 图片区域
            .pic {
                width: (105/@vw);
                height: (105/@vw);
                position: relative;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: (10/@vw);
                }

                .cover {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: (70/@vw);
                    height: (28/@vw);
                    background-color: rgba(0, 0, 0, 0.8);
                    border-radius: 0 (10/@vw) 0 (10/@vw);
                    text-align: center;
                    line-height: (28/@vw);
                    color: #fff;
                    font-size: (14/@vw);
                }
            }

            // 文字区域
            .txt {
                font-size: (14/@vw);
            }
        }
    }
}

网页运行效果：

8. 下载区域

在 index.html 中添加

     <!-- 下载区域 -->
    <div class="download">
        <img src="./assets/logo.png" alt="">
        <p>安装酷我音乐 发现更多好音乐</p>
        <span class="iconfont icon-right"></span>
    </div>

在 index.less 中添加

// 下载区域
.download {
    display: flex;
    align-items: center;
    position: fixed;
    left: (15/@vw);
    bottom: (30/@vw);

    padding: 0 (10/@vw) 0 (15/@vw);
    width: (345/@vw);
    height: (45/@vw);
    background-color: #fff;
    border-radius: (23/@vw);

    img {
        width: (36/@vw);
        height: (36/@vw);
        margin-right: (10/@vw);
    }

    p {
        flex: 1;
        font-size: (14/@vw);
    }

    span {
        width: (32/@vw);
        height: (32/@vw);
        background-color: #f2f3f5;
        border-radius: 50%;
        text-align: center;
        line-height: (32/@vw);
        font-size: (16/@vw);
    }
}

网页运行效果：

9. 头部固定

在 index.less 中添加

// 头部区域
header {
    position: fixed;
    left: 0;
    top: 0;
    ...
    width: 100%;
}

.search {
    margin-top: (50/@vw);
    ...
}

网页运行效果：

10. 核心源码

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷我音乐</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="left"></div>
        <a href="#">下载APP</a>
    </header>

    <!-- 搜索区域 -->
    <div class="search">
        <div class="txt">
            <span class="iconfont icon-sousuo"></span>
            <span>搜索你想听的歌曲</span>
        </div>
    </div>

    <!-- banner区域 -->
    <div class="banner">
        <ul>
            <li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li>
        </ul>
    </div>

    <!-- 排行榜区域 -->
    <div class="list">
        <!-- 标题区域 -->
        <div class="title">
            <h4>酷我排行榜</h4>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <ul>
                <li>
                    <div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div>
                    <div class="txt">
                        <a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
                        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
                        <a href="#">3.缺氧 - 轩辕（相信光）</a>
                    </div>
                </li>
                <li>
                    <div class="pic"><img src="./assets/icon_rank_new.png" alt=""></div>
                    <div class="txt">
                        <a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
                        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
                        <a href="#">3.缺氧 - 轩辕（相信光）</a>
                    </div>
                </li>
                <li>
                    <div class="pic"><img src="./assets/icon_rank_rise.png" alt=""></div>
                    <div class="txt">
                        <a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
                        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
                        <a href="#">3.缺氧 - 轩辕（相信光）</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 推荐歌单区域 -->
    <div class="recommend">
        <!-- 标题区域 -->
        <div class="title">
            <h4>推荐歌单</h4>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <ul>
                <li>
                    <div class="pic">
                        <img src="./assets/song01.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
                <li>
                    <div class="pic">
                        <img src="./assets/song02.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
                <li>
                    <div class="pic">
                        <img src="./assets/song03.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
                <li>
                    <div class="pic">
                        <img src="./assets/song01.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
                <li>
                    <div class="pic">
                        <img src="./assets/song02.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
                <li>
                    <div class="pic">
                        <img src="./assets/song03.jpeg" alt="">
                        <div class="cover">18.2w</div>
                    </div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 下载区域 -->
    <div class="download">
        <img src="./assets/logo.png" alt="">
        <p>安装酷我音乐 发现更多好音乐</p>
        <span class="iconfont icon-right"></span>
    </div>

</body>

</html>

index.less

//out: ../css/

@import "./base.less";

body {
    background-color: #f9fafb;
}

@vw: 3.75vw;

// 头部区域
header {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    // 左右分布
    justify-content: space-between;
    // 垂直居中
    align-items: center;
    padding: 0 (15 / @vw);
    width: 100%;
    height: (50 / @vw);
    background-color: #fff;

    .left {
        width: (235/@vw);
        height: (50/@vw);
        background-image: url(../assets/head.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    a {
        width: (80/@vw);
        height: (30/@vw);
        background-color: #ffe31b;
        border-radius: (15/@vw);
        text-align: center;
        line-height: (30/@vw);
        font-size: (14/@vw);
    }
}

// 搜索区域
.search {
    margin-top: (50/@vw);
    padding: (10/@vw) (15/@vw);
    height: (52/@vw);
    // 测试颜色
    // background-color: skyblue;

    .txt {
        height: (32/@vw);
        background-color: #f2f4f5;
        border-radius: (16/@vw);
        text-align: center;
        line-height: (32/@vw);
        color: #a1a4b3;
        font-size: (14/@vw);

        .iconfont {
            font-size: (16/@vw);
        }
    }
}

// banner区域
.banner {
    padding: 0 (15/@vw);
    height: (108/@vw);
    // 测试颜色
    // background-color: skyblue;

    ul {
        li {
            width: (345/@vw);
            height: (108/@vw);

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: (5/@vw);
            }
        }
    }
}

// 排行榜区域
.list {
    margin-top: (20/@vw);
    padding: 0 (15/@vw);

    li {
        display: flex;
        height: (105/@vw);
        margin-bottom: (16/@vw);
        background-color: #fff;
        border-radius: (10/@vw);

        .pic {
            margin-right: (20/@vw);

            img {
                width: (105/@vw);
                height: (105/@vw);
                border-radius: (10/@vw);
            }
        }

        .txt {
            a {
                display: block;
                font-size: (12/@vw);
                color: #a1a4b3;
                line-height: 1.8;
            }

            .more {
                font-size: (14/@vw);
                color: #333;

                .iconfont {
                    font-size: (16/@vw);
                }
            }
        }
    }
}

// 标题 公共样式
.title {
    display: flex;
    justify-content: space-between;
    margin-bottom: (16/@vw);
    line-height: (25/@vw);

    h4 {
        font-size: (20/@vw);
    }

    a {
        font-size: (12/@vw);
        color: #a1a4b3;
    }
}

// 推荐歌单区域
.recommend {
    padding: 0 (15/@vw);

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
            margin-bottom: (16/@vw);
            width: (105/@vw);
            height: (143/@vw);
            // 测试颜色
            // background-color: skyblue;

            // 图片区域
            .pic {
                width: (105/@vw);
                height: (105/@vw);
                position: relative;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: (10/@vw);
                }

                .cover {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: (70/@vw);
                    height: (28/@vw);
                    background-color: rgba(0, 0, 0, 0.8);
                    border-radius: 0 (10/@vw) 0 (10/@vw);
                    text-align: center;
                    line-height: (28/@vw);
                    color: #fff;
                    font-size: (14/@vw);
                }
            }

            // 文字区域
            .txt {
                font-size: (14/@vw);
            }
        }
    }
}

// 下载区域
.download {
    display: flex;
    align-items: center;
    position: fixed;
    left: (15/@vw);
    bottom: (30/@vw);

    padding: 0 (10/@vw) 0 (15/@vw);
    width: (345/@vw);
    height: (45/@vw);
    background-color: #fff;
    border-radius: (23/@vw);

    img {
        width: (36/@vw);
        height: (36/@vw);
        margin-right: (10/@vw);
    }

    p {
        flex: 1;
        font-size: (14/@vw);
    }

    span {
        width: (32/@vw);
        height: (32/@vw);
        background-color: #f2f3f5;
        border-radius: 50%;
        text-align: center;
        line-height: (32/@vw);
        font-size: (16/@vw);
    }
}

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18146.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

JSONObject.fromObject爆红问题解决

2024-10-15 23:10:08

3.1 requests与JSON基础

2024-10-15 23:10:08

使用fastJSON进行json格式的转换

2024-10-15 23:10:07

3D点云目标检测数据集标注工具 保姆级教程——CVAT （附json转kitti代码）

2024-10-15 23:10:16

JsonCpp--快速上手使用C 对json文件的读写(Linux)

2024-10-15 23:10:16

**探索数据之美 —— Onde：您的JSON文档编辑利器**

2024-10-15 23:10:15

React 安装(NPM)

2024-10-15 23:10:15

Django-NPM 教程：结合前端现代化工具于 Django 项目中

2024-10-15 23:10:15

react安装报错 npm ERR! code ETIMEDOUT npm ERR! errno ETIMEDOUT npm ERR! network request to

2024-10-15 23:10:14

ERESOLVE overriding peer dependency npm install错误

2024-10-15 23:10:14

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
3

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
4

vue使用datav echarts

2024-09-06 00:09:381000
5

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
6

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
7

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
8

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
9

npm的使用

2024-08-18 00:08:131000
10

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！