前端实战项目：网易云静态页面——轮播图

news2024/11/16 12:38:21

前言

目前这个前端项目持续更新中~
网易云静态页面——导航栏
Flex布局

文章目录

  • 前言
  • 实现目标
  • 静态实现
    • 页面大致样子
    • 添加模糊的背景图
    • 添加图片
    • 下载客户端部分
    • 轮播图小圆点
    • 第一个小圆点变成红色以及当鼠标放上其他任一小圆点也变成红色
    • 左右按钮
    • 总代码
  • 动态实现

实现目标

在这里插入图片描述
建立相关文件夹及文件
在这里插入图片描述

banner.html是网页结构的部分
banner.css是网页主要的样式
reset.css是网页重置的一些样式

本篇文章用到的图片均来自网易云原网页。

该部分主要由以下几个部分组成：

  • 背景（banner）
  • 内容（content）
  • 左边内容轮播图部分（left）
  • 右边内容下载客户端部分（right）

具体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/banner.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>
<body>
    <div class="banner">
        <div class="content">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</body>
</html>

静态实现

页面大致样子

添加css代码：

/* reset */
body{
    padding: 0;
    margin: 0;
}

/* banner */
.banner{
    height: 285px;
    background-color: antiquewhite;
}

.content{
    /* 作为flex container开启弹性布局，目的是为了让left和right排列在一行 */
    display: flex;
    width: 984px;
    /* 上下外边距为0，左右自适应，也就是让它自动居中 */
    margin: 0 auto;
}

.content .left{
    height: 285px;
    width: 730px;
    background-color: aqua;
}

.content .right{
    height: 285px;
    width: 254px;
    background-color: aquamarine;
}

显示如下：在这里插入图片描述

添加模糊的背景图

在网易云原网站可以看到，每切换一张图片，它的背景图也跟着切换。下面随机选一张图片及其背景图。

图片：在这里插入图片描述
背景：在这里插入图片描述

.banner{
    height: 285px;
    /* 添加背景 */
    background-image: url(../images/0.jpeg);
    /* 让其处于中心位置 */
    background-position: center center;
    /* 将图片放大，也就是让两边更加模糊 */
    background-size: 6000px;
}

显示如下：在这里插入图片描述

添加图片

            <div class="left">
                <ul class="piclist">
                    <li><a href="#" class="pic"><img src="./images/1-1.jpeg"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                </ul>
            </div>

/* reset */
body,ul,li{
    padding: 0;
    margin: 0;
}

ul{
    list-style: none;
}

/* banner */
.content .left .piclist .pic img{
    /* 调整图片大小 */
    width: 730px;
}

同时删除left的背景颜色

显示如下：在这里插入图片描述

下载客户端部分

需要用到原网页中的一张图片：
在这里插入图片描述
在原网页中，当我们鼠标放在下载客户端时，它的颜色会变暗一点点，这个效果就是用上面两张图片做成的，可以发现下面那个下载客户端明显要暗一点。

整个right就是上面那个背景，然后下载客户端那里是一个a标签（放上鼠标会显示小手）。

            <div class="right"><a href="#">下载客户端</a></div>

/* banner */
.content .right{
    background: url(../images/download1.png);
}

.content .right a{
    /* 将这个a标签改为块级元素从而可以设置其宽高 */
    display: block;
    /* 设置宽高及外边距是为了将这个a标签与背景图中的下载客户端贴合 */
    width: 215px;
    height: 56px;
    margin: 186px 0 0 19px;
}

显示如下：在这里插入图片描述
然后让文字消失并重置a标签的样式

/* banner */
.content .right a{
    /* 将这个a标签改为块级元素从而可以设置其宽高 */
    display: block;
    /* 设置宽高及外边距是为了将这个a标签与背景图中的下载客户端贴合 */
    width: 215px;
    height: 56px;
    margin: 186px 0 0 19px;
    /* 让文字消失 */
    text-indent: -9999px;
}

/* reset */
a{
    text-decoration: none;
}

这时“下载客户端”这段文字就消失了。

同时添加下面代码，当鼠标放在a标签那部分时颜色就会变暗。

.content .right a:hover{
    background: url(../images/download1.png) 0 -290px;
}

然后就是下载客户端下面那行字：

            <div class="right">
                <a href="#">下载客户端</a>
                <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>

.content .right p{
    font-size: 12px;
    color: #8d8d8d;
    margin: 10px auto;
    /* 居中 */
    text-align: center;
}

显示如下：
在这里插入图片描述

