Html+CSS小米官网实例练习全部代码

news2024/12/24 9:05:47

跟随B站视频和GitHub的分享学习复刻小米商城网站，参考的网站如下所示：

GitHub分享：
https://github.com/0033-Vec/mishopping
https://github.com/ldwwwwww/ldwwwwww.github.xiaomi
https://github.com/hysmdd/xiaomi-mall
B站视频：
https://www.bilibili.com/video/BV1Uf421f7Bf/?share_source=copy_web&vd_source=8a46fdcbfaf8df0abad95d6cda51a55b
https://www.bilibili.com/video/BV1Uf421f7Bf/?spm_id_from=333.788.recommend_more_video.19
https://www.bilibili.com/video/BV1894y1S7Cb/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=51d15aaa7e2e1f72f87356e06140ae6b

最终效果图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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="base.css">
    <!-- 链接小米商城home页样式文件 -->
    <link rel="stylesheet" href="home.css">
     <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
     <!-- 顶部黑色导航栏 -->
     <div class="topbar-nav">
        <!--第二个容器，用来进行内容居中 -->
        <div class="wrap">
        <!-- 使用列表承载导航栏的内容 -->
            <ul class="topbar-nav-left">
                <!--左侧导航栏内容 -->
                <li>
                    <a href="#">小米官网</a> <span>|</span>
                </li>
                <li>
                    <a href="#">小米商城</a> <span>|</span>
                </li>
                <li>
                    <a href="#">小米澎湃os</a> <span>|</span>
                </li>
                <li>
                    <a href="#">小米汽车</a> <span>|</span>
                </li>
                <li>
                    <a href="#">云服务</a> <span>|</span>
                </li>
                <li>
                    <a href="#">Iot</a> <span>|</span>
                </li>
                <li>
                    <a href="#">有品</a> <span>|</span>
                </li>
                <li>
                    <a href="#">小爱开放平台</a> <span>|</span>
                </li>
                <li>
                    <a href="#">资质证照</a> <span>|</span>
                </li>
                <li>
                    <a href="#">规则协议</a> <span>|</span>
                </li>
                <li class="DownloadAPP">
                    <a href="#">下载APP</a> <span>|</span>
                    <!-- 弹出下载二维码 -->
                    <div class="download">
                        <img src="./img/download.png" alt="">
                        <p>小米商城APP</p>
                    </div>
                    <!-- 实现白色三角形 -->
                     <div class="stri"></div>
                </li>
                <li>
                    <a href="#">地区</a> 
                </li>
            </ul>
            <ul class="topbar-nav-right">
                <!-- 右侧导航栏内容 -->
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a>
                <li class="topbar-nav-cart">
                    <a href="#" class="cart">
                        <i class="iconfont">&#xe63f;</i>
                        <i>购物车(0)</i>
                    </a>
                    <div class="cart-list">
                        抓紧选购到购物车吧！
                    </div>
                </li>
            </ul>
        </div>
     </div>

     <!--头部白色导航栏与搜索框部分 -->
     <div class="header-nav">
        <div class="wrap">
            <!-- logo图 -->
            <div class="logo">
                <!-- logo图片链接小米官网 -->
                <a href="https://www.mi.com/index.html">
                    <img class="logopng" src="./img/logo-mi2.png" alt="小米官网">
                </a>
            </div>
            <!-- 左侧菜单 -->
             <div class="header-nav-bar">
                <ul>
                    <li>
                        <a href="#">小米手机</a>
                        <!-- 头部导航小米手机弹出框内容 -->
                         <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <!-- 使用容器承载图片便于处理样式 -->
                                             <div class="img-box">
                                                <img src="./img/xiaomishouji (1).png" alt="">
                                             </div>
                                             <p class="name" >Xiaomi MIX Fold 4</p>
                                             <p class="price" >8999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <!-- 使用容器承载图片便于处理样式 -->
                                             <div class="img-box">
                                                <img src="./img/xiaomishouji (2).png" alt="">
                                             </div>
                                             <p class="name" >Xiaomi MIX Fold 4</p>
                                             <p class="price" >7999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <!-- 使用容器承载图片便于处理样式 -->
                                             <div class="img-box">
                                                <img src="./img/xiaomishouji (3).png" alt="">
                                             </div>
                                             <p class="name" >Xiaomi MIX Fold 4</p>
                                             <p class="price" >6999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <!-- 使用容器承载图片便于处理样式 -->
                                             <div class="img-box">
                                                <img src="./img/xiaomishouji (4).png" alt="">
                                             </div>
                                             <p class="name" >Xiaomi MIX Fold 4</p>
                                             <p class="price" >5999元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                         </div>
                    </li>
                    
                    <li><a href="#">红米手机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">小米社区</a></li>
                </ul>
             </div>
             <!-- 右侧搜素 -->
              <div class="header-nav-search">
                <input type="text" placeholder="输入框默认文本">
                <!-- 搜索图标按钮,随便设置了一个图标 -->
                 <button class="iconfont">&#xe60b;</button>
              </div>
        </div>
     </div>
    
     <!-- banner部分 -->
     <div class="banner">
        <div class="wrap">
            <!-- 因为没有学习JS,所以这里的轮播图无法实现,是只使用了一张图 -->
             <img src="./img/bannerimg.jpg" alt="" class="banner-img">
            <!-- 侧边栏导航 -->
             <div class="slide">
                <ul>
                    <li>
                        <a href="#">手机</a><i class="iconfont">&#xe609;</i>
                        <!-- 具体产品列表 -->
                        <div class="slide-list">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">电视</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">家电</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">笔记本 平板</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">出行 穿戴</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">耳机 音响</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">健康 儿童</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">生活 箱包</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">智能 路由器</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">电源 配件</a><i class="iconfont">&#xe609;</i></li>
                </ul>
             </div>
        </div>
     </div>
    
     <!-- 广告部分 -->
    <div class="ad">
        <div class="wrap">
            <div class="ad-aside">
                <ul>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>保障服务</p>
                    </li>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>企业团购</p>
                    </li>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>F码通道</p>
                    </li>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>米粉卡</p>
                    </li>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>以旧换新</p>
                    </li>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>话费充值</p>
                    </li>
                </ul>
            </div>
            <div class="ad-img">
                <a href="#"><img src="./img/小米14广告.png" alt=""></a>
            </div>
            <div class="ad-img">
                <a href="#"><img src="./img/小米14广告.png" alt=""></a>
            </div>
            <div class="ad-img">
                <a href="#"><img src="./img/小米14广告.png" alt=""></a>
            </div>
        </div>
    </div>
    <!-- 内容模块,包括手机模块,智能穿戴模块,笔记本平板模块等7个模块-->
    <div class="content">
        <div class="wrap">
            <!-- 手机模块广告大图 -->
             <div class="big-adimg">
                <a href="#">
                    <img src="./img/手机横板广告图.webp" alt="">
                </a>
             </div>
            <!-- 手机模块 -->
             <div class="phone">
                <h3 class="title">手机<a href="#" class="phone-right">查看更多</a></h3>
                <div class="phone-box">
                    <div class="phone-box-left">
                        <a href="#">
                            <img src="./img/手机模块左侧大图.webp" alt="">
                        </a>
                    </div>
                    <div class="phone-box-right">
                        <div class="item">
                           <a href="#">
                                <img class="item-img" src="./img/手机模块小图.webp">
                                <p class="item-name">红米K70至尊版</p>
                                <p class="item-desc">性能魔王 全面进化</p>
                                <p class="item-price">2599元起</p>
                           </a> 
                        </div>
                        <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                    </div>
                </div>
             </div>
             <!-- 家电模块,24年小米家电模块和网上视频差别很大,自己进行了修改,并且没有了视频模块 -->
             <div class="jiadian">
            <!-- 家电模块和手机不一样,手机模块直接将右侧文字放在了标题中 -->
             <!-- 家电模块将文字部分和内容部分放在两个容器中 -->
                <div class="jiadian-text">
                    <h3 class="title">家电</h3>
                    <!-- 右侧更多的描述 -->
                    <div class="more">
                        <ul class="tab-list">
                            <li class="tab-active">热门</li>
                            <li class="tab-active2">电视影音无切换效果</li>
                            <li class="tab-active2">空调无切换效果</li>
                        </ul>
                    </div>
                </div>
                <!-- 定义家电图片部分 -->
                <div class="jiadian-bd">
                    <!-- 定义左侧图片部分 -->
                    <div class="jiadian-bd-left">
                        <ul class="brick-promo-list">
                            <!-- 使用item可以直接链接手机模块item样式,后面加brick-item还可以进行样式的进一步调整 -->
                            <li class="item brick-item">
                                <!-- 使图片超链接到购物页面 -->
                                <a href="https://www.mi.com/shop/buy/detail?product_id=10050068"><img src="./img/小米家电左侧上部分图.webp" alt=""></a>
                            </li>
                            <li class="item brick-item">
                                <a href="https://www.mi.com/machine-drive"><img src="./img/小米家电左侧下部分图.webp" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <!-- 定义右侧部分,右侧有三页内容 -->
                    <!-- 但是最终没有实现切换效果,尝试使用hover但是无法触发 -->
                    <!-- 应该需要使用JS -->
                     <div class="jiadian-bd-right">
                        <div class="jiadian-bd-right">
                            <!-- 也是直接使用手机定义的item样式 -->
                            <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item item-last">
                                <div>
                                    <img src="./img/家电小图.png" alt="">
                                </div>
                                <div>
                                    <img src="./img/家电小图.png" alt="">
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
             </div>
        </div>
    </div>
    <!-- 页脚部分 -->
     <div class="footer">
        <div class="wrap">
            <div class="footer-service">
                <ul>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe66b;</i>
                            <span>服务内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe647;</i>
                            <span>服务内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe66b;</i>
                            <span>服务内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe688;</i>
                            <span>服务内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe62f;</i>
                            <span>服务内容</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-link">
                <ul>
                    <li>选购指南</li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">汽车</a></li>
                    <li><a href="#">家居</a></li>
                </ul>
                <ul>
                    <li>服务中心</li>
                    <li><a href="#">售后</a></li>
                    <li><a href="#">订单查询</a></li>
                    <li><a href="#">服务价格</a></li>
                    <li><a href="#">保障服务</a></li>
                    <li><a href="#">以旧换新</a></li>
                    <li><a href="#">防伪查询</a></li>
                </ul>
                <ul>
                    <li>线下门店</li>
                    <li><a href="#">小米之家</a></li>
                    <li><a href="#">服务网点</a></li>
                    <li><a href="#">授权体验店</a></li>
                </ul>
                <ul>
                    <li>服务中心</li>
                    <li><a href="#">售后</a></li>
                    <li><a href="#">订单查询</a></li>
                    <li><a href="#">服务价格</a></li>
                    <li><a href="#">保障服务</a></li>
                    <li><a href="#">以旧换新</a></li>
                    <li><a href="#">防伪查询</a></li>
                </ul>
                <ul>
                    <li>服务中心</li>
                    <li><a href="#">售后</a></li>
                    <li><a href="#">订单查询</a></li>
                    <li><a href="#">服务价格</a></li>
                    <li><a href="#">保障服务</a></li>
                    <li><a href="#">以旧换新</a></li>
                    <li><a href="#">防伪查询</a></li>
                </ul>
                <div class="footer-aside">
                    <p class="tel">400-100-5678</p>
                    <p class="time">8:00-18:00（仅收市话费）</p>
                    <a href="#" class="kefu">人工客服</a>
                    <p class="tel2">400-180-8888</p>
                    <p class="time">8:00-18:00（仅收市话费）<br>适用于：MIX FOLD、巨屏电视系</p>
                    <a href="#" class="kefu">人工客服</a>
                </div>
            </div>
        </div>
     </div>
