网页核心页面设计（第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…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
多模态大语言模型arxiv论文略读（108）
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
毫米波雷达基础理论（3D+4D）
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
Ubuntu系统复制（U盘-电脑硬盘）
所需环境 电脑自带硬盘：1块 (1T) U盘1：Ubuntu系统引导盘（用于“U盘2”复制到“电脑自带硬盘”） U盘2：Ubuntu系统盘（1T，用于被复制） ！！！建议“电脑…...
leetcode_69.x的平方根
题目如下 ： 看到题 ，我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历，我们是整数的平方根，所以我们分两…...
python打卡day49@浙大疏锦行
知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义 作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 一、通道注意力模块复习 & CBAM实现 import torch import torch.nn as nnclass CBAM(nn.Module):def __init__…...