web前端开发--创建百雀羚网站

server/2024/11/25 23:32:53/

1、创建一个大型网页

设计网页index.html结构为

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link type="text/css"rel="stylesheet"href="css/index.css" /><link type="text/css"rel="stylesheet"href="iconfont/iconfont.css" /></head><body><!--videobox开始--><div class="videobox"><header><div class="con"><section class="left"></section><section class="right"><a href="login.html">登录</a><a href="register.html">注册</a></section></div></header><nav>  <ul><li class="left"><a class="one"href="#"><img src="img/sanxian.png"alt="" /><span>选项</span><img src="img/sanjiao.png"alt="" /></a><aside><span></span><ol class="zuo"><li class="con">护肤</li><li>&gt;洁面</li><li>&gt;爽肤水</li><li>&gt;精华</li><li>&gt;乳液</li><li class="con">身体护理</li><li>&gt;润肤</li><li>&gt;沐浴露</li><li>&gt;护手霜</li><li class="con">男士专区</li><li>&gt;爽肤水</li><li>&gt;洁面</li><li>&gt;面霜</li><li>&gt;精华</li></ol><ol class="you"><li class="con">套装/礼盒</li><li>&gt;补水保湿套装</li><li>&gt;淡纹四件套</li><li>&gt;护肤套装</li><li class="con">热门搜素</li><li>&gt;洁面奶</li><li>&gt;爽肤水</li><li>&gt;精华</li><li>&gt;面霜</li></ol><img src="img/tu1.jpg"alt=""/></aside></li><li class="center"><form><input type="text"name="h"value="请输入商品名称、品牌或编码" /></form></li><li class="right"><a href="#"><i class="iconfont">&#xe62e;</i></a><a href="#"><i class="iconfont">&#xe635;</i></a><a href="#"><i class="iconfont">&#xe636;</i></a><a href="#"><i class="iconfont">&#xe83f;</i></a></li></ul></nav><video src="img/bql.mp4" autoplay loop ></video><audio src="img/home.ogg" autoplay loop></audio></div><!--videobox结束!--><!--new begin开始!--><div class="new"><header>至臻宠爱畅销销榜单</header><p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜</p><ul><li><hgroup><h2>本草轻装 净透无暇</h2><h2>肌源透润恒采肌肤水</h2><h2></h2><h2></h2></hgroup></li><li><hgroup><h2>激发源头水润修复力</h2><h2>海之秘赋能恒润高保湿精华液</h2><h2></h2><h2></h2></hgroup></li><li><hgroup><h2>悦色又养肤国民气垫</h2><h2>肌肤透润气垫修容霜</h2><h2></h2><h2></h2></hgroup></li></ul></div><!--new begin结束!--><!--caoben bigan--><div class="caoben"><header>百雀羚草本系列</header><p>初赋年轻肤质 重现细滑紧致</p><ul><li><img class="zheng"src="img/pic4.png"alt=""><img class="fan"src="img/pic4f.png"alt="" /></li><li><img class="zheng"src="img/pic5.png"alt="" /><img class="fan"src="img/pic5f.png" alt=""/></li><li><img class="zheng"src="img/pic6.png"alt="" /><img class="fan"src="img/pic6f.png"alt="" /></li></ul></div><!--caoben end--><!--text begin--><div class="text"><header>评测中心</header><p>评测 我们更专业 用户更放心</p><ul><li><img class="tu" src="img/cp1.jpg"alt=" " /><img class="tihuan"src="img/th1.png"alt=" " /></li><li><img class="tu" src="img/cp2.jpg"alt=" " /><img class="tihuan"src="img/th2.png"alt=" " /></li><li><img class="tu" src="img/cp3.jpg"alt=" " /><img class="tihuan"src="img/th3.png"alt=" " /></li><li><img class="tu" src="img/cp4.jpg"alt=" " /><img class="tihuan"src="img/th4.png"alt=" " /></li><li><img class="tu" src="img/cp5.jpg"alt=" " /><img class="tihuan"src="img/th5.png"alt=" " /></li><li><img class="tu" src="img/cp6.jpg"alt=" " /><img class="tihuan"src="img/th6.png"alt=" " /></li><li><img class="tu" src="img/cp7.jpg"alt=" " /><img class="tihuan"src="img/th7.png"alt=" " /></li><li><img class="tu" src="img/cp8.jpg"alt=" " /><img class="tihuan"src="img/th8.png"alt=" " /></li></ul></div><!--text end--><footer><div class="logo"></div><div class="message"><form><ul class="left"><li><p><label for=" ">姓名:</label></p><input type="text" /></li><li><p>邮箱:</p><input type="email"/></li><li><p>电话:</p><input type="tel"pattern="^\d{11}$"title="请输入11位数字" /></li><li><p>密码:</p><input type="password" /></li><li><input class="but"type="submit"value="" /></li></ul><div class="right"><p>留言:</p><textarea></textarea></div></form></div></footer><div class="copyright"><a href="#">上海百雀羚日用化学有限公司</a></div></body>
</html>