</body>
</html>

CSS文件内容

欢迎关注我的公众号，回复**小米商城**

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1988207.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用这6款AI绘图工具，秒变艺术大师！

用这6款AI绘图工具，秒变艺术大师！

人工智能正在悄悄地改变创造力的过程。从去年流行的虚拟人物到今年热门的人工智能绘画&#xff0c;人工智能可以以新的创造性形式重塑艺术&#xff0c;如人工智能音乐、人工智能诗歌和人工智能绘画。毫无疑问&#xff0c;人工智能正在给艺术带来巨大的变化。人工智能绘画听起来…
阅读更多...
pnpm和npm的区别

pnpm和npm的区别

pnpm 和 npm 都是用于管理 Node.js 项目中依赖包的工具&#xff0c;但它们有一些关键的不同点。 npm&#xff08;Node Package Manager&#xff09; 安装和管理依赖&#xff1a; npm 是 Node.js 官方的包管理工具&#xff0c;用于安装和管理项目的依赖包。工作原理&#xff1a…
阅读更多...
LED显示屏技术背后的隐患

LED显示屏技术背后的隐患

你知道LED显示屏技术背后隐患分析吗?在户外媒体市场&#xff0c;凭借本身发光亮度强且支持自动亮度调节&#xff0c;在可视距离内阳光直射屏幕表面时显示内容依然清晰可见等优势&#xff0c;LED显示屏成为备受青睐的显示终端&#xff0c;然而&#xff0c;“成也亮度&#xff0…
阅读更多...
深度学习入门（五）：有监督学习

