20.[前端开发]Day20-王者荣耀项目实战(三)

01_(掌握)王者荣耀-main-赛事新闻列表实现

<!DOCTYPE html>
<html lang="zh-CN">
<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>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/video.css">
  <style>
    .main .section-content {
      display: flex;
      justify-content: space-between;
    }

    .main .section-content .left-content {
      width: 872px;
      height: 1000px;
    }

    .main .match-center .match-news {
      display: flex;
      height: 260px;
      margin: 20px 0 15px;
    }

    .main .match-center .match-news .news-left {
      width: 211px;
      background-color: orange;
    }

    .main .match-center .match-news .news-right {
      flex: 1;
      overflow: hidden;
      padding: 0 15px;
    }

    .main .match-center .news-right .title {
      font-size: 24px;
      color: #333;
      padding-right: 80px;
    }

    .main .match-center .news-right .subtitle {
      padding-right: 160px;
      color: #666;
    }

    .main .match-center .news-right .news-list .item {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .main .match-center .news-right .news-list .item .desc {
      flex: 1;
      padding-right: 50px;
    }

    .main .match-center .news-right .news-list .item .desc:hover {
      text-decoration: underline;
    }

    .main .match-center .news-right .news-list .item .date {
      font-size: 12px;
      color: #b8b9c5;
    }

    /* right-content */
    .main .section-content .right-content {
      width: 295px;
      height: 500px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="section-content">
      <div class="left-content">
        <div class="content-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title">内容中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item active">精品栏目</div>
            <div class="line"></div>
            <div class="item">赛事精品</div>
            <div class="line"></div>
            <div class="item">英雄攻略</div>
          </div>
          <div class="tab_keyword">
            <div class="item active">最新</div>
            <div class="item">马菠萝奇闻录</div>
            <div class="item">马菠萝奇</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
          </div>

          <div class="video_list">
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
          </div>

        </div>
        <div class="match-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title title-icon-match">赛事中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item item_wrap active">KPL</div>
            <div class="line"></div>
            <div class="item item_wrap">挑战者杯</div>
            <div class="line"></div>
            <div class="item item_wrap">K甲联赛</div>
            <div class="line"></div>
            <div class="item item_wrap">城市赛</div>
            <div class="line"></div>
            <div class="item item_wrap">高校联赛</div>
            <div class="line"></div>
            <div class="item item_wrap">TGA</div>
            <div class="line"></div>
            <div class="item item_wrap">微信游戏邀请赛</div>
            <div class="line"></div>
          </div>

          <div class="match-news">
            <a class="news-left" href="#">
              <img src="./img/match_01.jpg" alt="">
            </a>
            <div class="news-right">
              <div class="title nowrap_ellipsis">
                K甲季后赛回顾：镇江VTG、火豹会师总决赛，MD止步四强总决赛，MD止步四强
              </div>
              <div class="subtitle nowrap_ellipsis">
                2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
              </div>
              <ul class="news-list">
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
              </ul>
            </div>
          </div>
          
          <div class="video_list">
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="right-content"></div>
    </div>
  </div>

</body>
</html>

02_(掌握)王者荣耀-main-hero区域头部实现

基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<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>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/video.css">
  <style>
    .main .section-content {
      display: flex;
      justify-content: space-between;
    }

    .main .section-content .left-content {
      width: 872px;
      height: 1000px;
    }

    .main .section-content .right-content {
      width: 295px;
      height: 500px;
    }


  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="section-content">
      <div class="left-content"></div>
      <div class="right-content">

      </div>
    </div>
  </div>

</body>
</html>

接下来要做的

同之前封装好的样式

更改英雄左边的图标

接下来，做这个

03_(掌握)王者荣耀-main-hero新英雄展示

做这个：

做这个：

04_(掌握)王者荣耀-main-hero英雄列表展示

注意，如果a元素作为容器，最好改为block

接下来我们要做遮盖层效果：

文字居中效果：

再考虑，两个字垂直排列的：

只有鼠标放上去才会被cover：

给所有的li加遮盖层

05_(掌握)王者荣耀-main-kpl赛程头部展示

接下来做：

先做这个：

06_(掌握)王者荣耀-main-kpl赛程安排展示

接下来，做这个：

先做这个：

接下来做这个：

07_(掌握)王者荣耀-hover状态显示的嵌套逻辑

08_(掌握)王者荣耀-top广告的展示和隐藏

  弹出图片

09_(掌握)王者荣耀-top排行榜展示过程

10_(掌握)王者荣耀-header下拉菜单的展示

高度从0到285，并还有动画。

11_(掌握)王者荣耀-header下拉菜单内容展示

12_(掌握)王者荣耀-right-nav的整体搭建

接下来，做这个：

目前的效果

13_(掌握)王者荣耀-right-nav导航列表展示

<!DOCTYPE html>
<html lang="zh">
<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/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .right-nav {
      position: fixed;
      top: 50%;
      transform: translate(0, -50%);
      /* margin-top: -240px; */
      right: 0;
      width: 254px;
      height: 494px;
      background: url(./img/right_nav_bg.png) no-repeat;
    }

    /* .right-nav .right-dj {

    } */

    .right-nav .right-list {
      position: relative;
      left: 60px;
    }

    .right-nav .right-list .item {
      width: 117px;
      height: 38px;
      background: url(./img/right_all.png) no-repeat;
    }

    .right-nav .right-list .item a {
      display: block;
      height: 100%;
    }

    .right-nav .right-list .item.code {
      height: 116px;
      text-align: center;
      background-position: 0 -3px;
    }

    .right-nav .right-list .item.code img {
      width: 111px;
      height: 110px;
      margin-top: 3px;
    }

    .right-nav .right-list .item.weibo {
      background-position: -122px -120px;
    }

    .right-nav .right-list .item.weibo:hover {
      background-position: -122px -240px;
    }

    .right-nav .right-list .item.gzh {
      background-position: -122px -160px;
    }

    .right-nav .right-list .item.gzh:hover {
      background-position: -122px -200px;
    }

    .right-nav .right-list .item.sph {
      background-position: -122px 0;
    }

    .right-nav .right-list .item.sph:hover {
      background-position: -122px -42px;
    }
  </style>
</head>
<body>
  
  <div class="right-nav">
    <div class="right-dj">
      <img src="./img/right_dj.png" alt="">
    </div>

    <ul class="right-list">
      <li class="item code">
        <img src="./img/right_code.webp" alt="">
      </li>
      <li class="item weibo">
        <a href="#"></a>
      </li>
      <li class="item gzh">
        <a href="#"></a>
      </li>
      <li class="item sph">
        <a href="#"></a>
      </li>
    </ul>

  </div>

</body>
</html>

14_(掌握)王者荣耀-模块合并过程01

15_(掌握)王者荣耀-模块合并过程02

index.html

16_(掌握)王者荣耀-整站补充-meta元素

meta元素

meta元素的http-equiv属性

meta元素的name属性

17_(掌握)王者荣耀-整站补充-link和charset

link图标

CSS样式的字符编码

总结

六. 英雄/皮肤

6.1. header/tab_control

6.2. 新英雄展示

6.3. 英雄列表(文字垂直)

七. 赛事安排

7.1. header

7.2. 对战安排

  • table/thead/tbody/tr/td

八. top中展示效果

8.1. 英雄联盟广告

8.2. 游戏排行榜(iframe)

九. header展示效果

9.1. 下拉菜单(height动画)

9.2. 菜单内容(小图标)

十. 右侧导航(fixed)

十一. 合并整个网站

11.1. top/header/main

  • 背景图

  • 超链接

  • 新闻

  • 入口

11.2. content-section

  • left-content

  • right-content

十二. 整站补充

12.1. meta元数据

12.2. link元素

12.3. CSS字符编码

@charset "UTF-8";

六. 页面footer(后天必须做)

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Langchain学习笔记（一）】Langchain介绍

【Langchain学习笔记（一）】Langchain介绍

Langchain介绍 Langchain介绍前言1、Langchain 是什么2、为什么要用 Langchain3、Langchain 的核心4、Langchain 的底层原理5、Langchain 的应用场景 Langchain介绍 前言 想象一下&#xff0c;如果你能让聊天机器人不仅仅回答通用问题&#xff0c;还能从你自己的数据库或文件…
阅读更多...
IDEA2024版本创建Sping项目无法选择Java 8

IDEA2024版本创建Sping项目无法选择Java 8

目录 一、背景二、解决方式&#xff08;替换创建项目的源地址&#xff09; 一、背景 IDEA2024创建一个springboot的项目&#xff0c;本地安装的是1.8&#xff0c;但是在使用Spring Initializr创建项目时&#xff0c;发现版本只有17、21、23。 二、解决方式&#xff08;替换创…
阅读更多...
C++11（四）

C++11（四）

目录 包装器 function包装器 bind绑定 更改实参传递的顺序和实参传递的个数 线程库 本期我们将继续进行C11新特性的学习。 包装器 function包装器 function包装器&#xff0c;我们也称之为适配器&#xff0c;本质上就是一个类模板&#xff0c;为什么要引入function包…
阅读更多...
MySQL 数据库编程-C++

MySQL 数据库编程-C++

目录 1 数据库基本知识 1.1 MYSQL常见命令 1.2 SQL注入 1.3 ORM框架 1 数据库基本知识 MySQL 为关系型数据库(Relational Database Management System), 这种所谓的"关系型"可以理解为"表格"的概念, 一个关系型数据库由一个或数个表格组成&#xff1a…
阅读更多...
【算法篇】贪心算法

【算法篇】贪心算法

目录 贪心算法 贪心算法实际应用 一&#xff0c;零钱找回问题 二&#xff0c;活动选择问题 三&#xff0c;分数背包问题 将数组和减半的最小操作次数 最大数 贪心算法 贪心算法&#xff0c;是一种在每一步选择中都采取当前状态下的最优策略&#xff0c;期望得到全局最优…
阅读更多...
5 计算机网络

5 计算机网络

5 计算机网络 5.1 OSI/RM七层模型 5.2 TCP/IP协议簇 5.2.1:常见协议基础 一、 TCP是可靠的&#xff0c;效率低的&#xff1b; 1.HTTP协议端口默认80&#xff0c;HTTPSSL之后成为HTTPS协议默认端口443。 2.对于0~1023一般是默认的公共端口不需要注册&#xff0c;1024以后的则需…
阅读更多...
动态规划LeetCode-1035.不相交的线

动态规划LeetCode-1035.不相交的线

在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数。 现在&#xff0c;可以绘制一些连接两个数字 nums1[i] 和 nums2[j] 的直线&#xff0c;这些直线需要同时满足&#xff1a; nums1[i] nums2[j]且绘制的直线不与任何其他连线&#xff08;非水平线&#xff09;相…
阅读更多...
禅道社区版项目管理软件部署（记录篇）

禅道社区版项目管理软件部署（记录篇）

系统要求&#xff08;这里推荐使用docker容器化方式&#xff09;安装前的准备Docker快速安装最后通过查看地址验证是否部署成功开始界面化安装配置 禅道&#xff08;ZenTao&#xff09;是一款国产开源的项目管理软件&#xff0c;专注于敏捷开发流程&#xff0c;支持 Scrum 和 K…
阅读更多...
数据结构-基础

数据结构-基础

1、概念&#xff1a; 程序 数据结构 算法 2、程序的好坏 可读性&#xff0c;稳定性&#xff0c;扩展性&#xff0c;时间复杂度&#xff0c;空间复杂度。 3、数据结构 是指存储、组织数据的方式&#xff0c;以便高效地进行访问和修改。通过选择适当的数据结构&#xff0c; 能…
阅读更多...
从零开始：OpenCV 图像处理快速入门教程

从零开始：OpenCV 图像处理快速入门教程

文章大纲 第1章 OpenCV 概述 1.1　OpenCV的模块与功能　 1.2 OpenCV的发展 1.3 OpenCV的应用 第2章 基本数据类型 2.1 cv::Vec类 2.2 cv&#xff1a;&#xff1a;Point类 2.3 cv&#xff1a;&#xff1a;Rng类 2.4 cv&#xff1a;&#xff1a;Size类 2.5 cv&#xff1a;&…
阅读更多...
1-kafka服务端之延时操作前传--时间轮

1-kafka服务端之延时操作前传--时间轮

文章目录 背景时间轮层级时间轮时间轮降级kafka中的时间轮kafka如何进行时间轮运行 背景 Kafka中存在大量的延时操作&#xff0c;比如延时生产、延时拉取和延时删除等。Kafka并没有使用JDK自带的Timer或DelayQueue来实现延时的功能&#xff0c;而是基于时间轮的概念自定义实现…
阅读更多...
Java 注解使用教程

Java 注解使用教程

简介 Java 1.5 引入了注解&#xff0c;现在它在 Java EE 框架&#xff08;如 Hibernate、Jersey 和 Spring &#xff09;中被大量使用。Java 注释是该语言的一个强大特性&#xff0c;用于向 Java 代码中添加元数据。它们不直接影响程序逻辑&#xff0c;但可以由工具、库或框架…
阅读更多...
第17章 读写锁分离设计模式(Java高并发编程详解：多线程与系统设计)

第17章 读写锁分离设计模式(Java高并发编程详解：多线程与系统设计)

1.场景描述 对资源的访问一般包括两种类型的动作——读和写(更新、删除、增加等资源会发生变化的动作)&#xff0c;如果多个线程在某个时刻都在进行资源的读操作&#xff0c;虽然有资源的竞争&#xff0c;但是这种竞争不足以引起数据不一致的情况发生&#xff0c;那么这个时候…
阅读更多...
强化学习 DAY1：什么是 RL、马尔科夫决策、贝尔曼方程

强化学习 DAY1：什么是 RL、马尔科夫决策、贝尔曼方程

第一部分 RL基础&#xff1a;什么是RL与MRP、MDP 1.1 入门强化学习所需掌握的基本概念 1.1.1 什么是强化学习&#xff1a;依据策略执行动作-感知状态-得到奖励 强化学习里面的概念、公式&#xff0c;相比ML/DL特别多&#xff0c;初学者刚学RL时&#xff0c;很容易被接连不断…
阅读更多...
【STM32系列】利用MATLAB配合ARM-DSP库设计FIR数字滤波器（保姆级教程）

【STM32系列】利用MATLAB配合ARM-DSP库设计FIR数字滤波器（保姆级教程）

ps.源码放在最后面 设计IIR数字滤波器可以看这里&#xff1a;利用MATLAB配合ARM-DSP库设计IIR数字滤波器&#xff08;保姆级教程&#xff09; 前言 本篇文章将介绍如何利用MATLAB与STM32的ARM-DSP库相结合&#xff0c;简明易懂地实现FIR低通滤波器的设计与应用。文章重点不在…
阅读更多...
DeepSeek-R1 本地电脑部署 Windows系统 【轻松简易】

DeepSeek-R1 本地电脑部署 Windows系统 【轻松简易】

本文分享在自己的本地电脑部署 DeepSeek&#xff0c;而且轻松简易&#xff0c;快速上手。 这里借助Ollama工具&#xff0c;在Windows系统中进行大模型部署~ 1、安装Ollama 来到官网地址&#xff1a;Download Ollama on macOS 点击“Download for Windows”下载安装包&#x…
阅读更多...
Llama最新开源大模型Llama3.1

Llama最新开源大模型Llama3.1

Meta公司于2024年7月23日发布了最新的开源大模型Llama 3.1&#xff0c;这是其在大语言模型领域的重要进展。以下是关于Llama 3.1的详细介绍&#xff1a; 参数规模与训练数据 Llama 3.1拥有4050亿&#xff08;405B&#xff09;参数&#xff0c;是目前开源领域中参数规模最大的…
阅读更多...
Linux之安装docker

Linux之安装docker

一、检查版本和内核是否合格 Docker支持64位版本的CentOS 7和CentOS 8及更高版本&#xff0c;它要求Linux内核版本不低于3.10。 检查版本 cat /etc/redhat-release检查内核 uname -r二、Docker的安装 1、自动安装 Docker官方和国内daocloud都提供了一键安装的脚本&#x…
阅读更多...
2022年全国职业院校技能大赛网络系统管理赛项模块A：网络构建（样题3）-网络部分解析-附详细代码

2022年全国职业院校技能大赛网络系统管理赛项模块A：网络构建（样题3）-网络部分解析-附详细代码

目录 附录1：拓扑图 附录2：地址规划表 1.SW1 2.SW2 3.SW3 4.SW4 5.SW5 6.SW6 7.SW7 8.R1 9.R2 10.R3 11.AC1 12.AC2 13.AP2 14.AP3 15.EG1 16.EG2 附录1：拓扑图 附录2：地址规划表 设备
阅读更多...
Vim跳转文件及文件行结束符EOL

Vim跳转文件及文件行结束符EOL

跳转文件 gf 从当前窗口打开那个文件的内容&#xff0c;操作方式&#xff1a;让光标停在文件名上&#xff0c;输入gf。 Ctrlo 从打开的文件返回之前的窗口 Ctrlwf 可以在分割的窗口打开跳转的文件&#xff0c;不过在我的实验不是次次都成功。 统一行尾格式 文本文件里存放的…
阅读更多...
最新文章

Copyright @ 2022~2023