轮播图小圆点

            <div class="left">
                <ul class="piclist">
                    <li><a href="#" class="pic"><img src="./images/1-1.jpeg"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                </ul>
                <ul class="dotlist">
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                </ul>
            </div>

添加css样式让其可视化并移动至相应的位置

.content .left{
    position: relative;
    height: 285px;
    width: 730px;
}

.content .left .dotlist{
    /* 浮动布局，让所有li元素在一行排列 */
    display: flex;
    /* 让这个小圆点列表可视化 */
    width: 200px;
    height: 20px;
    background-color: red;
    /* 绝对定位后，让其偏移到相应位置（注意绝对定位是相对的，要先设置其父元素为相对定位 */
    position: absolute;
    /* 距离left底部5px */
    bottom: 5px;
    /* 居中 */
    left: 0;
    right: 0;
    margin: 0 auto;
}

显示如下：在这里插入图片描述
下面删除让其可视化部分的css代码。

原网页中的小圆点及后面的按钮等都是是通过下面这张图片来实现的：
在这里插入图片描述

.content .left .dotlist{
    /* 浮动布局，让所有li元素在一行排列 */
    display: flex;
    /* 绝对定位后，让其偏移到相应位置（注意绝对定位是相对的，要先设置其父元素为相对定位 */
    position: absolute;
    /* 距离left底部5px */
    bottom: 5px;
    /* 居中 */
    left: 0;
    right: 0;
    margin: 0 auto;
    /* 上面那个居中是dotlist这个列表相对于left的居中，这里的center是dotlist的子元素相对于dotlist居中 */
    justify-content: center;
}

.content .left .dotlist .dot{
    /* 将a标签转换成块级元素，从而可以设置宽高 */
    display: block;
    /* 设置每个小圆点的边距 */
    margin: 0 2px;
    width: 20px;
    height: 20px;
    /* 给每个a标签换一个背景图，这个背景图就是白色小圆点 */
    background: url(../images/lunbotu.png) 3px -343px;
}

显示如下：在这里插入图片描述

第一个小圆点变成红色以及当鼠标放上其他任一小圆点也变成红色

第一个小圆点变成红色只需单独为其设置一个样式即可

                <ul class="dotlist">
                    <li><a href="#" class="dot active"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                </ul>

.content .left .dotlist .dot.active,
.content .left .dotlist .dot:hover{
    background: url(../images/lunbotu.png) -16px -343px;
}

页面如下：在这里插入图片描述

左右按钮

左右按钮用a便签来实现，将其变成块级元素，并给上一个背景图

        <div class="content">
            <div class="left">
                <ul class="piclist">
                    <li><a href="#" class="pic"><img src="./images/1-1.jpeg"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                </ul>
                <ul class="dotlist">
                    <li><a href="#" class="dot active"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                </ul>
            </div>
            <div class="right">
                <a href="#">下载客户端</a>
                <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>
            <a href="#" class="button left-btn">left</a>
            <a href="#" class="button right-btn">right</a>
        </div>

