网页核心页面设计（第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…...
uniapp支持App横竖屏开发总结
一、需求： app要支持重力感应自动切换横竖屏，并切换后样式不能错乱 二、实现 官方文档 官方Git manifest.json文件中 "app-plus" : {"screenOrientation" : ["portrait-primary","portrait-secondary","…...
【工作笔记】Lombok版本变化导致的反序列化异常
Lombok版本变化导致的反序列化异常 背景 因为安全性的考虑，最近在梳理旧系统的系统依赖。改动依赖时候还好，毕竟只是换掉不再合作公司的旧依赖，没敢动别的太多东西。不过没多久，测试团队就找来了… 排查问题之第一次跑偏 旧系…...
多模态大语言模型 MLLM 部署微调实践
1 MLLM 1.1 什么是 MLLM 多模态大语言模型（MultimodalLargeLanguageModel）是指能够处理和融合多种不同类型数据（如文本、图像、音频、视频等）的大型人工智能模型。这些模型通常基于深度学习技术，能够理解和生成多种模…...
LNMP和Discuz论坛
文章目录 LNMP和Discuz论坛1 LNMP搭建1.1 编译安装nginx服务1.1.1 编译安装1.1.2 添加到系统服务 1.2 编译安装MySQL服务1.2.1 准备工作1.2.2 编辑配置文件1.2.3 设置路径环境变量1.2.4 数据库初始化1.2.5 添加mysqld系统服务1.2.6 修改mysql的登录密码 1.3 编译安装PHP服务1.3…...
Cadence学习笔记 2 PCB封装绘制
基于Cadence 17.4，四层板4路HDMI电路 更多Cadence学习笔记：Cadence学习笔记 1 原理图库绘制 目录 2、PCB封装绘制 2、PCB封装绘制 封装尺寸如下。 用Allegro做PCB封装前，要先做焊盘（Allegro 比AD、PADS多一个步骤：绘制…...
网络安全——防火墙
基本概念 防火墙是一个系统，通过过滤传输数据达到防止未经授权的网络传输侵入私有网络，阻止不必要流量的同时允许必要流量进入。防火墙旨在私有和共有网络间建立一道安全屏障，因为网上总有黑客和恶意攻击入侵私有网络来破坏，防火…...
【CSS in Depth 2 精译_074】第 12 章 CSS 排版与间距概述 + 12.1 间距设置（下）：行内元素的间距设置
当前内容所在位置（可进入专栏查看其他译好的章节内容） 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 ✔️ 12.2 Web 字体12.3 谷歌字体 文章目…...
短视频矩阵抖音SEO源码OEM独立部署
短视频优化矩阵源码涉及对抖音平台上的视频内容进行筛选与排序，目的是增强其在搜索引擎中的可见度，以便更多用户能够浏览到这些视频。而抖音SEO优化系统则是通过构建一个分析框架，来解析抖音上的用户数据、视频信息及标签等元素，并…...
使用docker快速部署Nginx、Redis、MySQL、Tomcat以及制作镜像
文章目录 应用快速部署NginxRedisMySQLTomcat 制作镜像镜像原理基于已有容器创建使用 Dockerfile 创建镜像指令说明构建应用创建 Dockerfile 文件创建镜像 应用快速部署 Nginx docker run -d -p 80:80 nginx使用浏览器访问虚拟机地址 Redis docker pull redis docker run --…...
在ensp中ACL路由控制实验
一、实验目的 掌握ACL路由控制管理 二、实验要求 要求： 配置路由策略，左右两边不公开区域对方不可达，其他区域可以互相ping通 设备： 1、三台路由器 2、四台交换机 3、四台电脑 4、四台服务器 使用ensp搭建实验环境,如图所…...
服务网站备案/seo发包排名软件
1.两种思维方式在求职面试中，经常会考察这种问题：北京有多少量特斯拉汽车？ 某胡同口的煎饼摊一年能卖出多少个煎饼？ 深圳有多少个产品经理？ 一辆公交车里能装下多少个乒乓球？ 一个正常成年人有多少根头发&a…...
保定网站建设价格/旺道seo系统
Visual Studio.Net 打开一个工程的时候，有时候子项目很多，而且你有不是很熟悉这个项目。 然后你查找某个关键字，打开一个文件，你需要知道它在Solution Explorer中属于哪里，也就是高亮这个文件节点， 你应该怎…...
百度云 免费 网站主机/搜狗seo排名软件
shutdownshutdown指令以安全的方式来关闭系统，所有已经登录的用户都会被告知系统将要关闭。并且在最后五分钟内，新的登录将被阻止。过了指定的time后，关机会向init(8)守护进程发送一个请求，以便将系统降至适当的运行级别。这是通过…...
长沙网络营销首选智投未来/aso安卓优化公司
数据结构：是相互之间存在一种或多种特定关系的数据元素的集合。 1.数据结构起源 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。 2.基本概念和术语 数据数据元素数据项数据对象 3.逻辑结构和物…...
什么网站能和欧美国家的人做笔友/市场调研报告范文模板word
重复点击，多次触发的解决方案 $("").unbind(click).click(function(){}); 转载于:https://www.cnblogs.com/ch-zaizai/p/6509650.html...
网站策划书内容/小说推广平台有哪些
https://blog.csdn.net/goodlook0123/article/details/79757722 我已经搭建成功...