18.[前端开发]Day18-王者荣耀项目实战(一)
01-06 项目实战
1 代码规范
2 CSS编写顺序
3 组件化开发思想
组件化开发思路
项目整体思路 – 各个击破
07_(掌握)王者荣耀-top-整体布局完成
完整代码
01_page_top1.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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.top {border: 1px solid #f5f5f5;}.top .area {display: flex;justify-content: space-between;/* align-items: normal; */height: 41px;line-height: 41px;}.top .left-area {display: flex;}.top .left-area .logo a {display: block;width: 150px;text-indent: -9999px;background: url(./img/top_logo.png) no-repeat center center;}.top .right-area {display: flex;}.top .right-area .item a {position: relative;display: block;font-size: 14px;color: #464646;}.top .right-area .item a.ranking {margin-left: 20px;padding-right: 30px;}.top .right-area .item a.ranking::after {content: "";position: absolute;width: 30px;height: 30px;right: 0;top: 0;bottom: 0;margin: auto 0;background: url(./img/top_sprite.png) no-repeat 0 0;opacity: 0.2;transform: rotate(90deg);}.top .right-area .item a.growth {padding-left: 30px;}.top .right-area .item a .icon-grow {position: absolute;width: 30px;height: 30px;left: 0;top: 0;bottom: 0;margin: auto 0;background: url(./img/top_sprite.png) no-repeat -30px 0;}</style>
</head>
<body><div class="top"><div class="top_wrapper area"><div class="left-area"><h2 class="logo"><a href="#">腾讯游戏</a></h2><div class="recommend"><img src="./img/recommend_game.jpg" alt=""></div></div><ul class="right-area"><li class="item"><a class="growth" href="#"><i class="icon-grow"></i>成长守护平台</a></li><li class="item"><a class="ranking" href="#">腾讯游戏排行榜</a></li></ul></div></div></body>
</html>逐步细节
建议思路：先写html结构，再去写对应的CSS（效率高）
另一种思路：写好一个结构就去写对应的css（容易理解，效率低）
先做边框
<!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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><style>.top{height: 41px;border: 1px solid #f5f1f5;}</style>
</head>
<body><div class="top"></div>
</body>
</html>
先做一个wrapper
<!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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><style>.top{height: 41px;border: 1px solid #f5f1f5;}.wrapper{width: 980px;margin: 0 auto;/*把wrapper放中间*/height: 41px;background-color: orange;}</style>
</head>
<body><div class="top"><div class="wrapper"></div></div>
</body>
</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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.top{border: 1px solid #f5f1f5;}.top .area{height: 41px;background-color: orange;}</style>
</head>
<body><div class="top"><div class="top_wrapper area"></div></div>
</body>
</html>/* common.css公共的样式 *//* wrapper中间包裹的区域 */
.top_wrapper {width: 980px;margin: 0 auto;
}/* reset.css样式重置文件 */
/* margin/padding重置 */
body {padding: 0;margin: 0;
}08_(掌握)王者荣耀-top-top-left展示实现
<!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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.top{border: 1px solid #f5f1f5;}.top .area{display: flex;justify-content: space-between;height: 41px;line-height: 41px;}.top .left-area{display: flex;}.top .right-area{background-color: rgb(0, 255, 217);}.top .left-area .logo a{display: block;width: 150px;text-indent: -9999px;/*隐藏a元素的文字 腾讯游戏*/background: url(./img/top_logo.png) no-repeat center center;}</style>
</head>
<body><div class="top"><div class="top_wrapper area"><div class="left-area"><h2 class="logo"><a href="#">腾讯游戏</a></h2><div class="recommend"><img src="./img/recommend_game.jpg" alt=""></div></div><div class="right-area">2</div></div></div>
</body>
</html>
09_(掌握)王者荣耀-top-top-right展示实现
<!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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.top{border: 1px solid #f5f1f5;}.top .area{display: flex;justify-content: space-between;height: 41px;line-height: 41px;}.top .left-area{display: flex;}.top .left-area .logo a{display: block;width: 150px;text-indent: -9999px;/*隐藏a元素的文字 腾讯游戏*/background: url(./img/top_logo.png) no-repeat center center;}.top .right-area{display: flex;}.top .right-area .item a{position: relative;display: block;font-size:14px;color: #464646;}.top .right-area .item a.ranking{margin-left: 20px;padding-right: 30px;}.top .right-area .item a.ranking::after{content: "";position: absolute;width: 30px;height: 30px;top: 0;bottom: 0;right: 0;margin:auto 0;background: url(./img/top_sprite.png) no-repeat 0 0;opacity: 0.2;transform: rotate(90deg);}.top .right-area .item a.growth{padding-left: 30px;}.top .right-area .item a .icon-grow{position: absolute;width: 30px;height: 30px;top: 0;bottom: 0;left: 0;margin: auto 0;background: url(./img/top_sprite.png) no-repeat -30px 0;}</style>
</head>
<body><div class="top"><div class="top_wrapper area"><div class="left-area"><h2 class="logo"><a href="#">腾讯游戏</a></h2><div class="recommend"><img src="./img/recommend_game.jpg" alt=""></div></div><ul class="right-area"><li class="item"><a class="growth" href="#"><i class="icon-grow"></i>成长守护平台</a></li><li class="item"><a class="ranking" href="#">腾讯游戏排行榜</a></li></ul></div></div>
</body>
</html>
10_(掌握)王者荣耀-header-整体布局实现
完整代码
<!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>王者荣耀-header</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.header {background-color: rgba(0,0,0,.8);}.header .area {display: flex;justify-content: space-between;height: 84px;}.header .left-area {display: flex;}.header .left-area .logo a {position: relative;top: 50%;transform: translate(0, -50%);display: block;width: 200px;height: 54px;text-indent: -9999px;background: url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list {display: flex;margin-left: 30px;}.header .left-area .nav-list .item {width: 110px;padding-right: 5px;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active {background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item a {display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a {color: #e4b653;}.header .left-area .nav-list .item a .desc {display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc {color: #91763f;}.header .left-area .search {margin-left: 10px;}.header .left-area .search a {position: relative;top: 50%;transform: translate(0, -50%);display: block;width: 27px;height: 26px;background: url(./img/nav_search.png);}.header .right-area {display: flex;align-items: center;}.header .right-area .image img {border: 1px solid #d9ad50;border-radius: 50%;}.header .right-area .info {margin-left: 12px;}.header .right-area .info a {color: #fff;}.header .right-area .info p {font-size: 14px;color: #858792;margin-top: 5px;}</style>
</head>
<body><div class="header"><div class="area header_wrapper"><div class="left-area"><h1 class="logo"><a href="#">王者荣耀</a></h1><ul class="nav-list"><li class="item active"><a href="#">游戏资料<span class="desc">DATA</span></a></li><li class="item"><a href="#">内容中心<span class="desc">CONTENTS</span></a></li><li class="item"><a href="#">赛事中心<span class="desc">MATCH</span></a></li><li class="item"><a href="#">百态王者<span class="desc">CULTURE</span></a></li><li class="item"><a href="#">社区互动<span class="desc">COMMUNITY</span></a></li><li class="item"><a href="#">玩家支持<span class="desc">PLAYER</span></a></li><li class="item"><a href="#">IP新游<span class="desc">NEW GAMES</span></a></li></ul><div class="search"><a href="#"></a></div></div><div class="right-area"><a class="image" href="#"><img src="./img/header_login.png" alt=""></a><div class="info"><a href="#">欢迎登录</a><p>登录后查看游戏战绩</p></div></div></div></div></body>
</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>王者荣耀-header</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;line-height: 84px;background-color: orange;}.header .left-area{background-color: red;}.header .right-area{background-color: green;}</style>
</head>
<body><div class="header"><div class="area header_wrapper"><div class="left-area">1</div><div class="right-area">2</div></div></div></body>
</html>
11_(掌握)王者荣耀-header-logo展示实现
注意：网站的logo一半我们用h1包裹，来做网站搜索优化，并且h1里面包裹一个a，超链接。
<!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>王者荣耀-header</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;}.header .left-area{display: flex;}.header .left-area .logo a{position: relative;top:50%;transform: translate(0,-50%);display: flex;width: 200px;height: 54px;text-indent: -9999px;background:url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list{display: flex;margin-left: 25px;}.header .left-area .nav-list .item{width: 110px;margin-right: 5px; }.header .left-area .nav-list a{display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list a .desc{display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active{background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a{color: #e4b653;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc{color: #91763f;}.header .right-area{background-color: green;}</style>
</head>
<body><div class="header"><div class="area header_wrapper"><div class="left-area"><h1 class="logo"><a href="#">王者荣耀</a></h1><ul class="nav-list"><li class="item active"><a href="#">游戏资料<span class="desc">DATA</span></a></li><li class="item"><a href="#">内容中心<span class="desc">CONTENTS</span></a></li><li class="item"><a href="#">赛事中心<span class="desc">MATCH</span></a></li><li class="item"><a href="#">百态王者<span class="desc">CULTURE</span></a></li><li class="item"><a href="#">社区互动<span class="desc">COMMUNITY</span></a></li><li class="item"><a href="#">玩家支持<span class="desc">PLAYER</span></a></li><li class="item"><a href="#">IP新游<span class="desc">NEW GAMES</span></a></li></ul></div><div class="right-area">2</div></div></div></body>
</html>12_(掌握)王者荣耀-header-导航展示实现
<!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>王者荣耀-header</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;}.header .left-area{display: flex;}.header .left-area .logo a{position: relative;top:50%;transform: translate(0,-50%);display: flex;width: 200px;height: 54px;text-indent: -9999px;background:url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list{display: flex;margin-left: 25px;}.header .left-area .nav-list .item{width: 110px;padding-right: 5px; }.header .left-area .nav-list a{display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list a .desc{display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active{background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a{color: #e4b653;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc{color: #91763f;}.header .right-area{background-color: green;}</style>
</head>
<body><div class="header"><div class="area header_wrapper"><div class="left-area"><h1 class="logo"><a href="#">王者荣耀</a></h1><ul class="nav-list"><li class="item active"><a href="#">游戏资料<span class="desc">DATA</span></a></li><li class="item"><a href="#">内容中心<span class="desc">CONTENTS</span></a></li><li class="item"><a href="#">赛事中心<span class="desc">MATCH</span></a></li><li class="item"><a href="#">百态王者<span class="desc">CULTURE</span></a></li><li class="item"><a href="#">社区互动<span class="desc">COMMUNITY</span></a></li><li class="item"><a href="#">玩家支持<span class="desc">PLAYER</span></a></li><li class="item"><a href="#">IP新游<span class="desc">NEW GAMES</span></a></li></ul></div><div class="right-area">2</div></div></div></body>
</html>
13_(掌握)王者荣耀-header-搜索和登录展示实现
<!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>王者荣耀-header</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;}.header .left-area{display: flex;}.header .left-area .logo a{position: relative;top:50%;transform: translate(0,-50%);display: flex;width: 200px;height: 54px;text-indent: -9999px;background:url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list{display: flex;margin-left: 25px;}.header .left-area .nav-list .item{width: 110px;padding-right: 5px; }.header .left-area .nav-list a{display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list a .desc{display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active{background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a{color: #e4b653;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc{color: #91763f;}.header .left-area .search{margin-left: 10px;}.header .left-area .search a{position: relative;top:50%;transform: translate(0,-50%);display: block;width: 27px;height: 26px;background: url(./img/nav_search.png);}.header .right-area{display: flex;align-items: center;}.header .right-area .image img{border:1px solid #d9ad50;border-radius: 50%;}.header .right-area .info{margin-left: 12px;}.header .right-area .info a{color: #fff;}.header .right-area .info p{font-size: 14px;color: #858792;math-depth: 5px;}</style>
</head>
<body><div class="header"><div class="area header_wrapper"><div class="left-area"><h1 class="logo"><a href="#">王者荣耀</a></h1><ul class="nav-list"><li class="item active"><a href="#">游戏资料<span class="desc">DATA</span></a></li><li class="item"><a href="#">内容中心<span class="desc">CONTENTS</span></a></li><li class="item"><a href="#">赛事中心<span class="desc">MATCH</span></a></li><li class="item"><a href="#">百态王者<span class="desc">CULTURE</span></a></li><li class="item"><a href="#">社区互动<span class="desc">COMMUNITY</span></a></li><li class="item"><a href="#">玩家支持<span class="desc">PLAYER</span></a></li><li class="item"><a href="#">IP新游<span class="desc">NEW GAMES</span></a></li></ul><div class="search"><a href="#"></a></div></div><div class="right-area"><a class="image" href="#"><img src="./img/header_login.png" alt=""></a><div class="info"><a href="#">欢迎登陆</a><p>登陆后查看游戏战绩</p></div></div></div></div></body>
</html>
14_(掌握)王者荣耀-main-news区域整体布局
完整代码
<!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>王者荣耀-main-news</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.main {height: 100px;}.news-section {display: flex;height: 342px;}.news-section .banner {width: 605px;background-color: orange;}.news-section .news {flex: 1;background-color: purple;}.news-section .download {width: 236px;background-color: skyblue;}.news-section .download a {display: block;background: url(./img/main_sprite.png) no-repeat;}.news-section .download a.download-btn {height: 128px;background-position: 0 -219px;}.news-section .download a.guard-btn {height: 106px;background-position: 0 -350px;}.news-section .download a.experience-btn {height: 108px;background-position: 0 -461px;}</style>
</head>
<body><div class="main main_wrapper"><div class="news-section"><div class="banner"></div><div class="news"></div><div class="download"><a class="download-btn" href="#"></a><a class="guard-btn" href="#"></a><a class="experience-btn" href="#"></a></div></div><div class="content-section"></div><div class="match-section"></div></div></body>
</html>逐步细节
建议这样做：两边给一个固定的宽度，中间给一个flex 1让中间新闻的宽度是弹性的
<!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>王者荣耀-main-news</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.main{height: 100px;}.news-section{display: flex;height: 342px;}.news-section .banner{width: 605px;background-color: #0f0;}.news-section .news{flex: 1;background-color: purple;}.news-section .download{width: 236px;background-color: skyblue;}</style>
</head>
<body><div class="main main_wrapper"><div class="news-section"><div class="banner"></div><div class="news"></div><div class="download"></div></div><div class="content-section"></div><div class="match-section"></div></div></body>
</html>15_(掌握)王者荣耀-main-news下载区域实现
<!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>王者荣耀-main-news</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.main{height: 100px;}.news-section{display: flex;height: 342px;}.news-section .banner{width: 605px;background-color: #0f0;}.news-section .news{flex: 1;background-color: purple;}.news-section .download{width: 236px;background-color: skyblue;}.news-section .download a{display: block;background:url(./img/main_sprite.png) no-repeat;}.news-section .download a.download-btn{height: 128px;background-position: 0 -219px;}.news-section .download a.guard-btn{height: 106px;background-position: 0 -350px;}.news-section .download a.experience-btn{height: 108px;background-position: 0 -461px;}</style>
</head>
<body><div class="main main_wrapper"><div class="news-section"><div class="banner"></div><div class="news"></div><div class="download"><a class="download-btn" href="#"></a><a class="guard-btn" href="#"></a><a class="experience-btn" href="#"></a></div></div><div class="content-section"></div><div class="match-section"></div></div></body>
</html>
总结：内容回顾
一. vertical-align(了解)
1.1. vertical-align其他值
-
给行内级元素设置
-
middle
-
基线+x高度的一半
-
1.2. 行内块级元素其他现象
二. CSS整体内容回顾
三. 项目实战
3.1. 代码规范(重要)
3.2. CSS编写顺序
-
定位/浮动/flex
-
display/visibility
-
box model
-
文本/文字
-
background
-
其他
四. 王者荣耀
4.1. top区域
4.2. header区域
4.3. main-news区域(正在进行ing)
练习
自己往后做(王者荣耀)
-
news(必须做)
-
banner
-
news-list
-
相关文章：
18.[前端开发]Day18-王者荣耀项目实战(一)
01-06 项目实战 1 代码规范 2 CSS编写顺序 3 组件化开发思想 组件化开发思路 项目整体思路 – 各个击破 07_(掌握)王者荣耀-top-整体布局完成 完整代码 01_page_top1.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8…...
Kafka 使用说明（kafka官方文档中文）
文章来源：kafka -- 南京筱麦软件有限公司 第 1 步：获取 KAFKA 下载最新的 Kafka 版本并提取它： $ tar -xzf kafka_{{scalaVersion}}-{{fullDotVersion}}.tgz $ cd kafka_{{scalaVersion}}-{{fullDotVersion}} 第 2 步：启动 KAFKA 环境 注意：您的本地环境必须安装 Java 8+。…...
基于多智能体强化学习的医疗AI中RAG系统程序架构优化研究
一、引言 1.1 研究背景与意义 在数智化医疗飞速发展的当下，医疗人工智能（AI）已成为提升医疗服务质量、优化医疗流程以及推动医学研究进步的关键力量。医疗 AI 借助机器学习、深度学习等先进技术，能够处理和分析海量的医疗数据，从而辅助医生进行疾病诊断、制定治疗方案以…...
Airflow：深入理解Apache Airflow Task
Apache Airflow是一个开源工作流管理平台，支持以编程方式编写、调度和监控工作流。由于其灵活性、可扩展性和强大的社区支持，它已迅速成为编排复杂数据管道的首选工具。在这篇博文中，我们将深入研究Apache Airflow 中的任务概念，探…...
multisim入门学习设计电路
文章目录 1.软件的安装2.电路基本设计2.1二极管的简介2.2最终的设计效果2.3设计流程介绍 3.如何测试电路 1.软件的安装 我是参考的下面的这个文章，文章的链接放在下面，亲测是有效的，如果是小白的话，可以参考一下： 【…...
【算法精练】二分查找算法总结
目录 前言 1. 二分查找（基础版） 2. 寻找左右端点 循环判断条件 求中间点 总结 前言 说起二分查找，也是一种十分常见的算法，最常听说的就是：二分查找只能在数组有序的场景下使用；其实也未必，…...
从零开始实现一个双向循环链表：C语言实战
文章目录 1链表的再次介绍2为什么选择双向循环链表？3代码实现：从初始化到销毁1. 定义链表节点2. 初始化链表3. 插入和删除节点4. 链表的其他操作5. 打印链表和判断链表是否为空6. 销毁链表 4测试代码5链表种类介绍6链表与顺序表的区别7存储金字塔L0: 寄存…...
MYSQL面试题总结（题目来源JavaGuide）
MYSQL基础架构 问题1：一条 SQL语句在MySQL中的执行过程 1. 解析阶段 (Parsing) 查询分析：当用户提交一个 SQL 语句时，MySQL 首先会对语句进行解析。这个过程会检查语法是否正确，确保 SQL 语句符合 MySQL 的语法规则。如果发现…...
visual studio安装
一、下载Visual Studio 访问Visual Studio官方网站。下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux 在主页上找到并点击“下载 Visual Studio”按钮。 选择适合需求的版本，例如“Visual Studio Community”（免费版本）&#x…...
JVM执行引擎
一、执行引擎的概述: 执行引擎是]ava虚拟机核心的组成部分之一; “虚拟机”是一个相对于“物理机”的概念，这两种机器都有代码执行能力，其区别是物理机的执行引擎是直接建立在处理器、缓存、指令集和操作系统层面上的，而虚拟机的执行引擎则…...
C# 9.0记录类型：解锁开发效率的魔法密码
一、引言：记录类型的神奇登场 在 C# 的编程世界中，数据结构就像是构建软件大厦的基石，其重要性不言而喻。然而，传统的数据结构定义方式，尤其是在处理简单的数据承载对象时，常常显得繁琐复杂。例如…...
搭建自己的专属AI——使用Ollama+AnythingLLM+Python实现DeepSeek本地部署
前言 最近DeepSeek模型非常火，其通过对大模型的蒸馏得到的小模型可以较轻松地在个人电脑上运行，这也使得我们有机会在本地构建一个专属于自己的AI，进而把AI“调教”为我们希望的样子。本篇文章中我将介绍如何使用OllamaAnythingLLMPython实现…...
『 C++ 』中理解回调类型在 C++ 中的使用方式。
文章目录 案例 1：图形绘制库中的回调使用场景说明代码实现代码解释 案例 2：网络服务器中的连接和消息处理回调场景说明代码实现代码解释 案例 3：定时器中的回调使用场景说明代码实现代码解释 以下将通过不同场景给出几个使用回调类型的具体案…...
git多人协作
目录 一、项目克隆 二、 1、进入克隆仓库设置 2、协作处理 3、冲突处理 4、多人协作分支的推送拉取删除 1、分支推送（2种） 2、远程分支拉取（2种） 3、远程分支删除 一、项目克隆 git clone 画船听雨眠/test1 (自定义的名…...
CTFSHOW-WEB入门-命令执行71-77
题目：web 71 题目：解题思路：分析可知highlight_file() 函数被禁了，先想办法看看根目录：cvar_export(scandir(dirname(‘/’))); 尝试一下发现很惊奇：（全是？）这种情况我也…...
浅谈《图解HTTP》
感悟 滑至尾页的那一刻，内心突兀的涌来一阵畅快的感觉。如果说从前对互联网只是懵懵懂懂，但此刻却觉得她是如此清晰而可爱的呈现在哪里。 介绍中说，《图解HTTP》适合作为第一本网络协议书。确实，它就像一座桥梁，连接…...
LLMs瞬间获得视觉与听觉感知，无需专门训练：Meta的创新——在图像、音频和视频任务上实现最优性能。
引言： 问题： 当前的多模态任务（如图像、视频、音频描述生成、编辑、生成等）通常需要针对特定任务训练专门的模型，而现有的方法在跨模态泛化方面存在局限性，难以适应新任务。此外，多模态嵌入反演…...
自研有限元软件与ANSYS精度对比-Bar3D2Node三维杆单元模型-央视大裤衩实例
目录 1、“央视大裤衩”自研有限元软件求解 1.1、选择单元类型 1.2、导入“央视大裤衩”工程 1.3、节点坐标定义 1.4、单元连接关系、材料定义 1.5、约束定义 1.6、外载定义 1.7、矩阵求解 1.8、变形云图展示 1.9、节点位移 1.10、单元应力 1.11、节点支反力 2、“…...
kubernetes 高可用集群搭建
在生产环境中部署 Kubernetes 集群时，确保其高可用性（High Availability, HA）是至关重要的。高可用性不仅意味着减少服务中断时间，还能提高系统的稳定性和可靠性。本文将详细介绍如何搭建一个高可用的 Kubernetes 集群，…...
【C++】STL——vector底层实现
目录 💕 1.vector三个核心 💕2.begin函数，end函数的实现（简单略讲） 💕3.size函数，capacity函数的实现 （简单略讲） 💕4.reserve函数实现 （细节…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...