深度学习入门（五）：有监督学习

一、逻辑回归 逻辑回归&#xff08;Logistic Regression&#xff09;是一种广泛使用的分类算法&#xff0c;以作者的理解&#xff0c;它是在线性回归【线性回归&#xff1a;拟合一条最接近自变量X与因变量Y关系的直线&#xff0c;线性回归可预测连续值】的基础上添加了一个逻辑…
阅读更多...
朵拉朵尚：不断探索与尝试 创新营销模式

朵拉朵尚：不断探索与尝试 创新营销模式

朵拉朵尚&#xff1a;不断探索与尝试 创新营销模式 如今是传统国货和新锐品牌的崛起,其中以朵拉朵尚为代表的国货美妆品牌,从原料、配方、生产等多个维度发力,提升产品质量与品牌口碑,成为国货品质的代表。随着实体销售逐渐走低,在百年不遇之大变局时代下,朵拉朵尚创始人李海珍…
阅读更多...
未来已来：全方位掌握【人工智能】的系统学习路线

未来已来：全方位掌握【人工智能】的系统学习路线

目录 前言 第一部分&#xff1a;基础知识 1. 数学基础 1.线性代数 2.微积分 3.概率与统计 4.离散数学 2. 计算机基础 1.编程语言 2.数据结构和算法 3.计算机体系结构 第二部分&#xff1a;核心技术 1. 机器学习 1.监督学习 2.无监督学习 3.强化学习 2. 深度学…
阅读更多...
大模型对任务型对话的作用

