当前位置： 首页 > news >正文

做画册好的网站/sem推广案例

news 文章来源：https://blog.csdn.net/m0_55135449/article/details/145431564 2025/3/18 8:07:15
做画册好的网站,sem推广案例,钢琴网站建设原则,网站的设计与开发论文01-06 项目实战 1 代码规范 2 CSS编写顺序 3 组件化开发思想 组件化开发思路 项目整体思路 – 各个击破 07_(掌握)王者荣耀-top-整体布局完成 完整代码 01_page_top1.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8…

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…...

编程日记 2025/2/5 20:09:38

Kafka 使用说明（kafka官方文档中文）

文章来源：kafka -- 南京筱麦软件有限公司 第 1 步：获取 KAFKA 下载最新的 Kafka 版本并提取它： $ tar -xzf kafka_{{scalaVersion}}-{{fullDotVersion}}.tgz $ cd kafka_{{scalaVersion}}-{{fullDotVersion}} 第 2 步：启动 KAFKA 环境 注意：您的本地环境必须安装 Java 8+。…...

编程日记 2025/2/5 20:06:35

基于多智能体强化学习的医疗AI中RAG系统程序架构优化研究

一、引言 1.1 研究背景与意义 在数智化医疗飞速发展的当下，医疗人工智能（AI）已成为提升医疗服务质量、优化医疗流程以及推动医学研究进步的关键力量。医疗 AI 借助机器学习、深度学习等先进技术，能够处理和分析海量的医疗数据，从而辅助医生进行疾病诊断、制定治疗方案以…...

编程日记 2025/2/5 20:05:32

Airflow：深入理解Apache Airflow Task

Apache Airflow是一个开源工作流管理平台&#xff0c;支持以编程方式编写、调度和监控工作流。由于其灵活性、可扩展性和强大的社区支持&#xff0c;它已迅速成为编排复杂数据管道的首选工具。在这篇博文中&#xff0c;我们将深入研究Apache Airflow 中的任务概念&#xff0c;探…...

编程日记 2025/2/5 20:00:23

multisim入门学习设计电路

文章目录 1.软件的安装2.电路基本设计2.1二极管的简介2.2最终的设计效果2.3设计流程介绍 3.如何测试电路 1.软件的安装 我是参考的下面的这个文章&#xff0c;文章的链接放在下面&#xff0c;亲测是有效的&#xff0c;如果是小白的话&#xff0c;可以参考一下&#xff1a; 【…...

编程日记 2025/2/5 19:58:21

【算法精练】二分查找算法总结

目录 前言 1. 二分查找&#xff08;基础版&#xff09; 2. 寻找左右端点 循环判断条件 求中间点 总结 前言 说起二分查找&#xff0c;也是一种十分常见的算法&#xff0c;最常听说的就是&#xff1a;二分查找只能在数组有序的场景下使用&#xff1b;其实也未必&#xff0c;…...

编程日记 2025/2/5 19:55:15

从零开始实现一个双向循环链表：C语言实战

文章目录 1链表的再次介绍2为什么选择双向循环链表&#xff1f;3代码实现&#xff1a;从初始化到销毁1. 定义链表节点2. 初始化链表3. 插入和删除节点4. 链表的其他操作5. 打印链表和判断链表是否为空6. 销毁链表 4测试代码5链表种类介绍6链表与顺序表的区别7存储金字塔L0: 寄存…...

编程日记 2025/2/5 19:49:04

MYSQL面试题总结（题目来源JavaGuide）

MYSQL基础架构 问题1&#xff1a;一条 SQL语句在MySQL中的执行过程 1. 解析阶段 (Parsing) 查询分析&#xff1a;当用户提交一个 SQL 语句时&#xff0c;MySQL 首先会对语句进行解析。这个过程会检查语法是否正确&#xff0c;确保 SQL 语句符合 MySQL 的语法规则。如果发现…...

编程日记 2025/2/5 19:46:00

visual studio安装

一、下载Visual Studio 访问Visual Studio官方网站。下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux 在主页上找到并点击“下载 Visual Studio”按钮。 选择适合需求的版本&#xff0c;例如“Visual Studio Community”&#xff08;免费版本&#xff09;&#x…...

编程日记 2025/2/5 19:39:55

JVM执行引擎

一、执行引擎的概述: 执行引擎是]ava虚拟机核心的组成部分之一; “虚拟机”是一个相对于“物理机”的概念&#xff0c;这两种机器都有代码执行能力&#xff0c;其区别是物理机的执行引擎是直接建立在处理器、缓存、指令集和操作系统层面上的&#xff0c;而虚拟机的执行引擎则…...

