班级页面设计——【3-相关活动页面】内容使用HTML以及css和Javascripts技术

news2024/11/25 13:01:48

系列文章目录

班级页面设计——【1-登陆注册页面】_网页制作实现登录注册

班级页面设计——【2-主界面部分】_班级首页展示

文章目录

系列文章目录

前言

一、页面效果介绍

1.1、页面展示

1.2、简单介绍

二、代码展示部分

2.1、html代码部分

2.2、css代码部分


前言

本文主要介绍使用前端HTML以及css和Javascripts编写一个班级介绍页面,前面因为时间比较忙,没有再写出后续的几部分,这几天后续的几个页面将会在期末课程设计专栏出现,希望我的设计可以给你一部分灵感。

一、页面效果介绍

1.1、页面展示

ps:希望能过审,不过审我也没有办法,系统自动认为是违规图,望见谅

 

1.2、简单介绍

本页面的头部和尾部制作在之前的文章里面就有讲解,看的朋友可以爬楼~

以下以我中间部分作为讲解重点来说,中间部分大体分为两块内容来做,上面部分分为三块来做,下面是一个大体框架图,经供参考。

视频部分【加入一些动画的元素即可】活动快报部分【此处与第一部分的首页一样,此处我只是挪用过来而已】图片部分【此处我没有加入动画,你也可以自己加入】
下方的内容部分【此处第一个明白之后其余也相同】,下面的页面转换放在第二大部分来做即可,也可以单个领出来

二、代码展示部分