大模型对任务型对话的作用

大模型的多轮&#xff0c;我们一般想到的方案都是比较大胆地把历史记录都交给大模型让大模型来做生成&#xff0c;这个在比较自由、开放的聊天中&#xff0c;肯定是有效的&#xff0c;但是在实际场景中&#xff0c;我们往往希望模型能够在一定程度控制对话的流程&#xff0c;我…
阅读更多...
深度学习入门（三）：一些需要多加复习的知识

深度学习入门（三）：一些需要多加复习的知识

正负样本 在机器学习和特别是在分类任务中&#xff0c;正样本和负样本是相对于某一分类目标而言的&#xff0c;通常在二分类问题&#xff08;yes or no&#xff09;中&#xff0c;分类后想要的类别就是正样本&#xff0c;其他均为负样本&#xff01;&#xff01;&#xff01; …
阅读更多...
Java学习笔记（十八）：实现多线程、线程同步、阻塞队列基本使用、线程池、多线程综合练习、原子性、并发工具类

Java学习笔记（十八）：实现多线程、线程同步、阻塞队列基本使用、线程池、多线程综合练习、原子性、并发工具类

目录 一、实现多线程 1.1简单了解多线程【理解】 1.2并发和并行【理解】 1.3进程和线程【理解】 1.4实现多线程方式一&#xff1a;继承Thread类【应用】 1.5实现多线程方式二&#xff1a;实现Runnable接口【应用】 1.6实现多线程方式三: 实现Callable接口【应用】 1.7设…
阅读更多...
选择一家正规的指挥中心控制台厂家有多重要?

选择一家正规的指挥中心控制台厂家有多重要?

在当今信息化高速发展的时代&#xff0c;指挥中心作为各类应急响应、调度管理、监控预警的核心枢纽&#xff0c;其高效运行与决策能力直接关系到社会安全、城市管理乃至国家战略的顺利实施。而指挥中心控制台作为这一体系中的关键基础设施&#xff0c;其设计、制造与安装显得尤…
阅读更多...
成都跃享未来教育咨询抖音小店成为领域的新锐力量

成都跃享未来教育咨询抖音小店成为领域的新锐力量