编程日记 2025/2/5 19:37:54

C# 9.0记录类型：解锁开发效率的魔法密码

一、引言&#xff1a;记录类型的神奇登场 在 C# 的编程世界中&#xff0c;数据结构就像是构建软件大厦的基石&#xff0c;其重要性不言而喻。然而&#xff0c;传统的数据结构定义方式&#xff0c;尤其是在处理简单的数据承载对象时&#xff0c;常常显得繁琐复杂。例如&#xf…...

编程日记 2025/2/5 19:29:43

搭建自己的专属AI——使用Ollama+AnythingLLM+Python实现DeepSeek本地部署

前言 最近DeepSeek模型非常火&#xff0c;其通过对大模型的蒸馏得到的小模型可以较轻松地在个人电脑上运行&#xff0c;这也使得我们有机会在本地构建一个专属于自己的AI&#xff0c;进而把AI“调教”为我们希望的样子。本篇文章中我将介绍如何使用OllamaAnythingLLMPython实现…...

编程日记 2025/2/5 19:28:40

『 C++ 』中理解回调类型在 C++ 中的使用方式。

文章目录 案例 1&#xff1a;图形绘制库中的回调使用场景说明代码实现代码解释 案例 2&#xff1a;网络服务器中的连接和消息处理回调场景说明代码实现代码解释 案例 3&#xff1a;定时器中的回调使用场景说明代码实现代码解释 以下将通过不同场景给出几个使用回调类型的具体案…...

编程日记 2025/2/5 19:24:36

git多人协作

目录 一、项目克隆 二、 1、进入克隆仓库设置 2、协作处理 3、冲突处理 4、多人协作分支的推送拉取删除 1、分支推送&#xff08;2种&#xff09; 2、远程分支拉取&#xff08;2种&#xff09; 3、远程分支删除 一、项目克隆 git clone 画船听雨眠/test1 (自定义的名…...

编程日记 2025/2/5 19:21:33

CTFSHOW-WEB入门-命令执行71-77

题目&#xff1a;web 71 题目&#xff1a;解题思路&#xff1a;分析可知highlight_file() 函数被禁了&#xff0c;先想办法看看根目录&#xff1a;cvar_export(scandir(dirname(‘/’))); 尝试一下发现很惊奇&#xff1a;&#xff08;全是&#xff1f;&#xff09;这种情况我也…...

编程日记 2025/2/5 19:15:26

浅谈《图解HTTP》

感悟 滑至尾页的那一刻&#xff0c;内心突兀的涌来一阵畅快的感觉。如果说从前对互联网只是懵懵懂懂&#xff0c;但此刻却觉得她是如此清晰而可爱的呈现在哪里。 介绍中说&#xff0c;《图解HTTP》适合作为第一本网络协议书。确实&#xff0c;它就像一座桥梁&#xff0c;连接…...

编程日记 2025/2/5 19:01:07

LLMs瞬间获得视觉与听觉感知，无需专门训练：Meta的创新——在图像、音频和视频任务上实现最优性能。

引言&#xff1a; 问题&#xff1a; 当前的多模态任务&#xff08;如图像、视频、音频描述生成、编辑、生成等&#xff09;通常需要针对特定任务训练专门的模型&#xff0c;而现有的方法在跨模态泛化方面存在局限性&#xff0c;难以适应新任务。此外&#xff0c;多模态嵌入反演…...

编程日记 2025/2/5 19:00:04

自研有限元软件与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、“…...

编程日记 2025/2/5 18:57:57

kubernetes 高可用集群搭建

在生产环境中部署 Kubernetes 集群时&#xff0c;确保其高可用性&#xff08;High Availability, HA&#xff09;是至关重要的。高可用性不仅意味着减少服务中断时间&#xff0c;还能提高系统的稳定性和可靠性。本文将详细介绍如何搭建一个高可用的 Kubernetes 集群&#xff0c…...

编程日记 2025/2/5 18:47:42

【C++】STL——vector底层实现

目录 &#x1f495; 1.vector三个核心 &#x1f495;2.begin函数&#xff0c;end函数的实现&#xff08;简单略讲&#xff09; &#x1f495;3.size函数&#xff0c;capacity函数的实现 &#xff08;简单略讲&#xff09; &#x1f495;4.reserve函数实现 &#xff08;细节…...

