【Html】用CSS定义咖啡 - 咖啡配料展示
显示效果
代码
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CodePen - For The Love Of Coffee</title><link rel="stylesheet" href="./style.css"></head><body><!-- partial:index.partial.html --><div class="options"><!--<div>黑咖啡/Black - 纯咖啡 15-20克的咖啡粉和200-250毫升的水</div> --><!--<div>澳白/馥芮白/平白/馥芮白/醇艺白/澳瑞白/小白咖啡/澳芮白/Flat White - 180ml杯装 杯中加入双份浓缩（前中段18g）➕上方加入热牛奶（150ml牛奶打发成超薄奶泡-约0.3-0.5cm厚度）➕可拉花/不拉花出品</div> --><!--<div>拿铁/Latte - 300ml杯装 杯中加入双份浓缩咖啡（36g）➕上方加入热牛奶（250ml牛奶蒸汽打发成薄奶泡-约0.5-0.7cm厚度）➕可拉花出品
（注：在咖啡液中加入香草/焦糖/榛果等糖浆＝香草/焦糖/榛果拿铁等）</div>--><!--<div>卡布奇诺/Cappuccino - 200ml杯装 杯中加入双份浓缩咖啡（36g）➕上方加入热牛奶（180ml牛奶蒸汽打发成厚奶泡-约0.7-1cm厚度）</div>--><!--<div>美式咖啡/Americano - 300ml杯装 杯中加入70℃热水（210ml）➕上方淋双份浓缩咖啡（36g）</div>--><!--<div>意式浓缩咖啡/Espresso -90ml杯装 是利用咖啡机高温（90-93℃）高压（9bar）下，快速（20-30s）制作的一种饮品，份量偏少（约30ml），浓度偏高。
单份：7-9g咖啡粉——萃取20-30g/ml咖啡液
双份：16-18g咖啡粉——萃取30-60g/ml咖啡液
大家可以根据自己喜欢的风味去定萃取的液量，如①粉液比1：1——18g粉萃取18g咖啡液
（萃取前中段精华部分，浓度偏高，萃取的物质偏少，减少后段的苦味）
②粉液比1：2——18g粉萃取36g咖啡液
（萃取前中段精华部分，浓度适中，萃取的物质适中，减少后段的苦味）
③粉液比1：3——18g粉萃取54g咖啡液
（萃取前中后段全部部分，浓度偏低，萃取物质偏多，风味平衡）</div>--><!--<div>双倍浓缩咖啡/多皮欧咖啡/Doppio 双倍浓缩咖啡/Double Espresso/- 两倍浓度的普通浓缩咖啡</div>--><!--<div>可塔朵/Cortado - 在三分之二的意式縮咖啡中加上三分之一的熱牛奶或者奶油、炼乳</div>--><!--<div>玛奇朵/Macchiato - 90ml杯装 杯中加入单份浓缩咖啡（30ml）➕上方铺少量热奶泡</div>--><!--<div>摩卡/Mocha - 将浓缩咖啡和牛奶倒入杯中7分满、挤上奶油后淋上巧克力酱即可。</div>--><!--<div>阿芙佳朵/Affogato</div> - 把蒸馏咖啡均匀地洒在冰淇淋上，同时可用巧克力等来做装饰--><!--<div>康宝蓝/意式浓缩加鲜奶油/Con Panna - 90ml杯装 杯中加入单份浓缩咖啡（30ml）➕上方挤上奶油</div>--><!--<div>爱尔兰咖啡/Irish - 用酒精灯加热焦糖和威士忌，待融化后加入咖啡，最后注入鲜奶油，比例10：5</div>--><!--<div>牛奶咖啡/欧蕾咖啡/Café Au Lait - 一杯浓缩咖啡并加入热牛奶</div>--><div id="Black">①黑咖啡</div><div id="Flat-White">②澳白</div><div id="Latte">③拿铁</div><div id="Cappuccino">④卡布奇诺</div><div id="Americano">⑤美式咖啡</div><div id="Espresso">⑥意式浓缩咖啡</div><div id="Doppio">⑦双倍浓缩咖啡</div><div id="Cortado">⑧可塔朵</div><div id="Macchiato">⑨玛奇朵</div><div id="Mocha">⑩摩卡</div><div id="Affogato">⑪阿芙佳朵</div><div id="Con-Panna">⑫康宝蓝</div><div id="Irish">⑬爱尔兰咖啡</div><div id="cafe-au-lait">⑭牛奶咖啡</div><!-- vv repeats vv --><div id="Black">①黑咖啡</div><div id="Flat-White">②澳白</div><div id="Latte">③拿铁</div><div id="Cappuccino">④卡布奇诺</div><div id="Americano">⑤美式咖啡</div><div id="Espresso">⑥意式浓缩咖啡</div><div id="Doppio">⑦双倍浓缩咖啡</div><div id="Cortado">⑧可塔朵</div><div id="Macchiato">⑨玛奇朵</div><div id="Mocha">⑩摩卡</div><div id="Affogato">⑪阿芙佳朵</div><div id="Con-Panna">⑫康宝蓝</div><div id="Irish">⑬爱尔兰咖啡</div><div id="cafe-au-lait">⑭牛奶咖啡</div><div id="Black">①黑咖啡</div><div id="Flat-White">②澳白</div><div id="Latte">③拿铁</div><div id="Cappuccino">④卡布奇诺</div><div id="Americano">⑤美式咖啡</div><div id="Espresso">⑥意式浓缩咖啡</div><div id="Doppio">⑦双倍浓缩咖啡</div><div id="Cortado">⑧可塔朵</div></div><div class="wrapper"><div class="shadow"></div><div class="title">拿铁</div><div class="cup latte"><div class="contents"><div class="gelato">冰淇淋(意)</div><div class="foam">奶盖/奶泡</div><div class="cream">奶油</div><div class="steamed-milk">蒸奶</div><div class="milk">牛奶</div><div class="chocolate">巧克力</div><div class="sugar">糖</div><div class="whiskey">威士忌</div><div class="water">水</div><div class="coffee">咖啡</div><div class="espresso"><span>(2) </span> 意式浓缩咖啡</div></div></div></div><!-- partial --><script src="./script.js"></script></body>
</html>script.js
let options = document.querySelectorAll(".options div");
let cup = document.querySelector(".cup");
let title = document.querySelector(".title");function formatOption(option) {return option.toLowerCase().replace(/\s/g, "-");
}options.forEach((option) => {option.addEventListener("click", function() {options.forEach((opt) => {console.log(opt);//cup.classList.remove(formatOption(opt.textContent));cup.classList.remove(formatOption(opt.id));});//cup.classList.add(formatOption(this.textContent));cup.classList.add(formatOption(this.id));title.innerHTML = this.textContent;console.log(this);});
});
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{box-sizing: border-box;
}
html, body {height: 100%;overflow: hidden;
}
body {display: flex;flex-direction: row;justify-content: center;align-items: center;margin: 0;font-family: Poppins;background: #cebca6;
}
@media screen and (max-height: 500px) { body > * { scale: 0.8 };}
@media screen and (max-height: 430px) { body > * { scale: 0.7 } .options { translate: 259px 2px !important;}
}
.options {position: relative;width: 200px;display: flex;flex-direction: column;text-align: left;background: rgba(0,0,0, 0.04);padding: 12px;
}
.options > div {transition: all 0.1s ease-in-out;
}
.options > div:hover {background: rgba(255,255,255, 1);cursor: pointer;font-size: 22px;box-shadow: 0 0 2px 0px rgba(0,0,0,0.2),0 0 3px 2px rgba(255, 255, 255, 0.1),0 0 3px 0 rgba(0,0,0, 0.1);color: #462814be;
}
.options:hover > * {animation-play-state: paused;
}.options {background: none;height: fit-content;position: absolute;left: 0;right: 0;top: 0;bottom: 0%;margin: auto;translate: 259px 12px;transform-origin: -157px 107%;rotate: -100deg;
}
@keyframes rotateC {0% {rotate: 0deg;}100% {rotate: 360deg;}
}
.options > div {--_speed: 4;color: #4628148e;position: absolute;border-radius: 4px;background-color: rgba(255,255,255, 0.2);transform-origin: -145px 50%;padding: 4px 12px 1px 22px;-webkit-user-select: none; /* Safari */-ms-user-select: none; /* IE 10 and IE 11 */user-select: none; /* Standard syntax */animation: rotateC calc(var(--_speed) * 36s) linear infinite;
}.options > div:nth-child(1) { animation-delay: calc(var(--_speed) * -1s); }
.options > div:nth-child(2) { animation-delay: calc(var(--_speed) * -2s); }
.options > div:nth-child(3) { animation-delay: calc(var(--_speed) * -3s); }
.options > div:nth-child(4) { animation-delay: calc(var(--_speed) * -4s); }
.options > div:nth-child(5) { animation-delay: calc(var(--_speed) * -5s); }
.options > div:nth-child(6) { animation-delay: calc(var(--_speed) * -6s); }
.options > div:nth-child(7) { animation-delay: calc(var(--_speed) * -7s); }
.options > div:nth-child(8) { animation-delay: calc(var(--_speed) * -8s); }
.options > div:nth-child(9) { animation-delay: calc(var(--_speed) * -9s); }
.options > div:nth-child(10) { animation-delay: calc(var(--_speed) * -10s); }
.options > div:nth-child(11) { animation-delay: calc(var(--_speed) * -11s); }
.options > div:nth-child(12) { animation-delay: calc(var(--_speed) * -12s); }
.options > div:nth-child(13) { animation-delay: calc(var(--_speed) * -13s); }
.options > div:nth-child(14) { animation-delay: calc(var(--_speed) * -14s); }
.options > div:nth-child(15) { animation-delay: calc(var(--_speed) * -15s); }
.options > div:nth-child(16) { animation-delay: calc(var(--_speed) * -16s); }
.options > div:nth-child(17) { animation-delay: calc(var(--_speed) * -17s); }
.options > div:nth-child(18) { animation-delay: calc(var(--_speed) * -18s); }
.options > div:nth-child(19) { animation-delay: calc(var(--_speed) * -19s); }
.options > div:nth-child(20) { animation-delay: calc(var(--_speed) * -20s); }
.options > div:nth-child(21) { animation-delay: calc(var(--_speed) * -21s); }
.options > div:nth-child(22) { animation-delay: calc(var(--_speed) * -22s); }
.options > div:nth-child(23) { animation-delay: calc(var(--_speed) * -23s); }
.options > div:nth-child(24) { animation-delay: calc(var(--_speed) * -24s); }
.options > div:nth-child(25) { animation-delay: calc(var(--_speed) * -25s); }
.options > div:nth-child(26) { animation-delay: calc(var(--_speed) * -26s); }
.options > div:nth-child(27) { animation-delay: calc(var(--_speed) * -27s); }
.options > div:nth-child(28) { animation-delay: calc(var(--_speed) * -28s); }
.options > div:nth-child(29) { animation-delay: calc(var(--_speed) * -29s); }
.options > div:nth-child(30) { animation-delay: calc(var(--_speed) * -30s); }
.options > div:nth-child(31) { animation-delay: calc(var(--_speed) * -31s); }
.options > div:nth-child(32) { animation-delay: calc(var(--_speed) * -32s); }
.options > div:nth-child(33) { animation-delay: calc(var(--_speed) * -33s); }
.options > div:nth-child(34) { animation-delay: calc(var(--_speed) * -34s); }
.options > div:nth-child(35) { animation-delay: calc(var(--_speed) * -35s); }.wrapper {position: relative;width: 300px;height: 300px;display: flex;justify-content: center;align-items: center;border-radius: 50%;background-color: #9b8c83;background: repeating-linear-gradient( 45deg, #9c7154, #ffdfca 8px, #fff0 8px, #fff0 25px ), repeating-linear-gradient( -45deg, #7a5943, #ffcaa6 8px, #fff0 8px, #fff0 25px );background-color: #533723;box-shadow: 0 0 1px 1px #7a665a,0 0 4px 2px #9b8c83,inset 0 -630px 20px -500px #c59473,inset 0 -680px 40px -500px #9c7154, inset 0 -700px 0 -500px #775843;-webkit-user-select: none;-ms-user-select: none; user-select: none;
}
.shadow {position: absolute;top: 69.7%;left: 12%;width: 55%;height: 22px;border-radius: 50%;box-shadow: inset 0 0 0 100px rgba(0,0,0, 0.05);background:repeating-linear-gradient( -45deg, #0002, #0002 1px, #0000 1px, #0000 3px),repeating-linear-gradient( 45deg, #0002, #0002 1px, #0000 1px, #0000 3px );
}
.title {height: fit-content;width: fit-content;position: absolute;left: 0;right: 0;bottom:7%;margin: auto;display: flex;color: rgb(255, 255, 255);text-align: center;font-size: 20px;text-shadow: 0 0 3px rgba(255,255,255, 0.5), 0 0px 1px rgba(0,0,0, 0.7);
}
.cup {width: 160px;height: 162px;position: relative;
}
.contents {height: 100%;display: flex;flex-direction: column;justify-content: end;background: rgba(247, 247, 247, 0.9);clip-path: path('m 0 0 q 4.59 145.8 34.425 155.52 c 29.835 8.1 68.85 8.1 96.39 0 q 29.835 -9.72 29.835 -155.52 C 143 11 16 13 0 0 Z');
}
.contents::before {content: '';display: block;position: absolute;width: 100%;height: 100%;z-index: 1000;box-shadow: inset -18px 0px 4px -10px rgba(255,255,255, 0.7),inset 42px -22px 12px -10px rgba(0,0,0, 0.03),inset 0 -22px 12px -10px rgba(0,0,0, 0.2),inset 20px 0 10px -10px rgba(0,0,0, 0.2);
}
.cup::before {content: '';display: block;position: absolute;z-index: 2;top: -10px;width: 100%;height: 20px;background: linear-gradient(63deg, rgba(253, 253, 253, 0.7) 9%, rgba(238, 238, 238, 0.7) 100%);border-radius: 50%;box-shadow: 0 1px 2px 0px rgba(0,0,0, 0.05),inset 0 0 1px 2px rgba(0,0,0, 0.05);
}
.cup::after {content: '';background: #fff;width: 0%;height: 0%;scale: 1.15 0.7;transform-origin: 0% 0%;z-index: 1;position: absolute;top: 0;
}.contents :is(.foam, .cream, .steamed-milk, .milk, .chocolate, .sugar, .whiskey, .water, .gelato, .espresso, .coffee) {width: 100%;height: 0px;display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius: 50% / 20%;font-size: 12px;transition: all 1s ease-in-out;opacity: 0.94;position: relative;margin-top: 0;padding-top: 0;color: rgba(0,0,0, 0);margin: 0 auto;
}
.contents :is(.foam, .cream, .steamed-milk, .milk, .chocolate, .sugar, .whiskey, .water, .espresso, .coffee)::before {content: '';display: block;width: 100%;height: 26px;border-radius: 50%;position: absolute;top: -10%;transition: all 1s ease-in-out;opacity: 0.1;background: white;z-index: inherit;
}
.contents :is(.foam, .cream, .steamed-milk, .milk)::before {background: rgb(141, 141, 141);
}.contents .foam { background: #ffffff; z-index: 12;}
.contents .cream { background: #fffbe7; z-index: 11;}
.contents .steamed-milk { background: #fffcf8; z-index: 10;}
.contents .milk { background: #f8f2e8; z-index: 9;}
.contents .chocolate { background: #47260a; z-index: 8;}
.contents .sugar { background: #ffffff; z-index: 7;}
.contents .whiskey {background: rgba(207, 129, 39, 0.8); color: #fff; z-index: 6;}
.contents .water { background: #e5f7ff; z-index: 5;}
.contents .coffee { background: #5a341a; z-index: 4;}
.contents .gelato { background: #fcf9ea; z-index: 4;}
.contents .espresso { background: #462814; z-index: 3;}
.contents .espresso span { display: none;}/* Black Coffee */
.black .coffee {height: 90%;border-radius: 50% / 10%;padding-top: 0px;color: rgba(255,255,255, 1);
}
.black .coffee::before {opacity: 0.1;background: white;top: 0%;
}/* Latte */
.latte .espresso {color: rgba(255,255,255, 1);height: 30%;padding-top: 12px;margin-top: -20px;
}
.latte .steamed-milk {color: rgba(0,0,0, 1);height: 60%;margin-top: -20px;padding-top: 12px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.latte .foam {color: rgba(0,0,0, 1);height: 24%;padding-top: 22px;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.latte .foam::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}/* Flat White */
.flat-white .espresso {color: rgba(255,255,255, 1);height: 40%;margin-top: -21px;padding-top: 20px;
}
.flat-white .espresso::before {background: none;
}
.flat-white .steamed-milk {color: rgba(0,0,0, 1);height: 40%;margin-top: -20px;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.flat-white .steamed-milk::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}/* Cappuccino */
.cappuccino .espresso {color: rgba(255,255,255, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}
.cappuccino .espresso::before {top: -33%;
}
.cappuccino .steamed-milk {color: rgba(0,0,0, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}
.cappuccino .foam {color: rgba(0,0,0, 1);height: 40%;padding-top: 20px;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.cappuccino .foam::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}/* Americano */
.americano .water {color: rgba(0,0,0, 1);height: 60%;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.americano .water::before{background: #eff9fd;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;top: 0;
}
.americano .espresso {color: rgba(255,255,255, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}/* Espresso */
.cup.espresso .espresso {color: rgba(255,255,255, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}
.cup.espresso .espresso::before{background: #9e4a12;opacity: 0.4;
}/* Doppio */
.doppio .espresso {color: rgba(255,255,255, 1);height: 40%;padding-top: 10px;
}
.doppio .espresso::before{background: #9e4a12;opacity: 0.4;
}
.doppio .espresso span {display: contents;
}/* Cortado */
.cortado .steamed-milk {color: rgba(0,0,0, 1);height: 30%;margin-top: -20px;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.cortado .steamed-milk::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.cortado .espresso {color: rgba(255,255,255, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}/* Macchiato */
.macchiato .foam::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.macchiato .foam {color: rgba(0,0,0, 1);height: 30%;margin-top: -20px;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.macchiato .espresso {color: rgba(255,255,255, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}/* Mocha */
.mocha .steamed-milk {color: rgba(0,0,0, 1);height: 40%;margin-top: -20px;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.mocha .steamed-milk::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.mocha .chocolate {color: rgba(255,255,255, 1);height: 25%;margin-top: -20px;padding-top: 20px;border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}
.mocha .espresso {color: rgba(255,255,255, 1);height: 40%;margin-top: -21px;padding-top: 20px;
}
.mocha .espresso::before {background: none;
}/* Affogato */
.affogato .gelato {opacity: 1;color: rgba(0,0,0, 1);height: 30%;padding-top: 10px;width: 60%;border-radius: 100% 100% 50% 50%;border: 1px dashed rgba(75,75,75, 0.5);border-bottom: none;
}
.affogato .espresso {margin-top: -16px;color: rgba(255,255,255, 1);height: 30%;padding-top: 10px;
}
.affogato .espresso::before{background: #9e4a12;opacity: 0.4;
}/* Con Panna */
.con-panna .cream {color: rgba(0,0,0, 1);height: 24%;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.con-panna .cream::before {background: #fcf9ea;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.con-panna .espresso {margin-top: -16px;color: rgba(255,255,255, 1);height: 40%;padding-top: 10px;
}
.con-panna .espresso::before {opacity: 0;
}/* Cafe Au Lait */
.cafe-au-lait .steamed-milk {color: rgba(0,0,0, 1);height: 50%;padding-top: 10px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.cafe-au-lait .steamed-milk::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.cafe-au-lait .coffee {margin-top: -16px;color: rgba(255,255,255, 1);height: 50%;padding-top: 10px;
}/* Irish */
.irish .cream {color: rgba(0,0,0, 1);height: 24%;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.irish .cream::before {background: #fcf9ea;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.irish .sugar {color: rgba(0,0,0, 1);height: 22%;margin-top: -18px;padding-top: 20px;
}
.irish .sugar::before {background: #fcf9ea;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.irish .whiskey {color: rgba(255,255,255, 1);height: 30%;margin-top: -18px;padding-top: 10px;
}
.irish .coffee {margin-top: -18px;color: rgba(255,255,255, 1);height: 40%;padding-top: 10px;
}
.irish .coffee::before {opacity: 0;
}
附件
上述代码在 CodePen - For The Love Of Coffee 基础上修改
相关文章：
【Html】用CSS定义咖啡 - 咖啡配料展示
显示效果 代码 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>CodePen - For The Love Of Coffee</title><link rel"stylesheet" href"./style.css">&l…...
Learn Prompt-Prompt 高级技巧:AutoGPT
AutoGPT 是一个由Toran Richards创建的流行开源项目。它利用GPT4作为大脑，结合langchain的链接思想，连接各种工具和互联网资源，来完成人类给予的任务。您只需要设定一个目标，AutoGPT就会自主规划并逐步执行任务。如果遇到问题&…...
IntelliJ IDEA - Maven 在控制台Maven编译正常，但是在IDEA中不正常，表现不一致
文章目录 现象原因解决验证 现象 一个Maven项目，当导入到IDEA后，无法在IDEA中正常的编译和下载jar依赖，类似下面的截图。 但是在Windows控制台却可以正常编译，类似下面的截图。 CMD执行：mvn clean install -Dmaven.te…...
list 用法与模拟
list 用法 list list 模拟 #pragma once #include <assert.h> namespace sjy {//链表节点template <typename T>struct __list_node{__list_node(const T& val T()):_prev(nullptr),_next(nullptr),_val(val){}/*成员变量*/__list_node<T>* _prev;__…...
【操作系统笔记】进程和线程
进程的组成 进程要读取 ELF 文件，那么： ① 要知道文件系统的信息，fs_struct② 要知道打开的文件的信息，files_struct 一个进程除了需要读取 ELF 文件外，还可以读取其他的文件中的数据。 进程中肯定有一个 mm_struct…...
一短文读懂编译型与解释型编程语言
在编程世界中，我们经常听到编译型语言和解释型语言这两个术语。它们是什么，有什么区别呢？让我们一起来探讨一下。 编译型语言 编译型语言，如C、Java等，是一种需要先被编译成机器代码，然后才能被执行的语言…...
修炼离线：（三）sqoop插入hbase 报错权限问题
一：报错现象。 二：解决方式。 方法一：修改文件所有者。 切换hadoop用户：export HADOOP_USER_NAMEhdfs hadoop fs -chown -R root:root /方法二：修改权限 切换hadoop用户：export HADOOP_USER_NAMEhdfs ha…...
【JavaEE】多线程（四）
多线程（四） 在开始讲之前，我们先来回顾回顾前三篇所讲过的内容~ 线程的概念 并发编程，多进程，比较重，频繁创建销毁，开销大 Thread的使用 创建线程 继承Thread实现Runnable继承Threadÿ…...
第一章：最新版零基础学习 PYTHON 教程（第七节 - Python 中的语句、缩进和注释）
在这里，我们将讨论Python中的语句、Python中的缩进和Python中的注释。我们还将讨论 Python 语句、Python 缩进、Python 注释的不同规则和示例，以及“文档字符串”和“多行注释”之间的区别。 Python中的语句是什么 Python语句是Python 解释器可以执行的指令。Python 语言中…...
C++ 【2】
1.指针基础 字符：C 一个字符占一个字节 在C中 << 这个为插入运算符 >> 这个为提取运算符 一个变量的地址称为该变量的指针；如果在程序中定义了一个变量或者数组， 那么，这个变量或数组的地址（指针…...
Java学习笔记40——Lambda表达式
Lambda表达式 Lambda表达式函数式编程思想概述Lambda表达式的标准格式Lambda表达式练习练习1练习2练习3 Lambda表达式的省略模式Lambda表达式的注意事项Lambda表达式与接口的区别 Lambda表达式 函数式编程思想概述 面向对象思想强调“必须通过对象的形式做事” 在函数式思想中…...
【考研数学】线性代数第五章 —— 特征值和特征向量（3，矩阵对角化理论）
文章目录 引言三、矩阵对角化理论3.1 一般矩阵的相似对角化3.2 实对称矩阵的相似对角化3.2.1 实对称矩阵相似对角化定理3.2.2 实对称矩阵相似对角化过程 写在最后 引言 承接前文，我们来看看矩阵的对角化理论。 我们前面提到对角化是在矩阵相似那里，若存…...
【计算机网络】IP数据报首部格式、最大传输单元MTU、最大分段大小MSS
创作不易，本篇文章如果帮助到了你，还请点赞 关注支持一下♡>𖥦<)!! 主页专栏有更多知识，如有疑问欢迎大家指正讨论，共同进步！ 更多计算机网络知识专栏：计算机网络🔥 给大家跳段…...
shell脚本之文件读写
shell脚本之文件读写 1、读取文件内容并打印2、将内容写入文件3、追加内容到文件末尾4、读取文件内容到变量中5、逐行读取文件内容并处理6、逐行追加内容到文件末尾7、获取文件行数8、获取文件最后一个单词 Shell 脚本读写文件的方法有很多种，下面是一些常见的方法&…...
SAP 刷新Fiori Apps缓存的方法（解决修改CDS后Fiori无法重载新配置）
1. 问题 修改CDS Annotation后，基于Fiori Element发布的Fiori App无法应用新的界面 2. 解决办法 2319491 - How to clean up the cache after applying changes that affect SAP Fiori apps刷新Frontend： SE38： /UI5/APP_INDEX_CALCULATE…...
如何在 Excel 中计算日期之间的天数
计算两个日期之间的天数是 Excel中的常见操作。无论您是规划项目时间表、跟踪时间还是分析一段时间内的趋势，了解如何在 Excel 中查找日期之间的天数都可以提供强大的日期计算功能。 幸运的是，Excel 提供了多种简单的方法来获取两个日期之间的天数。继续…...
Java高级-注解
注解 1.介绍2.元注解3.注解的解析4.注解的应用场景 1.介绍 注解 Annotation 就是Java代码里的特殊标记，作用是让其他程序根据注解信息来决定什么是执行该程序注解：注解可以在类上、构造器上、方法上、成员变量上、参数上等位置 自定义注解 /*** 自定…...
wabp.m 代码注释（便于算法快速理解）
算法效果： 波峰和起点检测效果： function [r,pk] = wabp(Araw, Offset,Scale, Fs) % r = wabp(Araw,Offset,Scale, Fs); % Input: Araw (125Hz sampled) waveform in wfdb-MIT format, % Offset, Scale % Araw = 血压波形 % Offset=偏移（信号减去或者加上偏移恢复成…...
数据库数据恢复-SQL SERVER数据库文件损坏的故障表现数据恢复方案
SQL SERVER数据库故障类型： SQL SERVER数据库MDF（NDF）或LDF损坏。 SQL SERVER数据库故障原因： 1、数据库正在操作过程中，机器突然断电。 2、人为误操作。 SQL SERVER数据库MDF（NDF）或LDF损坏的…...
flink中cpu消耗的大户-序列化和反序列化
背景 故事的起源来源于这样一篇关于序列化/反序列化优化的文章https://www.ververica.com/blog/a-journey-to-beating-flinks-sql-performance,当把传输的对象从String变成byte[]数组后，QPS直接提升了50% flink的网络数据交换优化 在flink中对于每个算子之间的跨…...
使用 K 均值聚类进行颜色分割
介绍 颜色分割是计算机视觉中使用的一种技术，用于根据颜色识别和区分图像中的不同对象或区域。聚类算法可以自动将相似的颜色分组在一起，而不需要为每种颜色指定阈值。当处理具有大范围颜色的图像时，或者当事先不知道确切的阈值时，这非常有用。 在本教程中，我们将探讨如何…...
Redis 哈希表操作实战（全）
目录 HSET 添加 HSETNX 添加 HMSET 批量添加 HGET 获取元素 HGETALL 获取所有 HMGET 批量查询 HEXISTS 判断是否存在 HINCRBY 增加整数 HINCRBYFLOAT 添加浮点数 HLEN 查Field数量 HKEYS 查所有Field HVALS 查所有Field值 HSCAN 迭代 HDEL 删除Field HSET 添加 …...
element table合并行或列 span-method
首先来看下官网上如何写的 <template><div><el-table:data"tableData":span-method"objectSpanMethod"borderstyle"width: 100%; margin-top: 20px"><el-table-columnprop"id"label"ID"width"18…...
【操作系统笔记】内存分配
内存对齐 问题：为什么需要内存对齐呢？ 主要原因是为了兼容，为了让程序可以运行在不同的处理器中，有很多处理器在访问内存的时候，只能从特定的内存地址读取数据。换个说法就是处理器每次只能从内存取出特定个数字节的数…...
Web 整合
HTML span 行内元素 p 块级元素 br/ 强制换行 i em倾斜 b strong 加粗 u 下划线 mark 高亮 超链接 a ：a href"链接地址" target"_blank" alt"可替文本" title"文字提示" tartget：_self 自己界面打开 _…...
hasOwnProperty 方法解析
一、含义： hasOwnProperty 是 JavaScript 中的一个内置方法，用于检查对象是否具有指定名称的属性。 具体来说，hasOwnProperty 方法用于判断一个对象是否拥有某个指定的属性，而不是继承自原型链的属性。它是一个布尔值方法&#…...
使用 nohup 运行 Python 脚本
简介：在数据科学、Web 开发或者其他需要长时间运行的任务中，我们经常需要让 Python 脚本在后台运行。尤其是在远程服务器上，可能因为网络不稳定或需要执行多个任务，我们不希望 Python 脚本因为终端关闭而被终止。这时，…...
Django：五、登录界面实现动态图片验证码
一、下载包 pip install pillow 二、代码 这是一个函数，无输入，返回两个值。一个值是图片，一个值是图片中的数字及字母。 需要注意：font_fileMonaco.ttf 是一个验证码字体文件，如有需要，可三连私信。 …...
GPT，GPT-2，GPT-3，InstructGPT的进化之路
ChatGPT 火遍圈内外，突然之间，好多人开始想要了解 NLP 这个领域，想知道 ChatGPT 到底是个什么？作为在这个行业奋斗5年的从业者，真的很开心让人们知道有一群人在干着这么样的一件事情。这也是我结合各位大佬的文章&…...
firefox_dev_linux下载安装配置(部分系统自带包请看结尾)
download 从 Firefox 的官方网站下载 Firefox Developer Edition 的 tar 文件 firefox_dev_linux_download # 终端快速下载 wget https://download.mozilla.org/?productfirefox-devedition-latest-ssl&oslinux64&langen-US彻底删除自带原版 # apt系 sudo apt --pu…...
512内存做网站/上海发布微信公众号
CDI（Contexts and Dependency Injection 上下文依赖注入），是JAVA官方提供的依赖注入实现，可用于Dynamic Web Module中，先给3篇老外的文章，写得很不错 1、Java EE CDI Dependency Injection (Inject) tutori…...
合肥网站开发培训/推广商
『TensorFlow』读书笔记_ResNet_V2 对比之前的复杂版本，这次的torch实现其实简单了不少，不过这和上面的代码实现逻辑过于复杂也有关系。 一、PyTorch实现 # Author : hellcat # Time : 18-3-2""" import os os.environ["CUDA_VISI…...
wordpress上传视频大小/站长工具怎么用
一、概述在正常细胞中，磷脂酰丝氨酸只分布在细胞膜脂质双层的内侧，细胞发生凋亡最早期，膜磷脂酰丝氨酸(PS)由脂膜内侧翻向外侧，这一变化早于细胞皱缩、染色质浓缩、DNA片断化和细胞膜的通透性增加等凋亡现象。AnnexinV是一种磷脂结…...
嘉兴网站建设技术开发/免费域名注册
package java.util;import java.util.function.Predicate; import java.util.stream.Stream; import java.util.stream.StreamSupport;/***1.Collection接口是集合继承关系中的根接口(root interface),有些集合允许重复元素， * 有些集合有序，JDK不提供…...
海珠一站式网站建设/seo深度解析
韩立刚老师教学视频笔记 图片源自韩立刚老师的教学视频以及谢希仁PPT，侵删 计算机网络基础（韩立刚视频笔记）第一章 概述 第一章（概述） 局域网广域网OSI参考模型OSI架构图各层间的数据传输网络排错OSI网络参考模型和网…...
住建厅报名考试入口/怎样进行seo推广
在Eclipse中写Python代码时，会发现注释颜色很浅，看起来比较费力。根据以下操作可以修改颜色，缓解眼球疲劳。 Window-->Preferences-->Pydev，选中Editor，右边的Appearance color options，选中Common&…...