32 登录页组件

效果演示

32 登录页组件.gif

实现了一个登录页面的样式,包括一个容器、左侧和右侧部分。左侧部分是一个背景图片,右侧部分是一个表单,包括输入框、复选框、按钮和忘记密码链接。整个页面的背景色为白色,容器为一个圆角矩形,表单为一个半透明的背景色,输入框和按钮为白色,边框为1像素的灰色。当鼠标悬停在输入框上时,输入框的边框变为红色。当点击按钮时,按钮的背景色变为蓝色。忘记密码链接为蓝色。整个页面的布局为左右布局,左侧占66%,右侧占34%。

Code

<div class="container"><div class="left"><form class="form"><div class="input-block"><input class="input" type="text" id="email" required=""><label for="email">Username</label></div><div class="input-block"><input class="input" type="password" id="pass" required=""><label for="pass">Password</label></div><div class="input-block"><span class="forgot"><a href="#">Forgot Password?</a></span><button>Submit</button></div></form></div><div class="right"><div class="img"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"viewBox="0 0 731.67004 550.61784" xmlns:xlink="http://www.w3.org/1999/xlink"><pathd="M0,334.13393c0,.66003,.53003,1.19,1.19006,1.19H730.48004c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H1.19006c-.66003,0-1.19006,.53003-1.19006,1.19Z"fill="#3f3d56"></path><polygonpoints="466.98463 81.60598 470.81118 130.55703 526.26809 107.39339 494.98463 57.60598 466.98463 81.60598"fill="#a0616a"></polygon><circle cx="465.32321" cy="55.18079" r="41.33858" fill="#a0616a"></circle><polygonpoints="387.98463 440.60598 394.98463 503.39339 345.98463 496.60598 361.98463 438.60598 387.98463 440.60598"fill="#a0616a"></polygon><polygonpoints="578.98463 449.60598 585.98463 512.39339 536.98463 505.60598 552.98463 447.60598 578.98463 449.60598"fill="#a0616a"></polygon><pathd="M462.48463,260.10598c-.66897,0-54.14584,2.68515-89.47714,4.46286-16.72275,.84141-29.45202,15.31527-28.15459,32.00884l12.63173,162.5283,36,1,.87795-131,71.12205,4-3-73Z"fill="#2f2e41"></path><pathd="M619.48463,259.10598s9,69,2,76c-7,7-226.5-5.5-226.5-5.5,0,0,48.15354-69.53704,56.82677-71.51852,8.67323-1.98148,146.67323-8.98148,146.67323-8.98148l21,10Z"fill="#2f2e41"></path><path id="uuid-91047c5b-47d7-4179-8a16-40bd6d529b28-203"d="M335.12666,172.23337c-8.35907-11.69074-9.10267-25.48009-1.66174-30.79863,7.44093-5.31854,20.24665-.15219,28.60713,11.54383,3.40375,4.62627,5.65012,10.00041,6.55111,15.67279l34.79215,49.9814-19.8001,13.70807-35.7745-48.83421c-5.07753-2.68845-9.43721-6.55406-12.71405-11.27326Z"fill="#a0616a"></path><path d="M464.98463,112.60598l51-21,96,148s-67,15-90,18c-23,3-49-9-49-9l-8-136Z" fill="#6c63ff"></path><pathd="M526.98463,137.60598l-18.5-57.70866,24,18.20866s68,45,68,64c0,19,21,77,21,77,0,0,23.5,19.5,15.5,37.5-8,18,10.5,15.5,12.5,28.5,2,13-28.5,30.5-28.5,30.5,0,0-7.5-73.5-31.5-73.5-24,0-62.5-124.5-62.5-124.5Z"fill="#3f3d56"></path><pathd="M468.56831,111.13035l-25.08368,9.97563s4,70,8,76c4,6,18,38,18,38v10.42913s-28,8.57087-27,13.57087c1,5,66,19,66,19,0,0-13-40-21-53-8-13-18.91632-113.97563-18.91632-113.97563Z"fill="#3f3d56"></path><pathd="M452.48463,121.10598s-29-4-34,30c-5,34-1.82283,38.5-1.82283,38.5l-8.17717,19.5-27-30-26,17s47,76,66,74c19-2,47-57,47-57l-16-92Z"fill="#3f3d56"></path><pathd="M597.32321,270.14478l-14.83858,209.96121-38.5-1.5s-8.5-198.5-8.5-201.5c0-3,4-20,29-21,25-1,32.83858,14.03879,32.83858,14.03879Z"fill="#2f2e41"></path><pathd="M541.48463,484.10598s20-6,23-2c3,4,20,6,20,6l5,49s-14,10-16,12-55,4-56-8c-1-12,14-27,14-27l10-30Z"fill="#2f2e41"></path><pathd="M394.48463,470.10598s6-5,8,9c2,14,9,37-1,40-10,3-110,4-110-5v-9l9-7,18.00394-2.869s34.99606-32.131,38.99606-32.131c4,0,17,13,17,13l20-6Z"fill="#2f2e41"></path><pathd="M505.98463,77.60598s-20-24-28-22-3,5-3,5l-20-22s-16-6-31,13c0,0-9-16,0-25,9-9,12-8,14-13,2-5,16-9,16-9,0,0-.80315-7.19685,3.59843-3.59843s15.3937,3.59843,15.3937,3.59843c0,0,.06299-4,4.53543,0,4.47244,4,9.47244,2,9.47244,2,0,0,0,6.92126,3.5,6.96063,3.5,.03937,9.5-4.96063,10.5-.96063,1,4,8,6,9,18,1,12-4,47-4,47Z"fill="#2f2e41"></path><g><pathd="M342.99463,178.84874l-114.2362,78.82694c-3.94205,2.72015-9.36214,1.72624-12.08229-2.21581l-32.16176-46.60891c-2.72015-3.94205-1.7259-9.36208,2.21615-12.08223l114.2362-78.82694c3.94205-2.72015,9.36214-1.72624,12.08229,2.21581l32.16176,46.60891c2.72015,3.94205,1.7259,9.36208-2.21615,12.08223Z"fill="#fff"></path><pathd="M312.83914,120.30274l32.16148,46.6085c2.64627,3.83499,1.68408,9.08121-2.15091,11.72749l-56.06388,38.68602c-14.78562-4.04015-28.2774-13.11486-37.66263-26.71596-6.14766-8.9092-9.85314-18.77211-11.26649-28.80885l63.25494-43.6481c3.83499-2.64627,9.08121-1.68408,11.72749,2.15091Z"fill="#e6e6e6"></path><pathd="M223.84012,260.20913c-3.0791,0-6.10938-1.46094-7.9873-4.18066l-32.16211-46.60938c-1.4668-2.12695-2.01758-4.7002-1.5498-7.24805,.4668-2.54785,1.89551-4.75879,4.02246-6.22559l114.23535-78.82715c4.39746-3.03223,10.44043-1.92285,13.47363,2.4707l32.16211,46.60938c1.4668,2.12695,2.01758,4.7002,1.5498,7.24805-.4668,2.54688-1.89551,4.75879-4.02148,6.22559l-114.23633,78.82715c-1.67578,1.15527-3.59082,1.70996-5.48633,1.70996Zm82.04785-142.80176c-1.50391,0-3.02344,.44043-4.35254,1.35742l-114.23633,78.82715c-1.6875,1.16309-2.82031,2.91797-3.19141,4.94043-.37109,2.02148,.06543,4.06445,1.22949,5.75l32.16211,46.60938c2.40625,3.48633,7.20215,4.36816,10.69043,1.96094l114.2373-78.82715c1.68652-1.16309,2.81934-2.91797,3.19043-4.94043,.37109-2.02148-.06543-4.06445-1.22949-5.75l-32.16211-46.60938c-1.48926-2.1582-3.89453-3.31836-6.33789-3.31836Z"fill="#3f3d56"></path><pathd="M224.6666,236.93718c-2.89521,1.9978-3.6253,5.97848-1.6275,8.87369,1.9978,2.89521,5.97848,3.6253,8.87369,1.6275l11.76134-8.11573c2.89521-1.9978,3.6253-5.97848,1.6275-8.87369-1.9978-2.89521-5.97848-3.6253-8.87369-1.6275l-11.76134,8.11573Z"fill="#6c63ff"></path><pathd="M232.63862,171.91114c-4.56802,3.15209-5.71978,9.43286-2.56769,14.00088,3.15209,4.56802,9.43252,5.71972,14.00054,2.56763l18.29546-12.6245c4.56802-3.15209,5.72007-9.43245,2.56797-14.00047-3.15209-4.56802-9.4328-5.72013-14.00082-2.56804l-18.29546,12.6245Z"fill="#6c63ff"></path></g><g><pathd="M340.25926,185.80874H201.4659c-4.78947,0-8.68608-3.89636-8.68608-8.68583v-56.62834c0-4.78947,3.89661-8.68583,8.68608-8.68583h138.79336c4.78947,0,8.68608,3.89636,8.68608,8.68583v56.62834c0,4.78947-3.89661,8.68583-8.68608,8.68583Z"fill="#fff"></path><pathd="M348.69017,120.49482v56.62784c0,4.65939-3.77152,8.43091-8.43091,8.43091h-68.11583c-9.87497-11.72273-15.82567-26.8544-15.82567-43.37931,0-10.82439,2.55172-21.04674,7.08876-30.11034h76.85275c4.65939,0,8.43091,3.77152,8.43091,8.43091Z"fill="#e6e6e6"></path><pathd="M340.25907,186.80874H201.4661c-5.34082,0-9.68652-4.34473-9.68652-9.68555v-56.62891c0-5.34082,4.3457-9.68555,9.68652-9.68555h138.79297c5.34082,0,9.68652,4.34473,9.68652,9.68555v56.62891c0,5.34082-4.3457,9.68555-9.68652,9.68555ZM201.4661,112.80874c-4.23828,0-7.68652,3.44727-7.68652,7.68555v56.62891c0,4.23828,3.44824,7.68555,7.68652,7.68555h138.79297c4.23828,0,7.68652-3.44727,7.68652-7.68555v-56.62891c0-4.23828-3.44824-7.68555-7.68652-7.68555H201.4661Z"fill="#3f3d56"></path><pathd="M209.87637,166.41564c-3.51759,0-6.37931,2.86172-6.37931,6.37931s2.86172,6.37931,6.37931,6.37931h14.28966c3.51759,0,6.37931-2.86172,6.37931-6.37931s-2.86172-6.37931-6.37931-6.37931h-14.28966Z"fill="#6c63ff"></path><pathd="M253.36907,117.42253c-5.55,0-10.06511,4.51536-10.06511,10.06536s4.51511,10.06486,10.06511,10.06486h22.22841c5.55,0,10.06511-4.51486,10.06511-10.06486s-4.51511-10.06536-10.06511-10.06536h-22.22841Z"fill="#6c63ff"></path></g><g><pathd="M456.25926,381.80874h-138.79336c-4.78947,0-8.68608-3.89636-8.68608-8.68583v-56.62834c0-4.78947,3.89661-8.68583,8.68608-8.68583h138.79336c4.78947,0,8.68608,3.89636,8.68608,8.68583v56.62834c0,4.78947-3.89661,8.68583-8.68608,8.68583Z"fill="#fff"></path><pathd="M464.69017,316.49482v56.62784c0,4.65939-3.77152,8.43091-8.43091,8.43091h-68.11583c-9.87497-11.72273-15.82567-26.8544-15.82567-43.37931,0-10.82439,2.55172-21.04674,7.08876-30.11034h76.85275c4.65939,0,8.43091,3.77152,8.43091,8.43091Z"fill="#e6e6e6"></path><pathd="M456.25907,382.80874h-138.79297c-5.34082,0-9.68652-4.34473-9.68652-9.68555v-56.62891c0-5.34082,4.3457-9.68555,9.68652-9.68555h138.79297c5.34082,0,9.68652,4.34473,9.68652,9.68555v56.62891c0,5.34082-4.3457,9.68555-9.68652,9.68555Zm-138.79297-74c-4.23828,0-7.68652,3.44727-7.68652,7.68555v56.62891c0,4.23828,3.44824,7.68555,7.68652,7.68555h138.79297c4.23828,0,7.68652-3.44727,7.68652-7.68555v-56.62891c0-4.23828-3.44824-7.68555-7.68652-7.68555h-138.79297Z"fill="#3f3d56"></path><pathd="M325.87637,362.41564c-3.51759,0-6.37931,2.86172-6.37931,6.37931s2.86172,6.37931,6.37931,6.37931h14.28966c3.51759,0,6.37931-2.86172,6.37931-6.37931s-2.86172-6.37931-6.37931-6.37931h-14.28966Z"fill="#6c63ff"></path><pathd="M369.36907,313.42253c-5.55,0-10.06511,4.51536-10.06511,10.06536s4.51511,10.06486,10.06511,10.06486h22.22841c5.55,0,10.06511-4.51486,10.06511-10.06486s-4.51511-10.06536-10.06511-10.06536h-22.22841Z"fill="#6c63ff"></path></g><path id="uuid-c026fd96-7d81-4b34-bb39-0646c0e08e96-204"d="M465.67391,331.01678c-12.74718,6.63753-26.5046,5.44058-30.72743-2.67249-4.22283-8.11308,2.6878-20.06802,15.44041-26.70621,5.05777-2.72156,10.69376-4.19231,16.43644-4.28916l54.36547-27.44139,10.79681,21.52636-53.36733,28.57487c-3.37375,4.65048-7.81238,8.42516-12.94437,11.00803Z"fill="#a0616a"></path><path d="M527.48463,97.10598s56-3,68,27c12,30,22,128,22,128l-122,66.37402-21-32.37402,82-64-29-125Z"fill="#3f3d56"></path></svg></div></div>
</div>
body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #e8e8e8;
}.container {display: flex;width: 520px;height: 500px;max-width: 99%;align-items: center;justify-content: center;position: relative;overflow: hidden;background-color: #ffffff25;border-radius: 15px;box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.03);border: 0.1px solid rgba(128, 128, 128, 0.178);
}.left {width: 66%;height: 100%;
}.form {display: flex;flex-direction: column;justify-content: center;height: 100%;width: 100%;left: 0;backdrop-filter: blur(20px);position: relative;
}.form::before {position: absolute;content: "";width: 40%;height: 40%;right: 1%;z-index: -1;background: radial-gradient(circle,rgb(194, 13, 170) 20%,rgb(26, 186, 235) 60%,rgb(26, 186, 235) 100%);filter: blur(70px);border-radius: 50%;
}.right {width: 34%;height: 100%;
}.img {width: 100%;height: 100%;
}.container::after {position: absolute;content: "";width: 80%;height: 80%;right: -40%;background: rgb(157, 173, 203);background: radial-gradient(circle,rgba(157, 173, 203, 1) 61%,rgba(99, 122, 159, 1) 100%);border-radius: 50%;z-index: -1;
}.input,
button {background: rgba(253, 253, 253, 0);outline: none;border: 1px solid rgba(255, 0, 0, 0);border-radius: 0.5rem;padding: 10px;margin: 10px auto;width: 80%;display: block;color: #425981;font-weight: 500;font-size: 1.1em;
}.input-block {position: relative;
}label {position: absolute;left: 15%;top: 37%;pointer-events: none;color: gray;
}.forgot {display: block;margin: 5px 0 10px 0;margin-left: 35px;color: #5e7eb6;font-size: 0.9em;
}.input:focus+label,
.input:valid+label {transform: translateY(-120%) scale(0.9);transition: all 0.4s;
}button {background-color: #5e7eb6;color: white;font-size: medium;box-shadow: 2px 4px 8px rgba(70, 70, 70, 0.178);
}a {color: #5e7eb6;
}.input {box-shadow: inset 4px 4px 4px rgba(165, 163, 163, 0.315),4px 4px 4px rgba(218, 218, 218, 0.13);
}

