网页核心页面设计（第8章）
一、伪元素
伪元素是 CSS 中的一种选择器，用于选择某些特定的元素或元素的一部分，而这些元素本身并不存在于文档的结构中。伪元素使得网页设计师可以更灵活地控制样式，从而可以为元素的内容、框架或文本提供额外的样式，增强网页的视觉效果和用户体验。
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>Document</title><style>div{width: 200px;height: 200px;line-height: 200px;text-align: center;font-size: 24px;background-color: #f3f3f3;margin: 0 auto; }div::before{content: "[";margin-right: 20px;/* display: none; */}div::after{content: "]";margin-left: 20px;/* display: none; */}div::before,div::after{transition: all .5s;opacity: 0;}div:hover::after,div:hover::before{opacity: 1;}</style>
</head>
<body><div>CSS</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>Document</title><style>div{width: 200px;height: 200px;line-height: 200px;text-align: center;font-size: 24px;background-color: #f3f3f3;position: relative;margin: 100px auto; }/*before：聊天框 after:三角形*/div::before{content: "CSS伪类";width: 200px;height: 50px;position: absolute;top: -80px;left: 0;background-color:red;border-radius: 60px;text-align: center;line-height: normal;}div::after{content: "";position: absolute;top: -30px;left: 75px;width: 0;height: 0;border:20px solid transparent;border-top:20px solid red ;}div::after,div::before{opacity: 0;transition: all 1s;}div:hover::before,div:hover::after{opacity: 1;}</style>
</head>
<body><div>CSS</div>
</body>
</html>
2、伪元素清除浮动
<!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>Document</title><style>div{width: 200px;height: 200px;line-height: 200px;text-align: center;font-size: 30px;color: white;}.floatbox{background-color: blue;float: left;}.box{background-color: red;}#wrap::after{content: "";display:block;height: 0;visibility: hidden;clear: both;}</style>
</head>
<body><div class="floatbox">float</div><div class="box"></div>
</body>
</html>
二、BFC
BFC 的特点
独立性：BFC 内部的元素不会影响外部元素，外部元素也不会影响内部元素。这种独立性使得布局更加可控。
清除浮动：当 BFC 中的元素浮动时，它会包裹住这些浮动的元素，避免其影响到外部的布局，有助于解决清除浮动的问题。
高度计算：BFC 可以计算其内部元素的高度，避免父元素高度塌陷的问题。即使内部没有内容，BFC 也会根据内部元素的布局计算出高度。
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>Document</title><style>div{width: 200px;height: 200px;background-color: red;/* 触发BFC，div内部区域会有bfc的特点 */overflow: hidden;}</style>
</head>
<body><div><p>这是一个p标签</p><div style="width: 100px; height: 100px;"><p >这是第二个个p标签</p></div></div>
</body>
</html>
2、margin重叠
<!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>Document</title><style>div{width: 200px;height: 200px;background-color: red;/* 触发BFC，div内部区域会有bfc的特点 */overflow: hidden;}</style>
</head>
<body><div><p>这是一个p标签</p><div style="width: 100px; height: 100px;"><p >这是第二个个p标签</p></div></div>
</body>
</html>
3、左边界接触
<!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>Document</title><style>div{width: 200px;height: 200px;background-color: red;/* 触发BFC，div内部区域会有bfc的特点 */overflow: hidden;}p{width: 100px;background-color: blue;overflow: hidden;}</style>
</head>
<body><div><p>这是一个p标签</p><p >这是第二个个p标签</p></div>
</body>
</html>
4、不会和浮动盒子重叠
<!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>Document</title><style>div{width: 200px;height: 200px;background-color: red;/* 触发BFC，div内部区域会有bfc的特点 *//* overflow: hidden; */}#float-box{float: left;}#bfc-box{height: 300px;background-color: blue;overflow: hidden;}</style>
</head>
<body><div id="float-box"></div><div id="bfc-box"></div>
</body>
</html>
5、隔离容器
<!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>Document</title><style>div{width: 200px;height: 200px;background-color: red;/* 触发BFC，div内部区域会有bfc的特点 *//* overflow: hidden; */}#float-box{color: red;/* display: flex; */}#bfc-box{height: 300px;background-color: blue;}</style>
</head>
<body><div id="float-box"><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p></div><div id="bfc-box"></div>
</body>
</html>
6、浮动元素高度计算
<!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>Document</title><style>div{width: 300px;/* height: 300px; */background-color: red;/* 触发BFC，div内部区域会有bfc的特点 */overflow: hidden;}#bfc-box{background-color: blue;/* overflow: hidden; */}#bfc-box p{float: left;width: 100px;}</style>
</head>
<body><div id="bfc-box"><p>这是一个p标签</p><p>这是一个p标签</p></div>
</body>
</html>
7、三栏式布局
<!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>Document</title><style>#left,#right{width: 200px;height: 300px;}#left{float: left;background-color: yellow;}#right{float: right;background-color:green;}#main{/* width: 100%; *//* min-width: 300px; */height: 500px;background-color: greenyellow;/* 触发bfc */overflow: hidden;}</style>
</head>
<body><div id="left"></div><div id="right"></div><div id="main"></div></body>
</html>
三、IFC
IFC 的特点
行内布局：IFC 主要影响行内元素及它们在文本流中的排列方式。行内元素在一行中布局，它们的高度和宽度通常由内容决定，而不会产生块级元素的特性。
行内上下文：在 IFC 中，行内元素可以在一行内与其他行内元素、文本、图像等交错显示，但不会导致行高的变化（除非用 line-height 等属性进行调整）。
包含的元素：在 IFC 内，可以包含其他行内元素和块级元素，但块级元素会触发上下文的变化，通常会导致换行。
对齐与间距：IFC 允许使用 vertical-align 和 text-align 等属性来控制元素的对齐和间距。
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>Document</title><style>div{border: 1px solid red;width: 400px;}</style>
</head>
<body><div><span>这是span标签</span><a href="#">百度一下</a><input type="text"><button>登录</button></div>
</body>
</html>
2、font-size
<!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>Document</title><style>div{border: 1px solid red;width: 400px;}span{}</style>
</head>
<body><div>整个ifc区域中只有文字<span>span中的 文字</span></div>
</body>
</html>
3、font-family
<!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>Document</title><style>div{border: 1px solid red;width: 400px;/* line-height: 2px; */font-family:'ca';font-size: 30px;/* line-height: 2px; *//* line-height: 1px; */line-height: 50px;font-size: 100px;}@font-face {font-family: "徐静蕾字体";src: url("font/徐静蕾字体.fon");}@font-face {font-family: "ca";src: url("font/Catamaran-Bold.ttf");}span{}</style>
</head>
<body><div><span>整个ifc</span> </div>
</body>
</html>
4、line-height
<!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>Document</title><style>div{border: 1px solid red;width: 400px;line-height: 2px;}span{/* line-height: 2;font-size的2倍 *//* line-height: 2px; */}</style>
</head>
<body><div>整个ifc区域中只有文字span中的 文字整个ifc区域中只有文字span中的 文字</div>
</body>
</html>
5、verrical-align
<!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>Document</title><style>div{border: 1px solid red;line-height: 160px;/* line-height: 148px; */font-family: "ca";}img,button,input{vertical-align: text-top;}img{/* height: 50px; */}span{}a{font-size: 140px;}@font-face {font-family: "ca";src: url("font/Catamaran-Bold.ttf");}</style>
</head>
<body><div>这是<img src="1.png" alt="">这是<a href="#">百度一下</a><input type="text"><button>登录</button></div>
</body>
</html>
四、弹性布局
弹性布局（Flexbox）是一种用于设计网页布局的CSS布局模式，它提供了一种更有效的方式来布置、对齐和分配空间给容器内的项目。弹性布局特别适用于需要在不同屏幕上进行响应式设计的场合。
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>Document</title><style>div{width: 200px;height: 200px;background-color: red;font-size: 30px;display: inline-block ;}#second{display: inline-flex;}</style>
</head><body><div>1</div><div id="second">2</div><div>3</div>
</body>
</html>
2、子元素
<!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>Document</title><style>#second{display: inline-flex;/* width: 1200px; */height: 500px;border:1px solid red;font-size: 30px;display:flex;justify-content: center;flex-wrap: wrap;margin: 0 auto;}#second div{width: 200px;height: 100px;margin-left: 20px;margin-top: 20px;background-color: red;}</style>
</head><body><div id="second"><div></div><div></div><div></div><div></div><div></div></div></body>
</html>
3、弹性容器-基础
<!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>Document</title><style>#list{width: 60%;margin: 0 auto;/* height: 1000px; */height: 1000px;background-color: #f3f3f3;display: flex;/* flex-direction: column-reverse; 改变主轴*/ justify-content: center;align-content: center;/* align-items: stretch; *//* align-items: center; */flex-wrap: wrap;}#list div{width: 200px;height: 200px;background-color: tomato;/* line-height: 200px; */text-align: center;font-size: 30px;color: white;}</style>
</head>
<body><div id="list"><div style="height: 150px;">1</div><div style="height: 200px;">2</div><div style="height: 300px;">3</div><div style="height: 200px;">4</div><!-- <div>1</div><div>2</div><div>3</div><div>4</div> --><!-- <div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div> --></div>
</body>
</html>
4、弹性容器-收缩比例
<!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>Document</title><style>#list{width: 600px;margin: 0 auto;/* height: 1000px; */height: 1000px;background-color: #f3f3f3;display: flex;/* flex-direction: column-reverse; 改变主轴*/ /* justify-content: center; *//* align-content: center; *//* align-items: stretch; *//* align-items: center; *//* flex-wrap: wrap; */}#list div{width: 200px;height: 200px;background-color: tomato;/* line-height: 200px; */text-align: center;font-size: 30px;color: white;}</style>
</head>
<body><div id="list"><!-- <div style="height: 150px;">1</div><div style="height: 200px;">2</div><div style="height: 300px;">3</div><div style="height: 200px;">4</div> --><div style="flex-shrink: 1;">1</div><div style="flex-shrink: 1;">2</div><div style="flex-shrink: 0;">3</div><div style="flex-shrink: 0;">4</div><!-- <div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div> --></div>
</body>
</html>
五、jquery基础
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档的遍历和操作、事件处理、动画以及 Ajax 交互。
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>Document</title><style>body {margin: 0;}header {height: 50px;background-color: #ccc;display: flex;}img {width: 10%;}ul {width: 90%;list-style: none;margin: 0;padding: 0;display: flex;}li {width: 20%;text-align: center;line-height: 50px;}.item {width: 300px;/* height: 400px; */padding: 10px;box-sizing: border-box;margin-bottom: 15px;border: 1px solid #ccc;/* flex-grow: 1; */margin-left: 15px;transition: all 0.5s;}.item img {width: 100%;}.price {color: darkred;font-size: 24px;font-weight: bold;}main {width: 80%;margin: 0 auto;border: 1px solid red;/* height: 2000px; */display: flex;flex-wrap: wrap;justify-content: space-evenly;align-content: flex-start;}#first{background-color: darkred;order: 1;}#last{background-color: darkblue;order: -1;}</style></head><body><header><img src="images/logo.png" alt="" /><ul><li>第1项哈哈哈</li><li>第2项哈哈哈</li><li>第3项哈哈哈</li><li>第4项哈哈哈</li><li>第5项哈哈哈</li></ul></header><main id="list"><div class="item" id="first"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item" id="last"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div></main></body>
</html>
2、字体图标设计
<!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>Document</title><link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"><style>a{color: red;}</style>
</head>
<body><i class="fa fa-pencil-square-o" aria-hidden="true"></i><a href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>百度一下</a>
</body>
</html>
3、实战
<!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>Document</title><link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"><style>body{background-color: #f3f3f3;margin: 0;}header{height: 50px;background-color: black;display: flex;justify-content: space-between;position: fixed;top: 0;width: 100%;z-index: 2;}#logo{height: 50px;line-height: 50px;}#logo img{height: 30px;vertical-align: middle;}header ul{/* width: 90%;min-width: 700px; */margin: 0;padding: 0;list-style: none;display: flex;color: white;/* align-content: center; */}header ul li{line-height: 50px;/* padding:20px; */width: 100px;text-align: center;}#search-box{height: 500px;background-image: url("images/4.jpg");background-repeat: no-repeat;background-size: cover;display: flex;justify-content: center;align-content: center;flex-wrap: wrap;background-attachment: fixed;position: relative;}#search-box .search{width: 500px;height: 200px;background-color: blue;position: fixed;top: 150px;left: 0;right: 0;margin:auto;}nav{background-color: #fff;color: gray;height: 50px;}nav ul{height: 100%;width: 80%;list-style: none;margin: 0 auto;padding: 0;display: flex;align-content: center;flex-wrap: wrap;}nav ul li{flex-grow: 1;text-align: center;height: 25px;border-right: 1px solid #ccc;}.noborder{border: none;}main{width: 80%;margin: 0 auto;display: flex;flex-wrap: wrap;}main div{flex-grow: 1;width: 200px;height: 200px;background-color: darkred;line-height: 200px;font-size: 30px;color: white;text-align: center;margin-top: 15px;margin-left: 15px;}main div:hover{box-shadow: 0 0 10px 5px rgba(0,0,0);}#main{width: 100%;height: 2000px;position: relative;z-index: 1;background-color: #f3f3f3;}</style>
</head>
<body><header><div id="logo"> <img src="images/logo.png" alt=""></div><ul><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li></ul></header><!-- 搜索区域 --><div id="search-box"><div class="search"><input type="text"><button>登录</button></div></div><div id="main"><nav><ul><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li class="noborder"><i class="fa fa-edit"></i>网页模板</li></ul></nav><main><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></main></div>
</body>
</html>
4、边框阴影
<!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>Document</title><style>div{width: 200px;height: 200px;background-color: red;margin: 200px auto;box-shadow: 0 0 3px 3px #aaa;}</style>
</head>
<body><div></div>
</body>
</html>
5、边框固定
<!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>Document</title><style>#demo{width: 100%;height: 400px; margin: 0px auto;box-shadow: 0 0 3px 3px #aaa;background-image: url("images/4.jpg");background-size: cover;margin-bottom: 0px;background-attachment: fixed;}#demo2{width: 800px;height: 2300px; background-color: red;margin: 0 auto;background-image: url("images/id1.jpg");background-repeat: no-repeat;}</style>
</head>
<body><div id="demo"></div><div id="demo2"></div></body>
</html>
🌈本篇博客的内容【网页核心页面设计】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。
相关文章：
网页核心页面设计（第8章）
一、伪元素 伪元素是 CSS 中的一种选择器，用于选择某些特定的元素或元素的一部分，而这些元素本身并不存在于文档的结构中。伪元素使得网页设计师可以更灵活地控制样式，从而可以为元素的内容、框架或文本提供额外的样式，增强网页的…...
在PowerShell下运行curl命令出现错误：Invoke-WebRequest : 无法处理参数，因为参数名称“u”具有二义性
今天在Windows 11下测试Nanamq的HTTP API，按照其文档输入： curl -i --basic -u admin:public -X GET "http://localhost:8081/api/v4/subscriptions" 结果出现二义性错误： 而且输入curl --help命令想看看参数说明的时候ÿ…...
医疗花费预测——协方差矩阵和热力图
引言 在医疗数据分析中，预测个人的医疗花费是一个重要的课题。这不仅有助于个人健康管理，也为医疗资源的合理分配提供了数据支持。本篇博客，我们将探讨如何利用协方差矩阵和热力图来分析和预测个人的医疗花费。我们将以DataFountain提供的数…...
react antd tabs router 基础管理后台模版
在构建 React 后台管理系统时，使用标签页的方式展示路由是一种高效且用户友好的设计模式。这种实现方式通常允许用户在多个页面之间快速切换，并保留页面的状态，类似于浏览器的多标签页功能。 需求分析 1.动态标签页：根据用户的导…...
【数据结构——栈与队列】环形队列的基本运算（头歌实践教学平台习题）【合集】
目录😋 任务描述 相关知识 测试说明 我的通关代码: 测试结果： 任务描述 本关任务：编写一个程序实现环形队列的基本运算。 相关知识 为了完成本关任务，你需要掌握： 初始化队列、销毁队列、判断队列是否为空、进队列…...
【数据结构——栈与队列】链栈的基本运算（头歌实践教学平台习题）【合集】
目录😋 任务描述 相关知识 测试说明 我的通关代码: 测试结果： 任务描述 本关任务：编写一个程序实现链栈的基本运算。 相关知识 为了完成本关任务，你需要掌握： 初始化栈、销毁栈、判断栈是否为空、进栈、出栈、取栈…...
GIT CLONE ERROR: remote: [session-ec426a86] Access denied
报错信息： remote: [session-ec426a86] Access denied 错误原因： 1.更换了不同的GIT仓或者账号 2.之前设置了默认账号密码信息 3. git init 只初始化了GIT项目，并没有清空原有的账号密码配置 处理方法： win11需要到个人文件…...
GitHub 正式收录 MoonBit 作为一门通用编程语言！核心用户突破三万！
MoonBit 编程语言正式被 Github 收录！这对于一个仅有两年发展时间的编程语言来说是一种高度认可，期待未来由 MoonBit 编写的项目数量快速增长，早日成为首个由国人研发迈进 10 万➕ 用户的编程语言。 最近用户数已经接近 3 万（数据…...
PHP中GD库的使用
由于我要用到php的验证码 <?php session_start();// 生成验证码 $random_code substr(md5(uniqid(mt_rand(), true)), 0, 6);// 将验证码保存到 session 中 $_SESSION[captcha] $random_code;// 创建图片 $font 6; $image_width 100; $image_height 40;// 创建图像 $…...
docker安装Elasticsearch和Kibana
上传文件 加载tar包 安装 1.安装elasticsearch 通过下面的Docker命令即可安装单机版本的elasticsearch： docker run -d \--name es \-e "ES_JAVA_OPTS-Xms512m -Xmx512m" \-e "discovery.typesingle-node" \-v es-data:/usr/share/elastics…...
【Linux】文件管理必备知识和基本指令
【Linux】文件管理必备知识和基本指令 什么是操作系统什么是文件什么是路径01. ls 指令02. pwd命令03. cd 指令04. touch指令05.mkdir指令（重要）：06.rmdir指令 && rm 指令（重要）：rmdir指令rm指令 0…...
欢迪迈手机商城设计与实现
文末获取源码和万字论文，制作不易，感谢点赞支持。 题目：欢迪迈手机商城设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管…...
量化交易系统开发-实时行情自动化交易-3.4.2.3.数字货币市场深度数据
19年创业做过一年的量化交易但没有成功，作为交易系统的开发人员积累了一些经验，最近想重新研究交易系统，一边整理一边写出来一些思考供大家参考，也希望跟做量化的朋友有更多的交流和合作。 接下来聊聊基于Okex交易所API获取市场深…...
有序集合ZSET【Redis对象篇】
🏆 作者简介：席万里 ⚡ 个人网站：https://dahua.bloggo.chat/ ✍️ 一名后端开发小趴菜，同时略懂Vue与React前端技术，也了解一点微信小程序开发。 🍻 对计算机充满兴趣，愿意并且希望学习更多的技…...
力扣-图论-9【算法学习day.59】
前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程（例如想要掌握基础用法，该刷哪些题？）我的解析也不会做的非常详细，只会提供思路和一些关键点，力扣上的大佬们的题解质量是非…...
如何选择安全、可验证的技术？
澳大利亚信号局的澳大利亚网络安全中心 (ASD 的 ACSC) 发布了一份指导文件，题为《选择安全和可验证的技术》，旨在帮助组织在采购软件（专有或开源）、硬件（例如物联网设备）和云服务（SaaS、MSP 服务…...
Allure在自动化测试中的应用
01 Allure的简介及使用 1、应用场景 自动化的结果一定是通过一个报告来进行体现 Allure 是一个独立的报告插件，生成美观易读的报告，目前支持Python、Java、PHP、C#等语言 为dev/QA 提供详尽的测试报告、测试步骤、日志，也可以为管理层提供统…...
C# 探险之旅：第十一节 - 循环(foreach)：一场“遍历”奇幻岛的大冒险！
嘿，勇敢的探险家们！欢迎来到C#奇幻岛的第十一站——“遍历”奇幻岛！今天，我们要乘坐一艘叫做foreach的魔法船，去遍历（也就是一个一个看过来）岛上那些神秘的宝藏箱！准备好了吗&#x…...
Ubuntu24.04配置STMTrack
项目地址：https://github.com/fzh0917/STMTrack 一、安装 CUDA 参考链接： Ubuntu24.04配置DINO-Tracker Ubuntu多CUDA版本安装及切换 由于之前在其他项目中已经安装了 CUDA12.1，这次需要安装另一个版本。 1. 查看安装版本 按照 requireme…...
【Java学习笔记】Map接口和常用方法
一、 Map接口实现类的 特点[很实用] key是自己存的java对象 value是一个固定的 //当有相同的 k ,就等价于替换. 二、 Map常用方法 （根据键–>k） 三、Map接口遍历方法 package com.hspedu.map_; import java.util.*; /** * author 韩顺平 * ver…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...