2.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/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/activity.css">
</head>
<body>
    <!-- 班级首页制作 -->
    <section class="shortcut">
        <div class="sc_div w">
            <div class="fl">
                <div class="fl_div">
                        <div class="fl_div1"><p></p></div>
                        <div class="fl_div2"><strong>大数据202班</strong></div>                          
                        <div class="fl_div3" >我们的青春,从大数据202班启航</div>
                </div>               
            </div>
            <div class="fr">
                    <ul>
                        <li><a href="">班级主页</a></li>
                        <li></li>
                        <li><a href="">班级介绍</a></li>
                        <li></li>
                        <li><a href="">班级课程表</a></li>
                        <li></li>
                        <li><a href="">班级新闻</a></li>
                        <li></li>
                        <li><a href="">重要通知</a></li>
                        <li></li>             
                        <li><a href="">关于我们</a></li>
                        <li></li>
                        <li><a href="">联系方式</a></li>
                    </ul>
                </div>
        </div>        
    </section>
    <div class="style-bgc">
        <div class="lbt">
        <img src="../期末课设HTML/images/bg2.jpg" alt="">
        <span class="left"><</span>
        <span class="right">></span>
        <ul>
            <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>
    <!-- 导航栏 -->
    <header class="bjdhl">
        <div class="bjdhl_div w">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="activity.html">相关活动</a></li>
                <li><a href="professional.html">本专业介绍</a></li>
                <li><a href="syllabus.html">班级课程表</a></li>
                <li><a href="class-grow.html">班级成长历程</a></li>
                <li><a href="photo.html">班级相册</a></li> 
                <li><a href="classroom.html">班级成员信息表</a></li>           
                <li><a href="message -board.html">留言板</a></li>
                <li><a href="personal-center.html">个人中心</a></li>
            </ul>
        </div>
    </header>
        <!-- 相关活动 -->
        <div class="xghd w">
            <div class="xghd-video">
                <video src="../期末课设HTML/images/video.mp4"  loop="loop" controls="controls" src="D:/学习笔记记录/v1.mp4" controls="controls" muted="muted"></video>
            </div>
            <div class="xghd_fl">
                <div class="news">
                    <div class="xghd_news"><span class="xghd_news_span1"></span>
                        <h5>相关活动快报</h5><span class="xghd_news_span2"></span>
                        <a href="#" class="more">更多</a>
                    </div>
                    <div class="xghd_ul">
                    <ul>
                        <li>
                            <a href="">
                                <div class="circle"></div>
                                <strong>[附件]</strong>&nbsp;
                                大学生年度人物推荐汇总报名表
                                <div class="xghd_date">2022-03-15</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="circle"></div>
                                <strong>[附件]</strong>&nbsp;
                                关于开展“百日冲刺”系列就业活动之就业力诊断的通知
                                <div class="xghd_date">2022-03-15</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="circle"></div>
                                <strong>[附件]</strong>&nbsp;
                                大学生年度人物推荐汇总报名表
                                <div class="xghd_date">2022-03-15</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="circle"></div>
                                <strong>[附件]</strong>&nbsp;
                                关于开展“百日冲刺”系列就业活动之就业力诊断的通知
                                <div class="xghd_date">2022-03-15</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="circle"></div>
                                <strong>[附件]</strong>&nbsp;
                                大学生年度人物推荐汇总报名表
                                <div class="xghd_date">2022-03-15</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="circle"></div>
                                <strong>[附件]</strong>&nbsp;
                                关于开展“百日冲刺”系列就业活动之就业力诊断的通知
                                <div class="xghd_date">2022-03-15</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="circle"></div>
                                <strong>[附件]</strong>&nbsp;
                                大学生年度人物推荐汇总报名表
                                <div class="xghd_date">2022-03-15</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="circle"></div>
                                <strong>[附件]</strong>&nbsp;
                                关于开展“百日冲刺”系列就业活动之就业力诊断的通知
                                <div class="xghd_date">2022-03-15</div>
                            </a>
                        </li>
                    </ul>
                    </div>
                </div>
            </div>
            <div class="xghd_fr">
                <div class="fr-div">
                    <dl>
                        <dt><img src="../期末课设HTML/images/bjkcb1.png" alt=""></dt>                       
                        <dt><img src="../期末课设HTML/images/bg1.jpg" alt=""></dt>                        
                        <dt><img src="../期末课设HTML/images/bjkcb.png" alt=""></dt>                       
                        <dt><img src="../期末课设HTML/images/7.png" alt=""></dt>
                    </dl>
                </div>
            </div>
        </div>
    <!-- 相关活动快报 -->
    <div class="activity w">
        <div class="list">
            <ul>
                <li class="list-li">
                    <div class="li-con">
                        <div class="con-fl">
                            <div class="day">18</div>
                            <div class="year">2022-06</div>
                        </div>
                        <div class="con-fr">
                            <p class="title"><a href="" title="本学期所有公共选修课">本学期所有公共选修课</a></p>
                            <p class="abs"><a href="" title="本学期所有公共选修课">本学期所有公共选修课(面授课程、网络课程)将于本周末结课,请通知本院选择尔雅网络课程的学生,于6月19日23:00前完成课程修读,作业提交,并参加考试,只完成课程修读和作业提交,不参加考试的学生,考试成绩不合格;</a></p>
                        </div>
                    </div>
                </li>
                <li class="list-li">
                    <div class="li-con">
                        <div class="con-fl">
                            <div class="day">18</div>
                            <div class="year">2022-06</div>
                        </div>
                        <div class="con-fr">
                            <p class="title"><a href="" title="本学期所有公共选修课">本学期所有公共选修课</a></p>
                            <p class="abs"><a href="" title="本学期所有公共选修课">本学期所有公共选修课(面授课程、网络课程)将于本周末结课,请通知本院选择尔雅网络课程的学生,于6月19日23:00前完成课程修读,作业提交,并参加考试,只完成课程修读和作业提交,不参加考试的学生,考试成绩不合格;</a></p>
                        </div>
                    </div>
                </li>
                <li class="list-li">
                    <div class="li-con">
                        <div class="con-fl">
                            <div class="day">18</div>
                            <div class="year">2022-06</div>
                        </div>
                        <div class="con-fr">
                            <p class="title"><a href="" title="本学期所有公共选修课">本学期所有公共选修课</a></p>
                            <p class="abs"><a href="" title="本学期所有公共选修课">本学期所有公共选修课(面授课程、网络课程)将于本周末结课,请通知本院选择尔雅网络课程的学生,于6月19日23:00前完成课程修读,作业提交,并参加考试,只完成课程修读和作业提交,不参加考试的学生,考试成绩不合格;</a></p>
                        </div>
                    </div>
                </li>
                <li class="list-li">
                    <div class="li-con">
                        <div class="con-fl">
                            <div class="day">18</div>
                            <div class="year">2022-06</div>
                        </div>
                        <div class="con-fr">
                            <p class="title"><a href="" title="本学期所有公共选修课">本学期所有公共选修课</a></p>
                            <p class="abs"><a href="" title="本学期所有公共选修课">本学期所有公共选修课(面授课程、网络课程)将于本周末结课,请通知本院选择尔雅网络课程的学生,于6月19日23:00前完成课程修读,作业提交,并参加考试,只完成课程修读和作业提交,不参加考试的学生,考试成绩不合格;</a></p>
                        </div>
                    </div>
                </li>
                <li class="list-li">
                    <div class="li-con">
                        <div class="con-fl">
                            <div class="day">18</div>
                            <div class="year">2022-06</div>
                        </div>
                        <div class="con-fr">
                            <p class="title"><a href="" title="本学期所有公共选修课">本学期所有公共选修课</a></p>
                            <p class="abs"><a href="" title="本学期所有公共选修课">本学期所有公共选修课(面授课程、网络课程)将于本周末结课,请通知本院选择尔雅网络课程的学生,于6月19日23:00前完成课程修读,作业提交,并参加考试,只完成课程修读和作业提交,不参加考试的学生,考试成绩不合格;</a></p>
                        </div>
                    </div>
                </li>
                <li class="list-li">
                    <div class="li-con">
                        <div class="con-fl">
                            <div class="day">18</div>
                            <div class="year">2022-06</div>
                        </div>
                        <div class="con-fr">
                            <p class="title"><a href="" title="本学期所有公共选修课">本学期所有公共选修课</a></p>
                            <p class="abs"><a href="" title="本学期所有公共选修课">本学期所有公共选修课(面授课程、网络课程)将于本周末结课,请通知本院选择尔雅网络课程的学生,于6月19日23:00前完成课程修读,作业提交,并参加考试,只完成课程修读和作业提交,不参加考试的学生,考试成绩不合格;</a></p>
                        </div>
                    </div>
                </li>
                <li class="list-li">
                    <div class="li-con">
                        <div class="con-fl">
                            <div class="day">18</div>
                            <div class="year">2022-06</div>
                        </div>
                        <div class="con-fr">
                            <p class="title"><a href="" title="本学期所有公共选修课">本学期所有公共选修课</a></p>
                            <p class="abs"><a href="" title="本学期所有公共选修课">本学期所有公共选修课(面授课程、网络课程)将于本周末结课,请通知本院选择尔雅网络课程的学生,于6月19日23:00前完成课程修读,作业提交,并参加考试,只完成课程修读和作业提交,不参加考试的学生,考试成绩不合格;</a></p>
                        </div>
                    </div>
                </li>
                <li class="list-li">
                    <div class="li-con">
                        <div class="con-fl">
                            <div class="day">18</div>
                            <div class="year">2022-06</div>
                        </div>
                        <div class="con-fr">
                            <p class="title"><a href="" title="本学期所有公共选修课">本学期所有公共选修课</a></p>
                            <p class="abs"><a href="" title="本学期所有公共选修课">本学期所有公共选修课(面授课程、网络课程)将于本周末结课,请通知本院选择尔雅网络课程的学生,于6月19日23:00前完成课程修读,作业提交,并参加考试,只完成课程修读和作业提交,不参加考试的学生,考试成绩不合格;</a></p>
                        </div>
                    </div>
                </li>
                <li class="list-li">
                    <div class="li-con">
                        <div class="con-fl">
                            <div class="day">18</div>
                            <div class="year">2022-06</div>
                        </div>
                        <div class="con-fr">
                            <p class="title"><a href="" title="本学期所有公共选修课">本学期所有公共选修课</a></p>
                            <p class="abs"><a href="" title="本学期所有公共选修课">本学期所有公共选修课(面授课程、网络课程)将于本周末结课,请通知本院选择尔雅网络课程的学生,于6月19日23:00前完成课程修读,作业提交,并参加考试,只完成课程修读和作业提交,不参加考试的学生,考试成绩不合格;</a></p>
                        </div>
                    </div>
                </li>
                <li class="list-li">
                    <div class="li-con">
                        <div class="con-fl">
                            <div class="day">18</div>
                            <div class="year">2022-06</div>
                        </div>
                        <div class="con-fr">
                            <p class="title"><a href="" title="本学期所有公共选修课">本学期所有公共选修课</a></p>
                            <p class="abs"><a href="" title="本学期所有公共选修课">本学期所有公共选修课(面授课程、网络课程)将于本周末结课,请通知本院选择尔雅网络课程的学生,于6月19日23:00前完成课程修读,作业提交,并参加考试,只完成课程修读和作业提交,不参加考试的学生,考试成绩不合格;</a></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <a class="prev" href="#">&lt;&lt;上一页</a>
                        <a class="current" href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                        <a href="#">5</a>
                        <a href="#">6</a>
                        <a class="elp" href="#">...</a>
                        <a class="next" href="#">下一页&gt;&gt;</a>
                        到第<input type="text">页
                        <button>确定</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="foot_div w">
        <div class="links">
                <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="">班级QQ群</a> | <a href="">班级成员</a> | <a href="">本班荣誉</a> | <a href="">班级信箱</a> | <a href="">友情链接</a> | <a href="">English Site</a>
        </div>
        <div class="ft_div1">
                学校地址:甘肃省兰州市安宁区 电话:0931-7601072  传真: 0931-7601142 邮编: 730070 <br>
                此页面版权归作者所有
        </div>
    </div>
    <script>
        var video = document.querySelectorAll('video');
        for (var j = 0; j < video; j++) {
        video.addEventListener('mouseover', function () {
            video.play();})
        }
    </script>