实现思路拆分

body {height: 100vh; /* 设置body高度为视口高度 */display: flex; /* 设置body元素为flex布局 */justify-content: center; /* 设置主轴对齐方式为居中对齐 */align-items: center; /* 设置交叉轴对齐方式为居中对齐 */background-color: #e8e8e8; /* 设置背景颜色为灰色 */
}

这段代码设置了整个页面的样式,包括高度、布局方式、对齐方式和背景颜色。

.container {display: flex; /* 设置容器元素为flex布局 */width: 520px; /* 设置容器宽度为520像素 */height: 500px; /* 设置容器高度为500像素 */max-width: 99%; /* 设置容器最大宽度为99% */align-items: center; /* 设置交叉轴对齐方式为居中对齐 */justify-content: center; /* 设置主轴对齐方式为居中对齐 */position: relative; /* 设置容器元素为相对定位 */overflow: hidden; /* 设置容器元素超出范围时隐藏溢出部分 */background-color: #ffffff25; /* 设置容器背景颜色为半透明白色 */border-radius: 15px; /* 设置容器边框为圆角矩形 */box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.03); /* 设置容器阴影效果 */border: 0.1px solid rgba(128, 128, 128, 0.178); /* 设置容器边框为0.1像素的灰色实线 */
}

这段代码设置了登录页面容器的样式,包括布局方式、尺寸、对齐方式、定位方式、溢出处理、背景颜色、边框半径、阴影效果和边框样式。