设计网页index.css样式为

body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {margin:0;padding:0;border:0;list-style: none;}
body{font-family:"微软雅黑",Arial, Helvetica, sans-serif; font-size:14px;}a{color:#999;text-decoration: none;}
a:hover{color:#fff;}
input,textarea{outline: none;} 
/* videobox */.videobox{width:100%;height:680px;background:#fff;overflow: hidden;       /*内容溢出时隐藏*/position: relative;     /*外层大块相对定位*/
}.videobox video{width:100%;min-width: 1280px;      /*视频元素的最小宽度值*/position: absolute;    /*视频元素绝对定位*/top: 50%;              /*视频元素位于大块的中心位置*/left: 50%;transform: translate(-50%, -50%);
}
.videobox header{width:100%;height:40px;background: #333;z-index: 999;     /*头部在最前面显示,不被视频元素遮盖*/position: absolute;
}
.videobox header .con{width:1030px;     /*头部内容的宽度*/height:40px;margin:0 auto;
}
.videobox header .left{width:75px;height:27px;background:url(../img/logoy.png) no-repeat;margin-top: 10px;float: left;
}
.videobox header .right{margin-top: 10px;float: right;	
}
.videobox header .right a{margin-right: 10px;}
.videobox nav{width:100%;      /*导航元素通栏部分的宽度*/height:90px;background: rgba(0,0,0,0.2);z-index: 1000;          /*导航在最前面显示,不被视频元素遮盖*/position: absolute;     /*导航元素绝对定位*/top:40px;border-bottom: 1px solid #fff;
}
.videobox nav ul{width:1030px;    /*导航元素中内容的宽度*/height:90px;margin:0 auto;position: relative;
}
.videobox nav ul li{float: left;margin-right: 19%;
}
.videobox nav ul .left:hover aside{display: block;}  /*侧边栏设置为块级元素*/
.videobox nav ul .left a{display: block;height:90px;line-height: 90px;font-size: 20px;color:#fff;
}
.videobox nav ul .left a img{vertical-align: middle;}
.videobox nav ul .left a span{margin:0 10px;}
.videobox aside{display: none;       /*侧边栏一开始不显示*/width:380px;height:560px;background: rgba(0,0,0,0.3);     /*背景色为透明的灰色*/position: absolute;     /*绝对定位*/left:0;top:90px;z-index: 1500;     /*侧边栏在最前面显示,不被视频元素遮盖*/color:#fff;
}
.videobox aside span{/*三角符号的样式*/width:20px;height:14px;background:url(../img/liebiao.png) 0 0 no-repeat;position: absolute;left:50px;top:0;
}
.videobox aside ol{width:155px;float: left;
}
.videobox aside ol li{width:155px;height:25px;line-height: 25px;cursor: pointer;font-family: "宋体";
}
.videobox aside ol li.con{font-size: 16px;text-indent: 0;font-family: "微软雅黑";padding: 10px 0;
}
.videobox aside ol li:hover{color:#fff;}
.videobox aside .zuo{margin:35px 0 0 68px;}
.videobox aside .you{margin-top: 35px;}
.videobox aside img{margin:10px 0 0 13px;}
.videobox nav ul .center{margin-top: 32px;}
.videobox nav ul .center input{    /*搜索框的样式*/width:240px;height:30px;border:1px solid #fff;border-radius: 15px; color:#fff;line-height: 32px;	padding-left: 30px;box-sizing:border-box;   /*元素大小包括了边框和内边距*/background:url(../img/search.png) no-repeat 3px 3px;/*添加搜索框中的小图像*/
}
.videobox nav ul .right{margin-top: 32px;width:280px;height:32px;margin-right:0;text-align: center;line-height: 32px;font-size: 16px;
} 
.videobox nav ul .right a{display: inline-block;width:32px;height:32px;color:#fff;box-shadow: 0 0 0 1px #fff inset;/*设置1px的内阴影*/transition: box-shadow 0.3s ease 0s;/*过渡效果*/border-radius: 16px; margin-left: 30px;
}
.videobox nav ul .right a:hover{box-shadow: 0 0 0 16px #fff inset;   /*设置16px的内阴影,填充白色*/color:#C1DCC5;
}
/* videobox */
/* new 开始*/
.new{width:100%;height:530px;background: #fff;
}
.new header{ 				/*标题行样式*/width:385px;height: 95px;line-height:95px;background:#D5CFCF;border-radius: 48px;    /*设置圆角效果*/margin:70px auto 0;box-sizing:border-box;  /* 边框和内边距的值包含在width内 */text-align: center;font-size: 36px;font-weight: bold;color: #333333;text-shadow: 3px 3px 3px #ccc;	/*设置文字阴影效果*/
}
.new p{margin-top: 10px;text-align: center;color: #db0067;
}
.new ul{margin:70px auto 0;width: 960px;
}
.new ul li{width:266px;height:250px;border:1px solid #ccc; background:url(../img/pic1.png) 0 0 no-repeat;float: left;margin-right:8%;margin-bottom: 40px;position: relative;   /*相对定位*/overflow: hidden;     /*溢出内容不显示,也就是产品介绍的文字不显示*/
}
.new ul li:nth-child(2){  /*设置第二个li元素的背景图像*/background-image: url(../img/pic2.png);
}
.new ul li:nth-child(3){/*设置第三个li元素的背景图像*/margin-right: 0;background-image: url(../img/pic3.png);
}
.new ul li hgroup{  /* 遮罩的样式 */position: absolute;left:0;top:250px;   /*不显示*/width:266px;height:250px;background: rgba(0,0,0,0.5);/*半透明效果*/transition: all 0.5s ease-in 0s; /*设置过渡效果*/}
.new ul li:hover hgroup{/*鼠标指针移动到产品上时显示文字内容*/position: absolute;   /* 绝对定位 */left:0;top:0;
}
.new ul li hgroup h2:nth-child(1){/*设置文字样式*/font-size: 22px;text-align: center;color:#fff;font-weight: normal;margin-top: 58px;
}
.new ul li hgroup h2:nth-child(2){font-size: 14px;text-align: center;color:#fff;font-weight: normal;margin-top: 15px;
}
.new ul li hgroup h2:nth-child(3){width:26px;height: 26px;margin-left: 120px;margin-top: 15px;background:url(../img/jiantou.png) no-repeat;
}
.new ul li hgroup h2:nth-child(4){width:75px;height: 22px;margin-left: 95px;margin-top: 25px;background:url(../img/anniu.png)  no-repeat;
} 
/* new 结束*/
/* caoben开始 */
.caoben{width:100%;height:512px;background:#b3cab1;padding-top: 70px;
}
.caoben header{width:385px;height: 95px;line-height:95px;text-align: center;background:#D5CFCF;border-radius: 48px;/*设为圆角矩形*/margin:0 auto;box-sizing:border-box;	/* 边框和内边距的值包含在width内 */font-size: 36px;font-weight: bold;color: #333333;text-shadow: 3px 3px 3px #ccc;/*为文字添加阴影*/
}
.caoben p{margin-top: 10px;text-align: center;color:#db0067;
}
.caoben ul{margin:70px auto 0;width: 960px;
}
.caoben ul li{ /*每个图片的样式*/width:266px;height:251px;	float: left;margin-right:8%;margin-bottom: 40px;position: relative; /*设置相对定位*/-webkit-perspective: 230px; /*用于指定3D元素的透视效果,当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身。Chrome和Safari支持替代的 -webkit-perspective属性*/}
.caoben ul li:last-child{margin-right: 0;
}
.caoben ul li img{position: absolute;/*采用绝对定位*/left:0;top:0;-webkit-backface-visibility: hidden;/*用于定义元素在不面对屏幕时是否可见*/backface-visibility: hidden;transition: all 0.5s ease-in 0s;/*设置旋转的过渡效果*/
}
.caoben ul li img.fan{	-webkit-transform: rotateX(-180deg);/*绕x轴逆时针旋转180°,隐藏图片*/transform: rotateX(-180deg);}
.caoben ul li:hover img.fan{-webkit-transform: rotateX(0deg);/*绕x轴逆时针旋转0°,显示图片*/transform: rotateX(0deg);}.caoben ul li:hover img.zheng{-webkit-transform: rotateX(180deg);/*绕x轴顺时针针旋转180°,隐藏图片*/transform: rotateX(180deg);} 
/*  caoben结束 */
/* text开始 */
.text{width:100%;height:700px;background: #fff;padding-top:70px;
}
.text header{width:385px;height: 95px;line-height: 95px;background:#D5CFCF;border-radius: 48px;margin:0px auto;box-sizing:border-box;text-align: center;font-size: 36px;font-weight: bold;color: #333333;text-shadow: 3px 3px 3px #ccc;
}
.text p{margin-top: 10px;text-align: center;color: #db0067;
}
.text ul{margin:70px auto 0;width: 960px;
}
.text ul li{width:195px;height:195px;border:3px solid #91e477;border-radius: 50%;float: left;margin-right:5%;margin-bottom: 40px;position: relative;   /* 父元素定位 */
}
.text ul li img {position: absolute;  /* 子元素绝对定位 */top: 50%;left: 50%;transform: translate(-50%, -50%);/*平移元素,使图像在li元素的正中心*/
}
.text ul li:nth-child(4), .text ul li:nth-child(8) {margin-right: 0;
}
.text ul li .tihuan {opacity: 0;/*透明度为0,替换图像不可见*/transition: all 0.4s ease-in 0.2s;/*设置过渡*/
}
.text ul li:hover .tihuan {opacity: 1;/*透明度为1,替换图像完全可见*/transform: translate(-50%, -50%) scale(0.75);/*图像缩小为原来的75%*/}
.text ul li .tu {transition: all 0.4s ease-in 0s;
}
.text ul li:hover .tu {/*图像缩小为原来的50%后,不可见*/opacity: 0;/*透明度为0,图像不可见*/transform: translate(-50%, -50%) scale(0.5);
}
/* text 结束*/
/* footer 开始*/
footer {width: 100%;height: 400px;background: #545861;border-bottom: 1px solid #fff;
}
footer .logo {width: 1000px;height: 100px;margin: 0 auto;background: url(../img/logo.png) no-repeat center center;border-bottom: 1px solid #8c9299;
}
footer .message {width: 1000px;margin: 20px auto 0;color: #fffada;
}
footer .message .left {width: 525px;float: left;padding-left: 30px;box-sizing: border-box;
}
footer .message .left li {float: left;margin-right: 30px;
}
footer .message .left li input {width: 215px;height: 32px;border-radius: 5px;margin: 10px 0 15px 0;padding-left: 10px;box-sizing: border-box;border: none;
}
footer .message .left li:last-child input {/*设置按钮的样式*/width: 120px;height: 39px;padding-left: 0;border: none;background: url(../images/but.jpg) no-repeat;
}
footer .message .right {float: left;
}
footer .message .right p {margin-bottom: 10px;
}
footer .message .right textarea {width: 400px;height: 172px;padding: 10px;box-sizing: border-box;resize: none;/*不能调整元素的大小*/
}
/*footer结束*/
/* copyright开始 */
.copyright {width: 100%;height: 60px;background: #333333;text-align: center;
}
.copyright a {line-height: 60px;
}
/*copyright结束*/

运行结果为

 

 

 

 2、设计登录界面

login.html为

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>登录</title><link type="text/css" rel="stylesheet"href="css/login.css"/></head><body><header><div class="hleft"><a href="index.html"><img src="img/logoblue.jpg"alt="" /></a></div><div class="hright"><a href="index.html">回首页查看商品信息</a></div></header><div id="mainlogin"><div class="loginbg"><form class="loginf"action=""method="get"autocomplete="on"><h2>用户登录</h2><p><input type="text"name="txtUsername"placeholder="邮箱/用户名/手机号" class="name"/></p><p><input type="password"name="txtPwd"pattern="^[a-aA-Z]\w{5,17}$"placeholder="密码"class="pass" /></p><p><input type="submit"name="btnlog"value="登录" class="btn"/></p><p class="reg"><a href="register.html">用户免费注册</a></p></form></div></div><div class="copyright"><a href="#">上海百雀羚日用化学有限公司</a></div></body>
</html>

login.css

body,h2,p,input{margin:0;padding:0;border:0}
body {	font-family:"microsoft yahei" ;font-size:14px;
}a{color:#999;text-decoration: none;}header {width: 1030px;height: 70px;margin: 0 auto;
}
header .hleft {float: left;width:128px;height: 70px;
}
header .hright {float: right;height: 70px;line-height:70px;background: url(../img/inf.jpg) no-repeat left center;
}header .hright a {padding-left: 35px;
}#mainlogin {width: 100%;height: 600px;background-color: #cfeeee;
}.loginbg {width: 1030px;height: 600px;background: url(../img/loginbg.jpg);margin: 0 auto;box-sizing: border-box;padding: 140px 0 0 600px;
}.loginf {/*表单的样式*/	width: 300px;height: 280px;padding: 20px 30px;background: #f5f8fd;border-radius: 20px;/*设置圆角半径*/	border: 1px solid #4faccb;
}
.loginf p{margin-top:20px;}.name,.pass {/*文本框设置相同的宽高等*/	width: 250px;height: 24px;border: 1px solid #38a1bf;border-radius:5px;padding: 2px 2px 2px 26px;
}.name { /*设置第一个文本框的背景*/	background: url(../img/1.jpg) no-repeat 5px center #FFF;
}
.pass {/*设置第二个文本框的背景*/	background: url(../img/2.jpg) no-repeat 5px center #FFF;
}.btn {/*设置按钮的样式*/	width: 278px;height: 40px;border: 1px solid #6b5d50;border-radius: 3px;background: #3bb7ea;font-size: 20px;color: #FFF;
}
.reg{font-size:16px;
}.copyright {width: 100%;height: 60px;background: #333333;text-align: center;
}
.copyright a {line-height: 60px;
}

3、注册界面为

register.html为

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>注册</title><link rel="stylesheet"type="text/css"href="css/register.css" /></head><body><header><div class="hleft"><a href="index.html"><img src="img/logoblue.jpg"alt="" /></a></div><div class="hright"><a href="index.html">回首页查看商品信息</a></div></header><div id="mainregister"><div class="registerbg"><form class="registerf"action=""method="get"autocomplete="on"><h2>手机号注册</h2><p><input class="name" type="text"name="txtUsername"pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$"placeholder="用户名" /></p><p><input class="phone"type="text"name="txtUserphone"pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"placeholder="手机号" /></p><p><input class="pnum" type="password" name="txtPwd"placeholder="短信验证码" /></p><p><input class="pass" type="password" name="txtPwd"pattern="^[a-zA-Z]\w{5,17}$" placeholder="密码" /></p><p><input class="btn" type="submit" name="btnreg" value="注册" /></p><p class="log">已经有账号?&nbsp;<a href="login.html">直接登录</a></p></form></div></div><div class="copyright"><a href="#">上海百雀羚日用品化学有限公司</a></div></body>
</html>

register.css

body,h2,p,input{margin:0;padding:0;border:0}
body {	font-family:"microsoft yahei" ;font-size:14px;
}
a{color:#999;text-decoration: none;}
header {width: 1030px;height: 70px;margin: 0 auto;
}
header .hleft {float: left;width:128px;height: 70px;
}
header .hright {float: right;height: 70px;line-height:70px;background: url(../img/inf.jpg) no-repeat left center;
}header .hright a {padding-left: 35px;
}#mainregister{width: 100%;height: 600px;background-color: #ddf0ea;
}
.registerbg{width: 1030px;height: 600px;background:url(../img/registerbg.jpg);margin: 0 auto;	box-sizing: border-box;padding:140px 0 0 600px;
}
.registerf{/*表单的样式*/width: 300px;height: 360px;padding: 0px 30px;background: #f5f8fd;border-radius: 20px;/*设置圆角半径*/border: 1px solid #4faccb;padding-top:15px;
}
.registerf p{margin-top:20px;}.name,.phone,.pnum,.pass{/*文本框设置相同的宽高等*/width: 250px;height: 24px;border: 1px solid #38a1bf;border-radius:3px;padding: 2px 2px 2px 26px;
}
.name {/*设置第一个文本框的背景*/background: url(../img/1.jpg) no-repeat 5px center #FFF;
}
.phone{background: url(../img/phone.jpg) no-repeat 5px center #FFF;}
.pnum{background: url(../img/eml.jpg) no-repeat 5px center #FFF;}
.pass {/*设置第二个文本框的背景*/background: url(../img/2.jpg) no-repeat 5px center #FFF;
}
.btn {/*设置按钮的样式*/width: 278px;height: 40px;border: 1px solid #6b5d50;border-radius: 3px;background: #3bb7ea;font-size: 20px;color: white;
}
.log {color: #666;}
.log a{color: #236e8c;}
.copyright {width: 100%;height: 60px;background: #333333;text-align: center;
}
.copyright a {line-height: 60px;
}

创建的文件夹,如图

音频,与视频全部放在img中。

导入下面iconfont文件

其中icofont.css

@font-face {font-family: "iconfont"; /* Project id 2736631 */src: url('iconfont.woff2?t=1628649280251') format('woff2'),url('iconfont.woff?t=1628649280251') format('woff'),url('iconfont.ttf?t=1628649280251') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-aixin:before {content: "\e83f";
}.icon-yinle:before {content: "\e62e";
}.icon-youjian:before {content: "\e635";
}.icon-gouwuche:before {content: "\e636";
}


http://www.ppmy.cn/server/144924.html

相关文章

Docker1:认识docker、在Linux中安装docker

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…

Java基础-Java中的常用类(上)

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 String类 创建字符串 字符串长度 连接字符串 创建格式化字符串 String 方法 System类 常用方法 方…

Python 编程开发(01):Bash 命令行基本操作

Bash 是一种功能强大的 shell 语言&#xff08;或命令行语言&#xff09;&#xff0c;广泛用于 Unix 和 Unix-like 操作系统&#xff0c;如 Linux 和 macOS。它提供了一个交互式界面&#xff0c;允许用户输入命令以执行各种操作&#xff0c;如文件管理、程序执行、网络配置等。…

Spring Boot3远程调用工具RestClient

Spring Boot3.2之后web模块提供了一个新的远程调用工具RestClient&#xff0c;它的使用比RestTemplate方便&#xff0c;开箱即用&#xff0c;不需要单独注入到容器之中&#xff0c;友好的rest风格调用。下面简单的介绍一下该工具的使用。 一、写几个rest风格测试接口 RestCont…

Python知识点精汇:集合篇精解!

目录 一、集合是什么&#xff1f; 二、集合长什么样&#xff1f; 三、集合的一些操作 &#xff08;1&#xff09;添加新元素 &#xff08;2&#xff09;移出一个元素 &#xff08;3&#xff09;随机取出一个元素 &#xff08;4&#xff09;清空集合 四、集合间的操作 …

【论文笔记】Improved Baselines with Visual Instruction Tuning

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: Improved Baselines with …

【青牛科技】芯麦 GC2003:白色家电与安防领域中 ULN2003 的理想替代者

在白色家电和安防产品的电子元件世界里&#xff0c;驱动芯片的选择至关重要。今天我们要介绍的是芯麦 GC2003&#xff0c;一款能够完美替代 ULN2003 的优秀芯片&#xff0c;为这些产品带来卓越的性能提升。 一、GC2003 的突出特点 &#xff08;一&#xff09;优越的电气性能 …

绿光一字线激光模组:工业制造与科技创新的得力助手

在现代工业制造和科技创新领域&#xff0c;绿光一字线激光模组以其独特的性能和广泛的应用前景&#xff0c;成为了不可或缺的关键设备。这种激光模组能够发射出一条明亮且精确的绿色激光线&#xff0c;具有高精度、高稳定性和长寿命的特点&#xff0c;为各种精密加工和测量需求…