在数字化浪潮席卷全球的今天&#xff0c;教育行业也迎来了前所未有的变革与机遇。成都&#xff0c;这座历史悠久而又充满活力的城市&#xff0c;正以其独特的魅力和创新的精神&#xff0c;孕育着教育咨询行业的新篇章。其中&#xff0c;成都跃享未来教育咨询凭借其敏锐的洞察力…
阅读更多...
密码学基础 -- RSA加密、签名填充模式解析(终极图解版)

密码学基础 -- RSA加密、签名填充模式解析(终极图解版)

目录 1. OAEP 1.1 加密过程 1.2 解密过程 2 PSS 2.1 签名流程 2.2 验签流程 3.小结 1. OAEP 填充模式OAEP(Optimal Asymmetric Encryption Padding)&#xff0c;仅用于加解密。 1.1 加密过程 使用该填充模式进行加密总共分为三大步骤&#xff1a; &#xff08;1&…
阅读更多...
21世纪中国思想家姓名学大师颜廷利：世界最具影响力的华人之一

21世纪中国思想家姓名学大师颜廷利：世界最具影响力的华人之一

21世纪中国思想家姓名学大师颜廷利&#xff1a;世界最具影响力的华人之一 在2024年的世界姓名学界&#xff0c;颜廷利教授无疑是一颗耀眼的星星。他的名字频繁出现在各大排行榜上&#xff0c;被誉为网上最靠谱的改名大师之一。这位来自山东济南的文化名人&#xff0c;凭借其深…
阅读更多...
TVS管(瞬态电压抑制二极管)的了解

TVS管(瞬态电压抑制二极管)的了解

TVS即Transient Volatge Suppressor&#xff0c;中文名称&#xff1a;瞬态电压抑制二极管&#xff0c;又称雪崩击穿二极管。但在通常情况下&#xff0c;我们称之为TVS二极管。其在电路中的作用主要是保护敏感电路&#xff0c;免受高电压瞬变损坏的组件。其中&#xff0c;大部分…
阅读更多...
【python】Django运行报错分析：ImproperlyConfigured 错误解决办法

【python】Django运行报错分析：ImproperlyConfigured 错误解决办法

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
docker安装及使用

docker安装及使用

一、docker优点及作用 优点&#xff1a; 基础镜像MB级别创建简单隔离性强启动速度秒级移植与分享放便 作用&#xff1a;资源隔离 cpu、memory资源隔离与限制访问设备隔离与限制网络隔离与限制用户、用户组隔离限制 二、docker安装 2.1.配置yum源 yum install -y yum-uti…
阅读更多...
sheng的学习笔记-AI-k近邻学习（kNN)

sheng的学习笔记-AI-k近邻学习（kNN)

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 什么是k近邻学习 k近邻&#xff08;k-Nearest Neighbor&#xff0c;简称kNN&#xff09;学习是一种常用的监督学习方法&#xff0c;是一种基本的分类与回归方法。 分类问题&#xff1a;对新的样本&#xff0c;根据其 k 个…
阅读更多...
aiOla推出超快 “多头 “语音识别模型，击败OpenAI Whisper

aiOla推出超快 “多头 “语音识别模型，击败OpenAI Whisper

今天&#xff0c;以色列人工智能初创公司 aiOla 宣布推出一种新的开源语音识别模型&#xff0c;其速度比 OpenAI 著名的 Whisper 快 50%。 该模型被正式命名为 Whisper-Medusa&#xff0c;它建立在 Whisper 的基础上&#xff0c;但使用了一种新颖的 "多头关注 "架构…
阅读更多...
为什么企业越来越看重懂管理的网络安全人才？

为什么企业越来越看重懂管理的网络安全人才？

说实话&#xff0c;要是几年前有人跟我说网安人才还得懂管理&#xff0c;我可能会嗤之以鼻。网安不就是搞技术的吗&#xff1f;整天跟漏洞、防火墙、IDS打交道&#xff0c;为啥又扯到管理了&#xff1f; 但是仔细一想&#xff0c;好像时代确实变了。 由于现在的就业局势紧迫&a…
阅读更多...
通过高德JS API 实现呼吸点

通过高德JS API 实现呼吸点

效果图： 核心代码： <script lang="ts" setup>import { onMounted, onUnmounted, ref } from vue;import AMapLoader from @amap/amap-jsapi-loader;import redImage from @/assets/images/red.png;import orangeImage from @/assets/images/orange.png;impo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023