.left {width: 66%; /* 设置左侧部分宽度为66% */height: 100%; /* 设置左侧部分高度为100% */
}

这段代码设置了登录页面左侧部分的样式,包括宽度和高度。

.form {display: flex; /* 设置表单元素为flex布局 */flex-direction: column; /* 设置表单元素的主轴方向为垂直方向 */justify-content: center; /* 设置表单元素的交叉轴对齐方式为居中对齐 */height: 100%; /* 设置表单元素高度为100% */width: 100%; /* 设置表单元素宽度为100% */left: 0; /* 设置表单元素左侧位置为0 */backdrop-filter: blur(20px); /* 设置表单元素背景模糊程度为20px */position: relative; /* 设置表单元素为相对定位 */
}

这段代码设置了登录页面表单的样式,包括布局方式、主轴方向、交叉轴对齐方式、高度、宽度、左侧位置、背景模糊程度和定位方式。

.form::before {position: absolute; /* 设置伪元素为绝对定位 */content: ""; /* 设置伪元素的内容为空 */width: 40%; /* 设置伪元素宽度为40% */height: 40%; /* 设置伪元素高度为40% */right: 1%; /* 设置伪元素右侧位置为1% */z-index: -1; /* 设置伪元素的层叠顺序为-1 */background: radial-gradient(circle,rgb(194, 13, 170) 20%,rgb(26, 186, 235) 60%,rgb(26, 186, 235) 100%); /* 设置伪元素的背景为径向渐变色 */filter: blur(70px); /* 设置伪元素的模糊程度为70px */border-radius: 50%; /* 设置伪元素的边框为圆形 */
}