</body>
</html>

上述的图片插入部分,如果你要引用的话,需要修改为你的图片地址,以及内容部分也是可以修改的。

2.2、css代码部分

/* 相关活动 */
.xghd{
    height: 260px;
    margin-left: 150px;
    margin-top: 30px;
}
.xghd-video{
    width: 420px;
    height: 240px;
    margin-right: 50px;
    float: left;
}
.xghd-video video{
    width: 420px;
    height: 240px;
}
.xghd_fl{
    float: left;
    margin-right: 30px;
    width: 470px;
    height: 240px;
}
.news{
    float: left;
    height: 240px;
    border: 1px solid #e4e4e4;
}
.xghd_news{
    position: relative;
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}
.xghd_news h5{
    background-color: #0f3c5b;
    color: #fff;
    float: left;
    font-size: 15px;
}
.xghd_news span{
    width: 0;
    height: 0;
    border-color: transparent #0f3c5b transparent transparent;
    border-style: solid;
}
.xghd_news_span1{
    position: absolute;
    top: 0;
    left: 0;
    border-width: 33px 15px 0 0;
}
.xghd_news_span2{
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 15px 33px 0;
}
.xghd_news .more{
    float: right;
    color: rgb(87, 87, 87);
}
.xghd_news .more::after{
    content: '>';
    font-size: 8px;
    color: rgb(169, 169, 169);
}
.xghd_ul{
    padding: 5px 15px 0;
}
.xghd_ul ul li{
    float: left;
    width: 430px;    
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.xghd_ul ul li a{
    color: rgb(53, 48, 48);    
}
.xghd_ul ul li a strong{
    float: left;
}
.xghd_date{
    float: right;
    color: rgb(56, 63, 63);
}
.circle{
    display: block;
    float: left;
    margin-top: 8px;
    margin-right: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
}
.xghd_ul ul li a:hover{
    color: red;
}
.xghd_fr{
    float: right;
}
.fr-div{
    position: relative;
    width: 318px;
    height: 240px;
    border: 8px solid #eee;
    outline: 1px solid #999;
}
.fr-div dl dt{
    float: left;
}
.fr-div dl dd{
    display: inline;
}
.fr-div img{
    width: 150px;
    height: 112px;
}
.fr-div dl dt video{
    width: 150px;
    height: 140px;
}
.activity{
    height: 1600px;
    margin-left: 150px;
}
.list{
    padding: 20px 40px 0 0;
}
.list-li{
    position: relative;
    height: 155px;
    border-bottom: 2px solid #f2f2f2;
    transition: all .5s;
}
.list-li:hover{
    background-color: rgb(203, 126, 255);
}
.li-con{
    padding: 37px 25px;
    overflow: hidden;
}
.con-fl{
    float: left;
    width: 85px;
    height: 80px;
    text-align: center;
    border-right: 1px solid #f2f2f2;
}
.day{
    width: 60px;
    font-size: 30px;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 10px;
}
.year{
    width: 60px;
    font-size: 14px;
    margin-top: 10px;
}
.con-fr{
    position: absolute;
    left: 120px;
    width: 1160px;
    height: 80px;
    transition: all .5s;
}
.title{
    font-size: 22px;
    transition: all 1.5s;
}
.title a{
    color: black;
}
a:hover{
    color: #fff;
}
.abs{
    width: 1100px;
    font-size: 18px;
    margin-top: 10px;
}
.abs a{
    font-size: 14px;
    color: #535353;
    line-height: 1.8em;
    font-weight: 100;
}
.abs a:hover{
    color: #fff;
}

.box{
    padding-top: 25px;
    text-align: center;
}
.box a{
    display: inline-block;
    width: 36px;
    height: 36px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 36px;
    text-decoration: none;
    color: #333;  
    font-style: 14px;

}
.box .prev,.box .next{
    width: 85px;
}
.box .current,
.box .elp{
    background-color: #fff;
    border: none;
}
.box input{
    height: 36px;
    width: 45px;
    border: 1px solid #ccc;
    outline: none;
}
.box button{
    width: 60px;
    height: 36px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
}

ps:此处有类名调用等等,如果要修改的话,前面的类名称也是要修改滴~

总结

以上就是对班级页面设计的相关活动页面的简介,希望对初学者有所帮助。有些内容有点久了,完整的文件会发布在资源里面,敬请期待~

最后欢迎大家点赞👍,收藏⭐,转发🚀,
如有问题、建议,请您在评论区留言💬哦。

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

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

相关文章

C++(继承中)

目录&#xff1a; 1.基类和派生类对象赋值转换 2.派生类当中的6个默认成员函数 --------------------------------------------------------------------------------------------------------------------------- 派生类对象可以赋值给 基类的对象/基类的指针/基类的引用&am…

“量子计算+个性化医疗”!富士通和BSC利用张量网络推进新研究

​ &#xff08;图片来源&#xff1a;网络&#xff09; 富士通和巴塞罗那超级计算中心(BSC)正在签署一项合作协议&#xff0c;通过利用临床数据促进个性化医疗&#xff0c;并使用张量网络推进量子模拟技术。 双方将于2023年5月开始联合研究&#xff0c;第一个合作项目旨在利用不…

CSGO搬砖,每天1-2小时,23年最强副业非它莫属(内附操作流程)

自从我学会了CSGO搬运&#xff0c;我发现生活也有了不小的改变&#xff0c;多了一份收入&#xff0c;生活质量也就提高了一份。 其实刚接触CSGO&#xff0c;我压根就不相信这么能挣钱&#xff0c;因为在印象中&#xff0c;游戏供玩家娱乐竞技的&#xff0c;作为我这种技术渣渣…

VUE3如何定义less全局变量

默认已经安装好了less&#xff0c;这里不过多讲。 &#xff08;1&#xff09;首先我们需要下载一个插件依赖&#xff1a; npm i style-resources-loader --save-dev &#xff08;2&#xff09;VUE3里配置vue.config.js文件内容 代码&#xff1a; const path require("p…

U盘安装Windows11和ubuntu20.04双系统

准备&#xff1a; 一台PC电脑&#xff08;我的是两个固态硬盘&#xff09; 一个U盘&#xff08;最好不小于32G&#xff09; 下载安装工具&#xff1a; 老白菜u盘启动盘制作工具_u盘启动_u盘装系统下载尽在老白菜官网 最新UltraISO官方免费下载 - UltraISO软碟通中文官方网…

数据结构与算法(九) 树

大家好&#xff0c;我是半虹&#xff0c;这篇文章来讲树 树是一种常见的数据结构&#xff0c;其定义为&#xff1a;由有限个节点组成的具有层次关系的集合 解决树问题的关键是递归&#xff0c;递归的关键是分解子问题 对于树来说&#xff0c;递归函数只要考虑对单个节点如何处…

波奇学Linux:Linux的认识和云服务器使用

在讲Linux前&#xff0c;我们先来理解计算机&#xff1a; 计算机&#xff1a;输入->算法->输出 举个栗子&#xff1a; pritnf :输出到屏幕&#xff08;硬件&#xff09;上 我们在计算机所有的行为都会转为硬件行为。 再进一步理解,我们打开visual studio后&#xff0c;敲…

BPF技术学习与整理

目录 eBPF是什么&#xff1f; eBPF是做什么的&#xff1f;可以解决什么问题&#xff1f; eBPF可以带来的解决方案是什么&#xff1f; eBPF的技术点 eBPF hookeBPF MapeBPF Helper FunctioneBPF有什么限制吗&#xff1f; 前言 21年因为项目需求而要开发一个工具&#xff0c;可以…

如何通过docker启动一个本地springboot的jar包

一、构建本地jar包 进入到项目目录下执行如下命令 mvn -e clean package -Dmaven.test.skiptrue或者直接在idea中打包 得到target文件夹 进入到target文件夹得到jar包 二、创建Dockerfile文件 新建Dockerfile文件&#xff0c;内容如下 FROM openjdk:8-jre MAINTAINER ja…

硬盘坏掉之后

文章目录 背景解决方案数据丢失软件安装 总结 背景 前一段时间&#xff0c;我的电脑突然就开不了机了&#xff0c;进入安全模式之后&#xff0c;发现硬盘无法读取&#xff0c;大概率是硬盘坏掉了。电脑是 MacBook&#xff0c;自己不太好换。于是跑到华强北&#xff0c;找了一家…

电脑无论是连接热点,还是公共网络,qq、微信都能用,就是不能上网,现分享解决办法如下。

这里写自定义目录标题 问题引入&#xff1a;解决办法1、打开电脑的控制面板2、点击 “网络和internet”3、点击 “internet 选项”4、点击 “连接”5、点击 “局域网设置”6、按照下面操作 问题引入&#xff1a; 在魔法使用网站之后&#xff0c;忘记关闭 clash 按钮就关闭电脑&…

Spring-学习修改尚硅谷最新教程笔记

二、Spring 1、Spring简介 1.1、Spring概述 官网地址&#xff1a;https://spring.io/ Spring 是最受欢迎的企业级 Java 应用程序开发框架&#xff0c;数以百万的来自世界各地的开发人员使用 Spring 框架来创建性能好、易于测试、可重用的代码。 Spring 框架是一个开源的 Jav…

数据湖Iceberg-SparkSQL集成(4)

文章目录 数据湖Iceberg-SparkSQL集成一、环境准备安装Spark 二、Spark配置Catalog2.1在配置文件中添加HiveCatalog与HadoopCatalog配置&#xff08;一劳永逸&#xff09;2.2使用spark-sql连接Hive Catalog2.3使用spark-sql连接Hadoop Catalog 三、SQL操作3.1 创建表创建分区表…

一个 24 通道 100Msps 逻辑分析仪

这是一个创建非常便宜的逻辑分析仪的项目&#xff0c;但其功能可与昂贵的商业分析仪相媲美。该分析仪可以以每秒 1 亿个样本的最高速度对多达 24 个通道进行采样&#xff0c;并且可以通过单个通道中的极性变化或多达 16 个通道形成的模式来触发。 该项目不仅包含硬件&#xff0…

去银行还是干嵌入式?

晚上要睡觉的时候&#xff0c;一个读者给我发消息 说是最近拿到了4个offer&#xff0c;现在犹豫不决 听说&#xff0c;最近嵌入式突然就火起来了。 不过&#xff0c;嵌入式很多人的薪资还是低了&#xff0c;而且&#xff0c;工作很多年后&#xff0c;嵌入式的工作&#xff0c;那…

蛋白冠™蛋白质组学技术实现快速深入精确地解析血浆蛋白质图谱

文章标题&#xff1a;Rapid, deep and precise profiling of the plasma proteome with multi-nanoparticle protein corona 发表期刊&#xff1a;Nature Communications 影响因子&#xff1a;17.694 作者单位&#xff1a;哈佛医学院&#xff1b;Seer&#xff0c;美国&#…

opencv (六十四)监督学习聚类(k近邻原理、支持向量机原理、k近邻(KNN)手写字识别、支持向量机数据分类)

文章目录 1 k近邻原理介绍2 支持向量机原理3 K近邻(KNN)手写字识别训练模型4 手写字识别5 支持向量机 进行数据分类6 源代码及数据文件下载1 k近邻原理介绍 k最近邻(k-Nearest Neighbor)算法是比较简单的机器学习算法。它采用测量不同特征值之间的距离方法进行分类。它的思想…

算法刷题知识点总结

因为数组的在内存空间的地址是连续的&#xff0c;所以我们在删除或者增添元素的时候&#xff0c;就难免要移动其他元素的地址。 二分法&#xff1a;采用两个指针&#xff0c;注意他们的区间划分&#xff1b; 双指针法&#xff0c;用于查找排序&#xff1a;双指针将一个两层循…

BUUCTF warmup_csaw_2016

小白垃圾做题笔记而已&#xff0c;不建议阅读。 唉&#xff0c;本来以为是让写shellcode的打了半天没打通&#xff0c;后来发现疏忽了sub_40060D函数。 前两行(6,7)没啥就是把那个字符串写到屏幕上。 然后是第八行&#xff0c; sprintf(): 这个函数用于将格式化的字符串写入…

Linux安装MongoDB数据库,实现外网远程连接访问

文章目录 1. 配置Mongodb源2. 安装MongoDB3. 局域网连接测试4. 安装cpolar内网穿透5. 配置公网访问地址6. 公网远程连接7. 固定连接公网地址8. 使用固定地址连接 简单几步实现Linux安装mongoDB数据库并且结合cpolar内网穿透实现在公网环境下的远程连接。 1. 配置Mongodb源 进…