编程日记 2025/2/5 18:44:39

数据结构初探:链表之单链表篇

本文图皆为作者手绘,所有代码基于vs2022运行测试 系列文章目录 数据结构初探:顺序表篇 文章目录 系列文章目录前言一、链表基础概念二、链表的分类简化边界条件处理使代码更清晰简洁提高程序稳定性 1.单链表(不带头不循环的单链表);1.1存储结构;1.2准备工作1.3链表增删查改的实…...

编程日记 2025/2/5 18:40:35

介绍一下Mybatis的底层原理（包括一二级缓存）

表面上我们的就是Sql语句和我们的java对象进行映射&#xff0c;然后Mapper代理然后调用方法来操作数据库 底层的话我们就涉及到Sqlsession和Configuration 首先说一下SqlSession&#xff0c; 它可以被视为与数据库交互的一个会话&#xff0c;用于执行 SQL 语句&#xff08;Ex…...

编程日记 2025/2/5 18:35:29

Linux基础 ——tmux vim 以及基本的shell语法

Linux 基础 ACWING y总的Linux基础课&#xff0c;看讲义作作笔记。 tmux tmux 可以干嘛&#xff1f; tmux可以分屏多开窗口&#xff0c;可以进行多个任务&#xff0c;断线&#xff0c;不会自动杀掉正在进行的进程。 tmux – session(会话&#xff0c;多个) – window(多个…...

编程日记 2025/2/5 18:32:25

64位的谷歌浏览器Chrome/Google Chrome

64位的谷歌浏览器Chrome/Google Chrome 在百度搜索关键字:chrome&#xff0c;即可下载官方的“谷歌浏览器Chrome/Google Chrome”&#xff0c;但它可能是32位的&#xff08;切记注意网址&#xff1a;https://www.google.cn/....&#xff0c; 即&#xff1a;google.cn&#xff…...

编程日记 2025/2/5 18:24:17

jetson编译torchvision出现 No such file or directory: ‘:/usr/local/cuda/bin/nvcc‘

文章目录 1. 完整报错2. 解决方法 1. 完整报错 jetson编译torchvision,执行python3 setup.py install --user遇到报错 running build_ext error: [Errno 2] No such file or directory: :/usr/local/cuda/bin/nvcc完整报错信息如下&#xff1a; (pytorch) nxnx-desktop:~/Do…...

编程日记 2025/2/5 18:22:14

多线程创建方式三：实现Callable接口

实现Callable第三种方式存在的原因 作用&#xff1a;可以返回线程执行完毕后的结果。 前两种线程创建方式都存在的一个问题&#xff1a;假如线程执行完毕后有一些数据需要返回,他们重写的run方法均不能直接返回结果。 如何实现 ● JDK 5.0提供了Callable接口和FutureTask类来…...

编程日记 2025/2/5 18:15:06

Linux下的编辑器 —— vim

目录 1.什么是vim 2.vim的模式 认识常用的三种模式 三种模式之间的切换 命令模式和插入模式的转化 命令模式和底行模式的转化 插入模式和底行模式的转化 3.命令模式下的命令集 光标移动相关的命令 复制粘贴相关命令 撤销删除相关命令 查找相关命令 批量化注释和去…...

编程日记 2025/2/5 18:10:59

Docker技术相关学习二

一、Docker简介 1.Docker之父Solomon Hykes形容docker就像传统的货运集装箱。 2.docker的特点和优势&#xff1a; 轻量级虚拟化&#xff1a;Docker容器相较于传统的虚拟机更加的轻量和高效&#xff0c;能够快速的启动和停止来节省系统资源。 一致性&#xff1a;确保应用程序在不…...

编程日记 2025/2/5 18:07:54

【人工智能】多模态学习在Python中的应用：结合图像与文本数据的深度探索

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 多模态学习是人工智能领域的一个重要研究方向，旨在通过结合多种类型的数据（如图像、文本、音频等）来提高模型的性能。本文将深入探讨多模…...

编程日记 2025/2/5 18:00:44

【MySQL】常用语句

目录 1. 数据库操作2. 表操作3. 数据操作&#xff08;CRUD&#xff09;4. 高级查询5. 索引管理6. 用户与权限7. 数据导入导出8. 事务控制9. 其他实用语句注意事项 如果这篇文章对你有所帮助&#xff0c;渴望获得你的一个点赞&#xff01; 1. 数据库操作 创建数据库 CREATE DATA…...

编程日记 2025/2/5 17:58:39