这段代码设置了登录页面表单的背景伪元素的样式,包括位置、大小、位置、层叠顺序、背景、模糊程度和边框半径。

.right {width: 34%; /* 设置右侧部分宽度为34% */height: 100%; /* 设置右侧部分高度为100% */
}

这段代码设置了登录页面右侧部分的样式,包括宽度和高度。

.img {width: 100%; /* 设置图片宽度为100% */height: 100%; /* 设置图片高度为100% */
}

这段代码设置了登录页面图片的样式,包括宽度和高度。

.container::after {position: absolute; /* 设置伪元素为绝对定位 */content: ""; /* 设置伪元素的内容为空 */width: 80%; /* 设置伪元素宽度为80% */height: 80%; /* 设置伪元素高度为80% */right: -40%; /* 设置伪元素右侧位置为-40% */background: rgb(157, 173, 203); /* 设置伪元素的背景为深蓝色 */background: radial-gradient(circle,rgba(157, 173, 203, 1) 61%,rgba(99, 122, 159, 1) 100%); /* 设置伪元素的背景为径向渐变色 */border-radius: 50%; /* 设置伪元素的边框为圆形 */z-index: -1; /* 设置伪元素的层叠顺序为-1 */
}

这段代码设置了登录页面容器的背景伪元素的样式,包括位置、大小、位置、背景、边框半径和层叠顺序。

