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函数实现 （细节…...
LeagueAkari：基于LCU API的英雄联盟自动化工具集架构设计与实战应用
LeagueAkari：基于LCU API的英雄联盟自动化工具集架构设计与实战应用 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit L…...
2-1爬取豆瓣电影数据
数据来源网站：https://movie.douban.com/chart import requests import json import timedef fetch_douban():all_movies []start 0limit 20print("开始爬取豆瓣电影榜单")headers {"User-Agent": "Mozilla/5.0","Referer&…...
从零掌握ComfyUI-WanVideoWrapper：AI视频制作工具实战指南
从零掌握ComfyUI-WanVideoWrapper：AI视频制作工具实战指南 【免费下载链接】ComfyUI-WanVideoWrapper 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-WanVideoWrapper 在数字内容创作领域，视频生成工具正经历着前所未有的技术革新。…...
OpenClaw新手避坑指南：GLM-4.7-Flash部署的5个常见错误
OpenClaw新手避坑指南：GLM-4.7-Flash部署的5个常见错误 1. 为什么写这篇指南 上周我在自己的M1 MacBook上尝试部署OpenClaw对接GLM-4.7-Flash模型时，经历了堪称"教科书级"的踩坑过程。从模型地址格式错误到端口冲突，几乎把所有新…...
Meshery 1.0正式发布，为云原生基础设施提供新的管控层
跨多云环境管理Kubernetes基础设施长期以来产生了YAML文件泛滥、配置漂移以及依赖个人而非系统的知识问题。生成基础设施配置的AI工具速度超过了团队审查能力，使这个问题更加难以控制。开源Meshery技术正是为了解决这一问题而构建的。Meshery v1.0现已发布ÿ…...
字节开源AI神器DeerFlow，4.1万星标刷屏，普通人免费就能用
文章目录这玩意儿不是ChatGPT那种"嘴炮型"选手35k星标怎么来的？字节这次把"龙虾"养明白了多智能体协作：不是一个人在战斗沙箱执行：让AI真的"动手"干活对比OpenAI：免费、本地、可控普通人怎么上手&a…...
光阀的“第二曲线”：投影行业LCOS技术现状与发展趋势分析
1. 报告导读与核心摘要 在投影显示技术的版图中，LCoS（硅基液晶，Liquid Crystal on Silicon）长期处于一种微妙的位置：它拥有DLP无法比拟的画质潜力，却因成本和体积问题始终未能真正撼动DLP的市场地位。然而，2025-2026年行业展会上的一系列技术突破，正在改写这一格局。 …...
Python制作简易PDF查看工具——PDFViewerV1.0
PDFViewer PDF浏览工具，是使用Python语言（使用PyQt5开发界面，PDF解析使用PyMuPDF开源模块）开发的PDF查看工具，已经实现基本翻页浏览、OCR文字识别（基于开源主流文字识别模型实现）、内容查找高亮…...
利用快马平台快速构建mcporter数据转换工具原型，十分钟验证数据管道设计
最近在做一个数据迁移项目时，遇到了需要频繁转换数据格式的需求。传统方式下，光是搭建开发环境、编写基础代码就要花上大半天时间。这次尝试用InsCode(快马)平台快速构建了一个mcporter数据转换工具原型，整个过程出乎意料地顺畅。 明确核心需…...
如何通过3个步骤快速掌握BetaFlight黑匣子日志分析
如何通过3个步骤快速掌握BetaFlight黑匣子日志分析 【免费下载链接】blackbox-log-viewer Interactive log viewer for flight logs recorded with blackbox 项目地址: https://gitcode.com/gh_mirrors/bl/blackbox-log-viewer 你是否曾经在调试无人机飞行问题时感到束手…...