.content .button{
    /* 变成块级元素 */
    display: block;
    width: 37px;
    height: 63px;
    /* 绝对定位，使其定位到相应的位置，同时设置content为相对定位 */
    position: absolute;
    /* 居中显示 */
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.content .left-btn{
    /* 让它到content的外面去 */
    left: -68px;
    background: url(../images/lunbotu.png) 0 -360px;
}

.content .right-btn{
    right: -68px;
    background: url(../images/lunbotu.png) 0 -508px;
}

页面如下：
在这里插入图片描述
删除a便签里的文本内容，同时在原网页中，当我们把鼠标放上左右按钮时，它们的背景会变暗一点，这同样是通过设置一个背景图来实现的。

.content .left-btn:hover{
    background: url(../images/lunbotu.png) 0 -430px;
}

.content .right-btn:hover{
    background: url(../images/lunbotu.png) 0 -578px;
}

页面如下：
在这里插入图片描述
到这里整个轮播图的静态页面就制作完成了，因为我之前做过轮播图，所以在这里也就当一个练习做一下。

总代码

  1. banner.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/banner.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>
<body>
    <div class="banner">
        <div class="content">
            <div class="left">
                <ul class="piclist">
                    <li><a href="#" class="pic"><img src="./images/1-1.jpeg"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                </ul>
                <ul class="dotlist">
                    <li><a href="#" class="dot active" data="0"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                    <li><a href="#" class="dot"></a></li>
                </ul>
            </div>
            <div class="right">
                <a href="#">下载客户端</a>
                <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>
            <a href="#" class="button left-btn"></a>
            <a href="#" class="button right-btn"></a>
        </div>
    </div>
</body>
</html>
  1. banner.css
.banner{
    height: 285px;
    /* 添加背景 */
    background-image: url(../images/0.jpeg);
    /* 让其处于中心位置 */
    background-position: center center;
    /* 将图片放大，也就是让两边更加模糊 */
    background-size: 6000px;
}

.content{
    position: relative;
    /* 作为flex container开启弹性布局，目的是为了让left和right排列在一行 */
    display: flex;
    width: 984px;
    /* 上下外边距为0，左右自适应，也就是让它自动居中 */
    margin: 0 auto;
}

.content .left{
    position: relative;
    height: 285px;
    width: 730px;
}

.content .right{
    height: 285px;
    width: 254px;
}

.content .left .piclist .pic img{
    /* 调整图片大小 */
    width: 730px;
}

.content .right{
    background: url(../images/download1.png);
}

.content .right a{
    /* 将这个a标签改为块级元素从而可以设置其宽高 */
    display: block;
    /* 设置宽高及外边距是为了将这个a标签与背景图中的下载客户端贴合 */
    width: 215px;
    height: 56px;
    margin: 186px 0 0 19px;
    /* 让文字消失 */
    text-indent: -9999px;
}

.content .right a:hover{
    background: url(../images/download1.png) 0 -290px;
}

.content .right p{
    font-size: 12px;
    color: #8d8d8d;
    margin: 10px auto;
    /* 居中 */
    text-align: center;
}

.content .left .dotlist{
    /* 浮动布局，让所有li元素在一行排列 */
    display: flex;
    /* 绝对定位后，让其偏移到相应位置（注意绝对定位是相对的，要先设置其父元素为相对定位 */
    position: absolute;
    /* 距离left底部5px */
    bottom: 5px;
    /* 居中 */
    left: 0;
    right: 0;
    margin: 0 auto;
    /* 上面那个居中是dotlist这个列表相对于left的居中，这里的center是dotlist的子元素相对于dotlist居中 */
    justify-content: center;
}

.content .left .dotlist .dot{
    /* 将a标签转换成块级元素，从而可以设置宽高 */
    display: block;
    /* 设置每个小圆点的边距 */
    margin: 0 2px;
    width: 20px;
    height: 20px;
    /* 给每个a标签换一个背景图，这个背景图就是白色小圆点 */
    background: url(../images/lunbotu.png) 3px -343px;
}

.content .left .dotlist .dot.active,
.content .left .dotlist .dot:hover{
    background: url(../images/lunbotu.png) -16px -343px;
}

.content .button{
    /* 变成块级元素 */
    display: block;
    width: 37px;
    height: 63px;
    /* 绝对定位，使其定位到相应的位置，同时设置content为相对定位 */
    position: absolute;
    /* 居中显示 */
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.content .left-btn{
    /* 让它到content的外面去 */
    left: -68px;
    background: url(../images/lunbotu.png) 0 -360px;
}

.content .right-btn{
    right: -68px;
    background: url(../images/lunbotu.png) 0 -508px;
}

.content .left-btn:hover{
    background: url(../images/lunbotu.png) 0 -430px;
}

.content .right-btn:hover{
    background: url(../images/lunbotu.png) 0 -578px;
}
  1. reset.css
body,ul,li{
    padding: 0;
    margin: 0;
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}

动态实现

之前写过一篇关于轮播图的文章，这里就当自己练习一下了，直接给出总代码

  1. 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/banner.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>
<body>
    <div class="banner">
        <div class="content">
            <div class="left">
                <ul class="piclist">
                    <li><a href="#" class="pic"><img src="./images/1-1.jpeg"></a></li>
                    <li><a href="#" class="pic up"><img src="./images/2-2.jpeg"></a></li>
                    <li><a href="#" class="pic"><img src="./images/3-3.jpeg"></a></li>
                    <li><a href="#" class="pic"><img src="./images/4-4.jpeg"></a></li>
                    <li><a href="#" class="pic"><img src="./images/5-5.jpeg"></a></li>
                    <li><a href="#" class="pic"><img src="./images/6-6.jpeg"></a></li>
                    <li><a href="#" class="pic"><img src="./images/7-7.jpeg"></a></li>
                    <li><a href="#" class="pic"><img src="./images/8-8.jpeg"></a></li>
                    <li><a href="#" class="pic"><img src="./images/9-9.jpeg"></a></li>
                    <li><a href="#" class="pic"><img src="./images/10-10.jpeg"></a></li>
                </ul>
                <ul class="dotlist">
                    <li><a href="#" class="dot active" data="0"></a></li>
                    <li><a href="#" class="dot" data="1"></a></li>
                    <li><a href="#" class="dot" data="2"></a></li>
                    <li><a href="#" class="dot" data="3"></a></li>
                    <li><a href="#" class="dot" data="4"></a></li>
                    <li><a href="#" class="dot" data="5"></a></li>
                    <li><a href="#" class="dot" data="6"></a></li>
                    <li><a href="#" class="dot" data="7"></a></li>
                    <li><a href="#" class="dot" data="8"></a></li>
                    <li><a href="#" class="dot" data="9"></a></li>
                </ul>
            </div>
            <div class="right">
                <a href="#">下载客户端</a>
                <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>
            <a href="#" class="button left-btn"></a>
            <a href="#" class="button right-btn"></a>
        </div>
    </div>
    <script src="./banner.js"></script>
</body>
</html>
  1. css（仅给出在上面css基础上更改过的代码）
.content .left .dotlist{
    /* 浮动布局，让所有li元素在一行排列 */
    display: flex;
    /* 绝对定位后，让其偏移到相应位置（注意绝对定位是相对的，要先设置其父元素为相对定位 */
    position: absolute;
    /* 距离left底部5px */
    bottom: 5px;
    /* 居中 */
    left: 0;
    right: 0;
    margin: 0 auto;
    /* 上面那个居中是dotlist这个列表相对于left的居中，这里的center是dotlist的子元素相对于dotlist居中 */
    justify-content: center;
    /* 让小圆点处于最上面的一层 */
    z-index: 1000;
}

.content .left .piclist{
    display: flex;
    overflow: hidden;
}

.up{
    /* 设置z-index的元素一定要进行定位才行，默认值static也是不生效的 */
    z-index: 100;
}

.content .left .piclist .pic{
    position: absolute;
}
  1. js
// 获取小圆点
var dotList = document.getElementsByClassName("dot");
// 获取图片
var picList = document.getElementsByClassName("pic");
// 获取模糊背景
var bg = document.getElementsByClassName("banner");
// 获取左按钮
var btnLeft = document.getElementsByClassName("left-btn");
// 获取右按钮
var btnRight = document.getElementsByClassName("right-btn");



// 全局变量，索引
index = 0;


// 清除active、up样式
var clearUp = function(){
    for(var i = 0 ; i < dotList.length ; i++){
        dotList[i].className = "dot";
        picList[i].className = "pic";
    }
}

// 点击小圆点后相应图片和小圆点的样式改变，同时模糊的背景也改变
var goDot = function(){
    dotList[index].className = "dot active";
    picList[index].className = "pic up";
    bg[0].style.background = "url(../images/" + index + ".jpeg)";
}

// 点击小圆点触发跳转事件
for(var i = 0 ; i < dotList.length ; i++){
    dotList[i].addEventListener("click",function(){
        var dotIndex = this.getAttribute("data");
        index = dotIndex;
        clearUp();
        goDot();
        time = 0;
    })
}


// 点击左按钮跳转上一张图片
var goLast = function(){
    if(index > 0){
        index--;
    } else{
        index = 9;
    }
    clearUp()
    dotList[index].className = "dot active";
    picList[index].className = "pic up";
    bg[0].style.background = "url(../images/" + index + ".jpeg)";
}

// 点击右按钮跳转下一张图片
var goNext = function(){
    if(index < 9){
        index++;
    } else{
        index = 0;
    }
    clearUp();
    dotList[index].className = "dot active";
    picList[index].className = "pic up";
    bg[0].style.background = "url(../images/" + index + ".jpeg)";
}

// 点击左按钮触发跳转事件
btnLeft[0].addEventListener("click",function(){
    goLast();
    time = 0;
})

// 点击右按钮触发跳转事件
btnRight[0].addEventListener("click",function(){
    goNext();
    time = 0;
})


// 自动轮播，每5秒跳转到下一张图片
setInterval(function(){
    time++;
    if(time == 25){
        goNext();
        time = 0;
    }
},200)

以上就是动态实现的代码了。写到这里呢这个部分也算是结束了，如果有不足或者有代码没讲清楚的地方，欢迎大家指教或指正！

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

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

相关文章

Shift_RAM ip核的使用——ROM调用mif文件、传至Shift_RAM输出

Shift_RAM ip核的使用——ROM调用mif文件、传至Shift_RAM输出

Altera_Shift Register&#xff08;RAM-based&#xff09;ip核 前言1.创建mif文件&#xff0c;通过ROM ip核调用该mif文件1.1创建mif文件1.2顺序填充mif文件1.3创建ROM ip核调用mif文件 2.计数器读取mif文件中的数据2.1写一个0-15的循环计数器2.2实例化ROM ip核、调用计数器模块…
阅读更多...
【C++学习】类和对象--多态

【C++学习】类和对象--多态

多态的基本语法 多态是C面向对象三大特性之一 静态多态&#xff1a; 函数重载和运算符重载属于静态多态&#xff0c;复用函数名&#xff08;函数地址早绑定&#xff0c;编译阶段确定函数地址&#xff09; 动态多态&#xff1a; 派生类和虚函数实现运行时多态&#xff08;函数地…
阅读更多...
Python |浅谈爬虫的由来

Python |浅谈爬虫的由来

本文概要 本篇文章主要介绍Python爬虫的由来以及过程&#xff0c;适合刚入门爬虫的同学&#xff0c;文中描述和代码示例很详细&#xff0c;干货满满&#xff0c;感兴趣的小伙伴快来一起学习吧&#xff01; &#x1f31f;&#x1f31f;&#x1f31f;个人简介&#x1f31f;&…
阅读更多...
快速搭建一个spring入门案例及整合日志

快速搭建一个spring入门案例及整合日志

目录 环境要求 构建模块 程序开发 引入依赖 创建java类 创建配置文件 创建测试类测试 运行测试程序 程序分析 spring中配置启用Log4j2日志框架 Log4j2日志概述 引入Log4j2依赖 加入日志配置文件 测试 使用日志 环境要求 JDK&#xff1a;Java17&#xff08;Spring6要…
阅读更多...
Linux高性能服务器编程｜阅读笔记：第6章 - 高级I/O函数

Linux高性能服务器编程｜阅读笔记：第6章 - 高级I/O函数

目录 简介6.1 pipe函数6.2 dup函数和dup2函数6.3 readv函数和writev函数6.4 sendfile函数6.5 mmap函数和munmap函数6.6 splice函数6.7 tee函数6.8 fcntl函数结语 简介 Hello&#xff01; 非常感谢您阅读海轰的文章&#xff0c;倘若文中有错误的地方&#xff0c;欢迎您指出&…
阅读更多...
10-Vue技术栈之脚手架配置代理（解决跨域问题）+ GitHub用户搜索案例

10-Vue技术栈之脚手架配置代理（解决跨域问题）+ GitHub用户搜索案例

目录 1、基本使用1.1 方法一1.2 方法二 2、GitHub用户搜索案例 1、基本使用 1.1 方法一 ​ 在vue.config.js中添加如下配置&#xff1a; devServer:{proxy:"http://localhost:5000" }说明&#xff1a; 优点&#xff1a;配置简单&#xff0c;请求资源时直接发给前…
阅读更多...
用三角函数解决几何问题

用三角函数解决几何问题

如图&#xff0c;在 △ A B C \triangle ABC △ABC 中&#xff0c; A C > 5 , A B > A C AC>5,AB>AC AC>5,AB>AC&#xff0c;点 E E E 是 A B AB AB 上一点&#xff0c;链接 C E CE CE&#xff0c;将 △ B C E \triangle BCE △BCE 沿 C E CE CE 折叠&…
阅读更多...
【unity之数据持久化】-Unity公共类PlayerPrefs

【unity之数据持久化】-Unity公共类PlayerPrefs

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…
阅读更多...
FreeRTOS 内存管理

FreeRTOS 内存管理

文章目录 一、FreeRTOS 内存管理简介二、 内存碎片三、heap_1 内存分配方法1. 分配方法简介2. 内存申请函数详解3. 内存释放函数详解 四、heap_2 内存分配方法1. 分配方法简介2. 内存块详解3. 内存堆初始化函数详解4. 内存块插入函数详解5. 内存申请函数详解6. 内存释放函数详解…
阅读更多...
操作系统考试复习——第四章 4.3连续分配存储管理方式

操作系统考试复习——第四章 4.3连续分配存储管理方式

在这里的开头需要讲述一下碎片&#xff0c;碎片分为内碎片和外碎片两种。 内碎片&#xff1a;分区之内未被利用的空间外碎片&#xff1a;分区之间难以利用的空闲分区&#xff08;通常是小空闲分区&#xff09;。 连续分配存储管理方式: 为了能将用户程序装入内存&#xff0c…
阅读更多...
力扣刷题Day12_2

力扣刷题Day12_2

144.二叉树的前序遍历 测试代码main() class TreeNode:def __init__(self, valNone, leftNone, rightNone):self.val valself.left leftself.right rightfrom typing import Listclass Solution:def preorderTraversal(self, root: TreeNode) -> List[int]:s Solution…
阅读更多...
C++易错编程练习题(1)

C++易错编程练习题(1)

0 编程练习 基础不牢靠&#xff0c;回头来补课。小白这个系列主要是为了重新打基础&#xff0c;为一些常见的易错编程练习题提供记录。其间若有错误&#xff0c;欢迎指出&#xff0c;轻喷勿骂。毕竟小白确实是基础不牢靠。 1 题目 自定义函数之整数处理。 题目描述 输入10个…
阅读更多...
多视图局部共现和全局一致性学习提高乳腺图像分类的综合性

多视图局部共现和全局一致性学习提高乳腺图像分类的综合性

文章目录 Multi-view Local Co-occurrence and Global Consistency Learning Improve Mammogram Classification Generalisation摘要本文方法global consistency modulelocal co-occurrence module (LCM) 实验结果 Multi-view Local Co-occurrence and Global Consistency Lear…
阅读更多...
okio篇3-超时机制

okio篇3-超时机制

关于System.nanoTime System.currentTimeMills与System.nanoTime实际都是时间间隔&#xff0c;只不过两个时间的起始时间衡量不一致。 我们比较常用的&#xff0c;实际是System.currentTimeMills()&#xff0c;这个时间是以1970-01-01起始&#xff0c;到系统显示时间的间隔。…
阅读更多...
聚浪成潮，网易数帆CodeWave智能开发平台开启低代码新时代

聚浪成潮，网易数帆CodeWave智能开发平台开启低代码新时代

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 随着全球范围内新一代人工智能技术发展突飞猛进&#xff0c;社会各领域从数字化、网络化向智能化转变&#xff0c;如何进一步释放数据生产力、加速智能化转型已成为企业发展的必修课。 2023年4月25日&#xff0c;“网易数帆…
阅读更多...
K8S管理系统项目实战[API开发]-2

K8S管理系统项目实战[API开发]-2

后端: gogin 后端代码地址GitHub - yunixiangfeng/k8s-platform: K8s管理系统后端: gogin 5、存储与配置 5.1 ConfigMap 5.2 Secret 5.3 PersistentVolumeClaims 6、工作流 6.1 流程设计 6.2 数据库操作&#xff08;GORM&#xff09; &#xff08;1&#xff09;初始化…
阅读更多...
Mysql Sharding-JDBC读写分离 原理

Mysql Sharding-JDBC读写分离 原理

0 课程视频 深入Sharding-JDBC分库分表从入门到精通【黑马程序员】_哔哩哔哩_bilibili 1 基本概念 1.1应用逻辑 1.1.1 msyql 多库 多表 多服务器 1.1.2 通过Sharding-JDBC jar包->增强JDBC 访问多数据源 -> 自动处理成一个数据源 1.1.3 使用数据的人 -> 使用Sh…
阅读更多...
Java面试题总结 | Java面试题总结12- 测试模块

Java面试题总结 | Java面试题总结12- 测试模块

测试 测试需要具备的素质 基础的理论知识、编程语言的功底、自动化测试工具、计算机基础知识 业务分析能力&#xff1a;分析业务的流程&#xff0c;分析被测业务数据、分析被测系统的框架、分析业务模块、分析测试所需资源、分析测试完成目标 缺陷洞察能力&#xff1a;一般…
阅读更多...
【ChatGPT】吴恩达教程笔记（预备篇）

【ChatGPT】吴恩达教程笔记（预备篇）

本文概要 众所周知&#xff0c;吴恩达老师与OpenAI联合推出了一门面向开发者的Prompt课程&#xff08;https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers &#xff09;&#xff0c;时隔几天&#xff0c;吴恩达老师发推说已经有超过20万人…
阅读更多...
Netty基础

Netty基础

2.1Netty是什么 是一个基于异步的&#xff08;多线程处理结果和接收&#xff09;、事件驱动的网络应用框架&#xff0c;用于基于快速开发可维护、高性能的网络服务器和客户端 异步是指调用时的异步&#xff0c;他的IO还是多路复用的IO 许多中间件都依赖与Netty zookperhado…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023