.input,
button {background: rgba(253, 253, 253, 0); /* 设置输入框和按钮的背景颜色为透明 */outline: none; /* 设置输入框和按钮的轮廓线为none */border: 1px solid rgba(255, 0, 0, 0); /* 设置输入框和按钮的边框为1px红色实线 */border-radius: 0.5rem; /* 设置输入框和按钮的圆角半径为0.5rem */padding: 10px; /* 设置输入框和按钮的内边距为10px */margin: 10px auto; /* 设置输入框和按钮的外边距为10px自动 */width: 80%; /* 设置输入框和按钮的宽度为80% */display: block; /* 设置输入框和按钮为块级元素 */color: #425981; /* 设置输入框和按钮的文本颜色为深蓝色 */font-weight: 500; /* 设置输入框和按钮的字体粗细为500 */font-size: 1.1em; /* 设置输入框和按钮的字体大小为1.1em */
}

这段代码设置输入框和按钮的样式,包括背景颜色、轮廓线、边框、圆角半径、内边距、外边距、宽度、块级元素、文本颜色、字体粗细和字体大小。

.input-block {position: relative;
}

这段代码设置一个相对定位的容器,用于放置输入框和标签。

label {position: absolute;left: 15%;top: 37%;pointer-events: none;color: gray;
}

这段代码设置标签的样式,包括绝对定位、距离左侧的距离、距离顶部的距离、指针事件为none、文本颜色为灰色。

.forgot {display: block;margin: 5px 0 10px 0;margin-left: 35px;color: #5e7eb6;font-size: 0.9em;
}

这段代码设置忘记密码的样式,包括块级元素、上下外边距、左侧外边距、文本颜色和字体大小。

.input:focus+label,
.input:valid+label {transform: translateY(-120%) scale(0.9);transition: all 0.4s;
}

这段代码设置输入框获得焦点或输入有效时的样式,包括标签向上移动120%、缩放0.9倍、过渡效果为all 0.4s。

button {background-color: #5e7eb6;color: white;font-size: medium;box-shadow: 2px 4px 8px rgba(70, 70, 70, 0.178);
}

这段代码设置按钮的样式,包括背景颜色、文本颜色、字体大小和阴影效果。

a {color: #5e7eb6;
}

这段代码设置链接的样式,包括文本颜色。

.input {box-shadow: inset 4px 4px 4px rgba(165, 163, 163, 0.315),4px 4px 4px rgba(218, 218, 218, 0.13);
}

这段代码设置输入框的样式,包括内阴影和外阴影。内阴影为4px 4px 4px rgba(165, 163, 163, 0.315),外阴影为4px 4px 4px rgba(218, 218, 218, 0.13)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637300.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux C语言socket函数send

在Linux中&#xff0c;使用C语言进行网络编程时&#xff0c;send函数是用于发送数据到已连接的套接字的重要函数之一。它通常用于TCP连接&#xff0c;但也可以用于UDP&#xff08;尽管对于UDP&#xff0c;通常更推荐使用sendto&#xff0c;因为它允许你指定目标地址和端口&…

建议数据库设计的必选字段

在数据库设计时&#xff0c;建议以下13个字段设置为数据库必要字段&#xff0c;以保证数据的完整和连续。&#xff08;参考阿里开发规范&#xff0c;结合业务特点&#xff09; id&#xff08;id&#xff09; id 是否删除&#xff08;if_delete&#xff09; 用于表达该记录是…

vivado 平台板流程

介绍 板文件使用XML格式来定义有关使用或的系统级板的信息包括AMD设备。AMD可以使用板文件中包含的信息Vivado™ Design Suite和Vivado IP集成商&#xff0c;以促进和验证AMD的连接设备到板。本章讨论董事会文件的不同部分及其用法本附录中所示的示例使用AMD Kintex 7 KC705评…

【linux驱动】用户空间程序与内核模块交互-- IOCTL和Netlink

创建自定义的IOCTL&#xff08;输入/输出控制&#xff09;或Netlink命令以便用户空间程序与内核模块交互涉及几个步骤。这里将分别介绍这两种方法。 一、IOCTL 方法 1. 定义IOCTL命令 在内核模块中&#xff0c;需要使用宏定义你的IOCTL命令。通常情况下&#xff0c;IOCTL命令…

python 基础知识点(蓝桥杯python 科目个人复习计划22)

今日复习内容&#xff1a;基础算法中的时间复杂度 时间复杂度分析 时间复杂度是衡量算法执行时间随输入规模增长的增长率。通过分析算法中基本操作的执行次数来确定时间复杂度‘常见的时间复杂度包括&#xff1a;常数时间O(1)&#xff0c;线性时间O(n),对数时间O(log n)&…

[GN] Vue3.2 快速上手 ---- 核心语法(终章)_3

文章目录 路由器工作模式命名路由to的三种写法嵌套路由路由传参query参数params参数 路由的props配置replace 和 push编程式导航重定向 总结 路由器工作模式 history模式 优点&#xff1a;URL更加美观&#xff0c;不带有#&#xff0c;更接近传统的网站URL。 缺点&#xff1a;后…

UIElement编辑器扩展 组件 Inspector

UIElement编辑器扩展 组件 Inspector https://docs.unity.cn/cn/2021.3/Manual/UIE-create-a-binding-uxml-inspector.html 简单开始 声明序列化VisualTreeAsset [SerializeField] VisualTreeAsset visualTree; 声明完&#xff0c;直接在脚本的Inspector面板&#xff0c;把你…

水塘抽样算法

水塘抽样算法 1、问题描述 最近经常能看到面经中出现在大数据流中的随机抽样问题 即&#xff1a;当内存无法加载全部数据时&#xff0c;如何从包含未知大小的数据流中随机选取k个数据&#xff0c;并且要保证每个数据被抽取到的概率相等。 假设数据流含有N个数&#xff0c;我…

JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑

在JavaScript中&#xff0c;运算符用于执行各种计算和操作。 算术运算符&#xff1a; &#xff1a;用于加法运算。 javascriptlet a 5; let b 3; let sum a b; // 结果: 8 -&#xff1a;用于减法运算。 javascriptlet difference a - b; // 结果: 2 *&#xff1a;用于乘法…

树莓派挂载fat32 u盘

通过fdisk -l 查到设备是sda1 sudo nano /etc/fstab 文件末尾添加&#xff1a; /dev/sda1 /home/pi/mydic_mount auto defaults,noexec,umask0000 0 0 参考文章树莓派linux系统 挂载硬盘&#xff08;U盘&#xff09;相关知识总结&#xff08;五星推荐&#xff09;_树莓派挂…

Rancher部署k8s集群测试安装nginx(节点重新初始化方法,亲测)

目录 一、安装前准备工作计算机升级linux内核时间同步Hostname设置hosts设置关闭防火墙&#xff0c;selinux关闭swap安装docker 二、安装rancher部署rancher 三、安装k8s安装k8s集群易错点&#xff0c;重新初始化 四、安装kutectl五、测试安装nginx工作负载 一、安装前准备工作…

SD-WAN企业组网场景深度解析

在当前快速发展的企业网络环境中&#xff0c;SD-WAN技术不仅仅是实现企业站点之间网络互通的关键&#xff0c;更是满足不同站点对因特网、SaaS云应用、公有云等多种企业应用和业务访问的理想选择。从企业的WAN业务需求出发&#xff0c;我们可以对SD-WAN的组网场景进行深度解析&…

参数校验: spring-boot-starter-validation

参数校验: spring-boot-starter-validation pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency>应用 PostMapping("/login")public Re…

VIM工程的编译 / VI的快捷键记录

文章目录 VIM工程的编译 / VI的快捷键记录概述笔记工程的编译工程的编译 - 命令行vim工程的编译 - GUI版vim备注VIM的帮助文件位置VIM官方教程vim 常用快捷键启动vi时, 指定要编辑哪个文件正常模式光标的移动退出不保存 退出保存只保存不退出另存到指定文件移动到行首移动到行尾…

替代堆叠的新技术M-lag

M-lag&#xff1a;跨设备链路聚合组&#xff0c;是一种实现跨设备链路聚合的机制。将一台设备与另外两台设备进行跨设备链路聚合&#xff0c;从而把链路的可靠性从单板级提升到设备级&#xff0c;组成双活系统。 基本概念&#xff1a; peer-link链路&#xff1a;是一条聚合链…

[C#]winform部署官方yolov8-rtdetr目标检测的onnx模型

【官方框架地址】 https://github.com/ultralytics/ultralytics 【算法介绍】 RTDETR&#xff0c;全称“Real-Time Detection with Transformer for Object Tracking and Detection”&#xff0c;是一种基于Transformer结构的实时目标检测和跟踪算法。它在目标检测和跟踪领域…

Android学习(五):常用控件

Android学习&#xff08;五&#xff09;&#xff1a;常用控件 常用控件 TextViewEditTextButtonRadioButtonImageView 1、TextView控件 1.1、简介 TextView是用于显示文字(字符串)的控件&#xff0c;可在代码中通过设置属性改变文字的大小、颜色、样式等功能。 1.2、示例…

力扣刷MySQL-第五弹(详细讲解)

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;力扣刷题讲解-MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出…

编程笔记 html5cssjs 048 CSS链接

编程笔记 html5&css&js 048 CSS链接 一、设置链接样式二、文本装饰三、背景色四、链接按钮五、练习小结 通过 CSS&#xff0c;可以用不同的方式设置链接的样式。 一、设置链接样式 链接可以使用任何 CSS 属性&#xff08;例如 color、font-family、background 等&…

数据库系统概论-00引言

引言 -数据库系统的发展经历了三代演变 层次/网状数据库系统&#xff0c;关系数据库系统&#xff0c;新一代数据库系统。 -造就了四位图灵奖得主 C.W.Bachman,E.F.Codd,James Gray,M.R.Stoebraker.。 -发展了一门计算机基础学科 数据建模和DBMS核心技术为主&#xff…