一、完成自己学习的官网，至少三个不同的页面。

        1、界面1

         （1）代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学校官网1</title><style>:root{--all-width:1300px;}header.header{width: 100%;height: auto;border-bottom: 1px solid blue;}.top-logo{width: var(--all-width);height: 180px;margin: auto;display: flex;align-items: center;justify-content: space-between;}.top-logo>img{margin-top: 0;max-width: 300px;height: auto;}.search{width: 500px;height: 50px;display: flex;align-items: center;}.search>input{width: 400px;height: 40px;border-radius: 20px;border: 1px solid blue;padding: 0 15px;}.search>input:focus{outline: none;border: 1px solid blue;}.search button{width: 100px;height: 40px;border: none;background-image: linear-gradient(blue,white);color: white;cursor: pointer;border-radius: 20px;}nav{width: 100%;background-color: blue;}nav > ul{list-style: none;         margin: 0 auto;padding: 0;max-width: var(--all-width);display: flex;            justify-content: center;   gap: 40px;                 }nav>ul>li{line-height: 50px;}nav>ul>li>a{display: block;color: #fff;text-decoration: none;font-size: 18px;padding: 0 10px;}nav > ul > li > a:hover{background-color: rgba(255,255,255,.2);border-radius: 4px;}.banner{width: 100%;height: 500px;background-image: url();background-size: cover;background-position: center;}.news-section{width: 100%;display: flex;justify-content: space-between;}.news-item{width: 30%;border: 1px solid #ccc;padding: 20px;box-sizing: border-box;}.box{width: 129%;max-width: var(--all-width);}.box img{width: 129%;height: auto;display: block;}</style>
</head>
<body><header class="header"><div class="top-logo"><img src="./image.png" alt="校徽"><div class="search"><input type="text" placeholder="搜索"><button>搜索</button></div></div><nav><ul><li><a href="#">首页</a></li><li><a href="#">学校概况</a></li><li><a href="#">党建工作</a></li><li><a href="#">学院设置</a></li><li><a href="#">人才培养</a></li><li><a href="#">招生就业</a></li><li><a href="#">活力校园</a></li><li><a href="#">校园风采</a></li><li><a href="#">信息服务</a></li></ul></nav><div class="box"><img src="./2.png" alt=""></div></header><div class="banner"></div>
</body>
</html>

        (2)运行界面

2、界面2

        （1）相关代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学校官网2</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f5f5f5;}header {background-color: #fff;padding: 10px 20px;display: flex;justify-content: space-between;align-items: center;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.logo {display: flex;align-items: center;}.logo img {height: 40px;margin-right: 10px;}nav ul {list-style: none;display: flex;align-items: center;}nav ul li {margin: 0 15px;}nav ul li a {color: #333;text-decoration: none;font-weight: bold;}.search-bar {display: flex;align-items: center;}.search-bar input[type="text"] {padding: 8px;border: 1px solid #ccc;border-radius: 4px;font-size: 16px;outline: none;}.search-bar button {padding: 8px 12px;margin-left: 5px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;}.search-bar button:hover {background-color: #0056b3;}.banner {background-color: white;color: white;text-align: center;padding: 50px 0;font-size: 24px;font-weight: bold;}.course-section, .live-section {padding: 20px;}.course-section h2, .live-section h2 {margin-bottom: 20px;}.course-list, .live-list {display: flex;flex-wrap: wrap;justify-content: space-between;}.course-item, .live-item {width: 23%;background-color: #fff;border: 1px solid #ddd;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 4px rgba(0,0,0,0.1);margin-bottom: 20px;}.course-item img, .live-item img {width: 100%;height: auto;}.course-item h3, .live-item h3 {padding: 10px;margin: 0;font-size: 18px;}footer {background-color: #003366;color: white;text-align: center;padding: 10px 0;position: relative;width: 100%;}</style>
</head>
<body><header><div class="logo"><img src="./在线学堂.png" alt="logo"></div><nav><ul><li><a href="#">首页</a></li><li><a href="#">全部课程</a></li><li><a href="#">公开课</a></li><li><a href="#">云课直播</a></li><li><a href="#">新闻公告</a></li><li><a href="#">数图资源</a></li><li><a href="#">智汇大讲堂</a></li></ul></nav><div class="search-bar"><input type="text" placeholder="请输入课程名称"><button type="submit">搜索</button></div><div><button>教师登录</button><button>学生登录</button></div></header><div class="banner"><img src="./3.png" alt=""></div><div class="course-section"><h2>公开课</h2><div class="course-list"><div class="course-item"><img src="https://s2.yinghuaonline.com/upfiles/1645663121424.jpg" alt="课程1"><h3>中国特色社会主义理论</h3></div><div class="course-item"><img src="https://s2.yinghuaonline.com/upfiles/1646626962617.jpg "alt="课程2"><h3>思想道德</h3></div><div class="course-item"><img src="https://s2.yinghuaonline.com/upfiles/1645663064226.jpg" alt="课程3"><h3>马克思主义基本原理概论</h3></div><div class="course-item"><img src="https://s2.yinghuaonline.com/upfiles/1645663153602.jpg" alt="课程4"><h3>中国特色社会主义思想</h3></div></div></div><div class="course-section"><h2>计算机实训</h2><div class="course-list"><div class="course-item"><img src="https://s2.yinghuaonline.com/upfiles/1676421601320.jpg" alt="课程1"><h3>5G全网部署仿真与实践</h3></div><div class="course-item"><img src="https://s2.yinghuaonline.com/upfiles/1655295971670.jpg"alt="课程2"><h3>大学计算机基础</h3></div><div class="course-item"><img src="https://s2.yinghuaonline.com/upfiles/1676365389801.jpg" alt="课程3"><h3>机器人制作与创客综合能力实训</h3></div><div class="course-item"><img src="https://s3.hongmukej.com/upfiles/1750215334996.png" alt="课程4"><h3>数据挖掘</h3></div></div></div><div class="live-section"><h2>热门直播</h2><div class="live-list"><div class="live-item"><img src="https://s2.yinghuaonline.com/upfiles/1650260636816.png" alt="直播1"><h3>商务谈判技巧</h3></div><div class="live-item"><img src="https://s2.yinghuaonline.com/upfiles/1650260339702.png" alt="直播2"><h3>打造高执行力团队</h3></div><div class="live-item"><img src="https://s2.yinghuaonline.com/upfiles/1650260472088.png" alt="直播3"><h3>高校资产管理的信息化应用</h3></div><div class="live-item"><img src="https://s2.yinghuaonline.com/upfiles/1650260500497.png" alt="直播4"><h3>新时代智慧校园建设</h3></div></div></div>
</body>
</html>

        (2) 运行结果：

3、界面三

        （1）代码

<!DOCTYPE html>
<html lang="en">
<head><mate charset="UTF-8"><title>学校官网3</title><style>.logo{  position:relative;  padding:30px 0;height:80px;         line-height:80px;          }.logo img{height:80px;           margin-left:15%;vertical-align:middle;}.fhsy{position:absolute;left:85%;           top:50%;transform:translateY(-50%);color:#8f9295;text-decoration:none;}.fhsy:hover{ text-decoration:underline;}.nav,.body{height: 550px;float: left;margin-left: 15px;}.nav {width: 49%;height: 550px;float: left;margin-left: 15px;overflow: hidden;  }.p {width: 100%;height: 100%;}.p img {width: 100%;height: 100%;object-fit: cover;  display: block;     }.body{width: 49%;background:#ede6e6;        display:flex;align-items:center;justify-content:center;}.login-title{font-size:22px;text-align:center;margin-bottom:25px;font-weight:600;color:#333;}.form-group{display:flex;align-items:center;margin-bottom:18px;}.form-group label{width:70px;         font-size:14px;font-size:14px;color:black;}.form-group input{width:100%;height:44px;padding:0 12px;border:1px solid #d9d9d9;border-radius:4px;font-size:14px;}.form-group input:focus{border-color:#1890ff;outline:none;}.captcha-box{display:flex;gap:10px;}.captcha-box input{flex:1;}.captcha-img{width:110px;height:44px;background:#eee;border:1px solid #d9d9d9;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;letter-spacing:2px;user-select:none;}.remember-row{display:flex;align-items:center;margin:15px 0;font-size:14px;color:#666;}.remember-row input{margin-right:6px;width:16px;height:16px;}.forgot{margin-left:auto;color:#1890ff;text-decoration:none;font-size:14px;}.forgot:hover{text-decoration:underline; }.login-btn{width:100%;height:46px;background:#1890ff;border:none;border-radius:4px;color:#fff;font-size:16px;cursor:pointer;}.login-btn:hover{background:#40a9ff; }</style>
</head>
<body><div class="logo"><img src="./在线学堂.png" alt="logo"><a class="fhsy" href="#">返回首页</a></div><header class="nav"><div class="p"><img src="./4.png" alt=""></div></header><div class="body"><div class="login-card"><div class="login-title">学生登录</div><form action="#" method="post"><div class="form-group"><label>用户名</label><input type="text" placeholder="请输入您的学号" required></div><div class="form-group"><label>密码</label><input type="password" placeholder="请输入您的密码" required></div><div class="form-group"><label>验证码</label><div class="captcha-box"><input type="text" placeholder="请输入验证码" maxlength="5" required><div class="captcha-img">4DND</div></div></div><div class="remember-row"><label><input type="checkbox"> 保持登录状态</label><a class="forgot" href="#">忘记密码？</a></div><button type="submit" class="login-btn">登录</button></form></div></div>
</body>
</html>

        运行结果：

二、大型网站的页面

        代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝登录界面</title><style>body{height: 630px;background-color:rgb(241, 241, 241);}.main1{width: 1280px;height:70px ;margin: auto;}.top1{float: left;margin-left: 28px;}.main2{width: 150px;height: 70px;float: left;margin-left: 980px;}.top4,.top5{   color:grey;text-decoration: none;}.top5,.top4:hover{color: orange;text-decoration: none;}.middle{width: 850px;height: 520px;background-color: white;border-radius: 20px;margin: auto;margin-top: 90px;    }.middle1{width: 350px;height: 450px;float: left;font-family: "黑体"  }.middle2{width: 400px;height: 450px;margin-left: 80px;float: left;font-family: "黑体"}.inner1{width: 200px;height: 30px;font-size: larger;margin-left: 70px;text-align: center;margin-top: 60px;}.inner2{width: 230px;height: 350px;margin-left: 70px;margin-top: 30px;}.inner7{width: 100px;height: 30px;color: rgb(255, 94, 0);font-size: larger;font-weight: 1000;margin-top: 55px;margin-left: 75px;float: left;}.inner8{width: 100px;height: 30px;color: black;font-size: larger;font-weight: 400;margin-top: 55px;margin-left: 35px;float: left;}.input1,.input2{width: 280px;height: 40px;margin-left: 50px;border-radius: 10px;margin-top: 30px;background-color: rgb(236, 235, 235);border: 0cap;}.input3{text-decoration: none;margin-left: 280px;font-size: x-small;color: grey;}.input4{width: 280px;height: 40px;margin-left: 50px;border-radius: 10px;margin-top: 70px;background-color: rgb(255, 94, 0);border: 0cap;color: white;}.aone,.atwo,.athree,.afour{text-decoration: none;color: grey;margin-left: 10px;font-size: smaller; }.aone{margin-left: 45px;}.input5{margin-top: 30px;}</style>
</head>
<body><div class="main1"><div class="top1"><img src="./淘宝logo.png" alt="taobao" width="70px" height="70px"></div><div class="main2"><img src="./5.png" alt=""></div></div></div><div class="middle"><div class="middle1"><div class="inner1">手机扫码登录</div><div  class="inner2"> <img src="./二维码.png" alt="登录" width="230px" height="350px"></div></div><div class="middle2"><div class="inner7">密码登录</div><div class="inner8">短信登录</div><input type="text" placeholder="   账号名/邮箱/手机号" class="input1"><input type="password" placeholder="   请输入登录密码" class="input2"            ><a href="https://passport.taobao.com/ac/password_find.htm?from_site=0&lang=zh_CN&app_name=tb&tracelog=signin_main_pass" class="input3">忘记密码</a><button class="input4">登录</button><div class="input5"><a href="" class="aone"> 支付宝登录  |</a><a href="" class="atwo"> 钉钉登录   |</a><a href="" class="athree"> 忘记账号   |</a><a href="" class="afour"> 免费注册</a></div></div></div>
</body>
</html>

运行结果图：

界面的浏览代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝热卖界面</title>
<style>.box{width: 80%;margin: auto; }.prod{width: 234px;height: 366px;list-style: none;border: 1px solid #f2f2f2;display: inline-block;line-height: 1.6;margin-left: -5px;}.prod-href{text-decoration: none;}.prod:hover{border-color: red;}.prod-intoduce-span{color: #9b9b9b;font-size: 14px;}.prod-price{font-size: 19px;color: red;}.prod-boss{color: #9b9b9b;font-size: 12px;}.prod-sale{color: #9b9b9b;font-size: 12px;border-top: 1px solid #f2f2f2;text-align: right;padding-top: 10px;}.prod-test-box{width: 210px;height: 340px;margin: auto;margin-top: 15px;}.tou{display: inline-block;margin-left: 10%;}.top{display: inline-block;width: 90%;height: 10%;}.shousuo{width: 600px;height: 35px;border: 2px solid red;float: right;margin-right: 25%;margin-top: 2%;}.wenzi{background-color: rgb(235, 65, 18);width: 65px;height: 35px;margin-left: 100%;border: solid 1px red;}.ziti{color: #f9f8f8;margin: auto;}.box2{width: 90%;
height: 45px;
background-color: rgb(253, 250, 250);
margin-left: 5%;
border-radius:8%;}
.hang{font-size: 25px;
color: rgb(61, 62, 62);}
.hang:hover{
background-color: rgb(201, 29, 29);
}
</style>
</head>
<body>
<div class="box2"><table align="center"><tr><td><span class="hang">中国大陆 &nbsp;</span><span class="hang">免费注册 &nbsp;<a href=""></a></span><span class="hang">手机逛淘宝 &nbsp;</span><span class="hang">淘宝网首页 &nbsp;</span><span class="hang">我的淘宝 &nbsp;</span><span class="hang">购物车 &nbsp;</span><span class="hang">收藏夹 &nbsp;</span><span class="hang">商品分类 &nbsp;</span></td></tr></table></div>
<div class="top"><div class="tou"><img class="biao" width="300px" height="150px" src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt=""></div><div class="shousuo" >
<div class="wenzi"><span class="ziti">搜索</span>
</div>
</div></div>
<div class="box"><ul class="prods"><!-- 编写一个商品链接 --><li class="prod"><a class="prod-href" href=""><div class="prod-test-box"><img class="prod-img" width="200px" height="200px" src="http://img.alicdn.com/img/i3/1746750157/O1CN01hfX7Rn1D1x1efnIT8_!!0-saturn_solar.jpg" alt=""><div class="prod-introduce"><span class="prod-intoduce-span">好利来半熟芝士双味2盒奥巧网红蛋糕零食甜品</span></div><div class="prod-price">￥41.00</div><div class="prod-boss">好利来官方旗舰店</div><div class="prod-sale">月销7000+</div></div></a></li><li class="prod"><a class="prod-href" href=><div class="prod-test-box"><img class="prod-img" width="200px" height="200px" src="http://img.alicdn.com/img/i4/16861003/O1CN01NkHNM11JHQHM028ns_!!4611686018427381579-0-saturn_solar.jpg" alt=""><div class="prod-introduce"><span class="prod-intoduce-span">靖江猪肉脯小包零食品蜜汁干吃的肉铺休闲边角料</span></div><div class="prod-price">￥55.67</div><div class="prod-boss">满满无限旗舰店</div><div class="prod-sale">月销999+</div></div></a></li><li class="prod"><a class="prod-href" href=""><div class="prod-test-box"><img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i1/30869979/O1CN018z8Xvj2NaRIXr5hp2_!!2-saturn_solar.png_360x360xzq75.jpg_.webp" alt=""><div class="prod-introduce"><span class="prod-intoduce-span">根筋辣条素牛筋8090后怀旧零食麻辣小吃儿时童年回忆</span></div><div class="prod-price">￥12.98</div><div class="prod-boss">金金美食特麻辣零食</div><div class="prod-sale">月销7000+</div></div></a></li><li class="prod"><a class="prod-href" href=""><div class="prod-test-box"><img class="prod-img" width="200px" height="200px" src="http://img.alicdn.com/img/i1/2557280153/O1CN01kLoZl91D07XnLrE9g_!!0-saturn_solar.jpg" alt=""><div class="prod-introduce"><span class="prod-intoduce-span">三只松鼠零食大礼包坚果礼盒混合干果休闲小吃食品</span></div><div class="prod-price">￥43.51</div><div class="prod-boss">三只松鼠官方旗舰店</div><div class="prod-sale">月销4万+</div></div></a></li><li class="prod"><a class="prod-href" href=""><div class="prod-test-box"><img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i2/113712902/O1CN01QUhZFP1XJALm3Vxkb_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""> <div class="prod-introduce"><span class="prod-intoduce-span">麻辣王子辣条30小包官方正品</span></div><div class="prod-price">￥6.9</div><div class="prod-boss">惠祥食品</div><div class="prod-sale">月销5000+</div></div></a></li><li class="prod"><a class="prod-href" href=""><div class="prod-test-box"><img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i1/2470120118/O1CN01iMKCch1Ck5hitESO6_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""><div class="prod-introduce"><span class="prod-intoduce-span">滇二娃农科院云南特产麻辣土豆片贵州小吃薯片休闲小零食</span></div><div class="prod-price">￥7.9</div><div class="prod-boss">科闲合早</div><div class="prod-sale">月销6000+</div></div></a></li><li class="prod"><a class="prod-href" href=""><div class="prod-test-box"><img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i2/52523936/O1CN01FymFaz1ewjsD7Bye6_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""><div class="prod-introduce"><span class="prod-intoduce-span">天猫盐津铺子零食大礼包休闲食品小吃辣卤解馋小零食吃货</span></div><div class="prod-price">￥39.9</div><div class="prod-boss">址津铺了合早旅I庄</div><div class="prod-sale">月销2000+</div></div></a></li><li class="prod"><a class="prod-href" href="https://img.alicdn.com/imgextra/i1/5525149018/O1CN012sM0b52GUIh1yuHNp_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp"><div class="prod-test-box"><img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i1/5525149018/O1CN012sM0b52GUIh1yuHNp_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""><div class="prod-introduce"><span class="prod-intoduce-span">泰国风味芒果干500g/1000蜜饯果干果脯网红休闲零食一斤...</span></div><div class="prod-price">￥8.85</div><div class="prod-boss">工王结寺T厂店</div><div class="prod-sale">月销1000+</div></div></a></li><li class="prod"><a class="prod-href" href=""><div class="prod-test-box"><img class="prod-img" width="200px" height="200px" src="https://img.alicdn.com/imgextra/i4/382090074/O1CN01ppQ01k1CPwHTXUqgI_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""><div class="prod-introduce"><span class="prod-intoduce-span">天猫王小卤无骨鸡爪72g酸辣柠檬脱骨去骨凤爪解馋小零食.…</span></div><div class="prod-price">￥199</div><div class="prod-boss">王小与有实店</div><div class="prod-sale">月销800+</div></div></a></li><li class="prod"><a class="prod-href" href=""><div class="prod-test-box"><img class="prod-img" width="200px" height="200px" src="http://img.alicdn.com/img/i1/122061155/O1CN01pfOWbo1KP2UryMqwo_!!4611686018427380067-0-saturn_solar.jpg" alt=""><div class="prod-introduce"><span class="prod-intoduce-span">雪媚娘蛋黄酥休闲食品早餐糕点点心办公室零食</span></div><div class="prod-price">￥8.50</div><div class="prod-boss">天天特卖工厂</div><div class="prod-sale">月销6000+</div></div></a></li>     </ul>
</div>
</body>
</html>

运行结果图如下：

三、淘宝的购物车界面

        代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝购物车界面</title><style>.Tbsl{background-color: #FFFFFF;height: 80px;margin: 0px 0px 24px;}.box{text-align: center;overflow: hidden;}button{height: 18px;width: 22px;text-align: center;border: #F5F5F5;	}</style></head><body><table>		<tr><td width="68%"><img src="./淘宝购物车.png" /> </td><td><div id="Tbsl"><select style=" outline: none; width:50px;height:32px;border: 3px solid orangered;border-right: none;color: gainsboro;"><option selected="selected" disabled="disabled">宝贝</option><optgroup label="鞋靴"></optgroup><optgroup label="服装"></optgroup></select><input type="search" style="outline: none; border: 3px solid orangered; border-left: none; border-right: none; height: 31px; width:250px;"/><button style="color: #F5F5F5; width: 50px; height: 32px;background-color: red;border-color: red;">搜索</button> </div></td></tr></table><table  border="0" width="1300px"height="500px"><thead style="height: 30px;"><th align="right"><input type="checkbox" name="全选"/></th><th align="left">全选</th><th colspan="2">商品信息</th><th>单价</th><th width="5%">数量</th><th>金额</th><th>操作</th></thead><tr height="30px"><td align="right"><input type="checkbox" name="勾选"/></td><td colspan="10">店铺:回头爱逛小店<img src="https://img.alicdn.com/imgextra/i1/O1CN01pz5irY1bhDKceJor2_!!6000000003496-2-tps-144-144.png_760x760q30.jpg_.webp"height="23px"width="23px" /> </td></tr><tr height="30px"><td align="right"><input type="checkbox" name="勾选"/></td><td><img src="https://img.alicdn.com/imgextra/i4/2516668673/O1CN01qbSkVA2DwI1dDg3ib_!!2516668673.jpg_q50.jpg_.webp"width="140px"height="150px"/></td><td  width="35%"> <a href="https://www.taobao.com">白色方领连衣裙女夏2024新款法式复古收腰显瘦气质赫本风长款裙子</a><br/><img src="./6.png"width="150px"height="60px"/></td><td><font color="gainsboro">颜色分类：白色，<br/>尺码：L 建议105-115斤</font> </td><td><del><font color="grey">¥132.00</font></p></del> <p>¥105.60</p></td><td align="center" width="10%"><div class="box"><button>+</button><input type="number" value="1" style="border: none; height: 16px;width:30px;text-align: center;"/><button>-</button></div></td><td><font color="red">¥105.60</font></td><td><a href="#">移入收藏夹</a></br><a href="#">删除</a></td></tr><tr height="30px"><td align="right"><input type="checkbox" name="勾选"/></td><td colspan="10">店铺:Apple Store 官方旗舰店<img src= https://gw.alicdn.com/imgextra/i2/O1CN01Mo9BIf1DOOTmHgOR1_!!6000000000206-2-tps-102-48.png height="23px"width="30px" /> </td></tr><tr height="30px"><td align="right"><input type="checkbox" name="勾选"/></td><td><img src="./平板.png"width="140px"height="150px" /></td><td><a href="https://www.taobao.com">Apple/苹果 11 英寸 iPad Pro - 标准玻璃面板</a><br/><img src="./7.png"width="200px"height="70px"/></td><td><font color="gainsboro">存储容量：256GB<br/>机身颜色：银色<br>网络类型：无线局域网机型</font> </td><td> <p><color="grey">¥8999.00</p> </td><td> <div class="box"><button>+</button><input type="number" value="1" style=" border: none; height: 16px;width: 30px;text-align: center;"/><button>-</button></td><td><font color="red">¥8999.00</font> </td><td><a href="#">移入收藏夹</a></br><a href="#">删除</a> </td></tr><tfoot align="right" style="background-color: gainsboro;"><tr><td colspan="8">合计（不含运费）：0元<span>&nbsp;</span><input type="button" value="结算"style="background-color: red; width: 34px;height: 25px;color: #F5F5F5;border: none;"/></td></tr></tfoot></table></body>
</html>

运行结果图如下：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/93208.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/93208.shtml
英文地址，请注明出处：http://en.pswp.cn/pingmian/93208.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于element-plus和IndexedDB数据库的基础表单

基于element-plus和IndexedDB数据库的基础表单

本文介绍了基于Vue 3和Element Plus的表单项目配置页面实现。页面包含搜索栏、操作按钮、数据表格和分页组件&#xff0c;使用IndexedDB进行本地数据存储。主要功能包括&#xff1a;1) 通过模糊查询搜索项目&#xff1b;2) 分页显示项目数据&#xff1b;3) 添加/编辑/删除项目操…
阅读更多...
paimon实时数据湖教程-主键表更新机制

paimon实时数据湖教程-主键表更新机制

在上一章&#xff0c;我们学习了 Paimon 如何保证每一次写入的原子性和一致性。但数据仓库的核心需求不仅是写入&#xff0c;更重要的是更新。想象一个场景&#xff1a;我们需要实时更新用户的最新信息&#xff0c;或者实时累加计算用户的消费总额。传统的 Hive 数据湖对此无能…
阅读更多...
第十六届蓝桥杯青少组C++省赛[2025.8.9]第二部分编程题（4、矩阵圈层交错旋转）

第十六届蓝桥杯青少组C++省赛[2025.8.9]第二部分编程题（4、矩阵圈层交错旋转）

参考程序&#xff1a;#include <bits/stdc.h> using namespace std;const int MAXN 105; int a[MAXN][MAXN];int main() {int n;if (!(cin >> n)) return 0;for (int i 0; i < n; i)for (int j 0; j < n; j)cin >> a[i][j];int layers n / 2; // 每…
阅读更多...
【FastGTP✨】[01] 使用 FastGPT 搭建简易 AI 应用

【FastGTP✨】[01] 使用 FastGPT 搭建简易 AI 应用

简易应用&#xff1a;英语单词解释 例句 1. 前言 FastGPT 是一个低代码 AI 应用构建平台&#xff0c;可以通过简单配置快速创建自己的 AI 应用。 本文将带你用 FastGPT 搭建一个 英语单词解释 例句 的 AI 工具&#xff0c;输入英文单词后&#xff0c;输出&#xff1a; 单词…
阅读更多...
【Mysql语句练习】

【Mysql语句练习】

MysqlMysql语句练习一、建库建表二、插入数据三、查询Mysql语句练习 一、建库建表 1、创建数据库mydb11_stu&#xff0c;并使用数据库 # 创建数据库mydb11_stu mysql> create database mydb11_stu; Query OK, 1 row affected (0.00 sec) # 使用数据库 mysql> use mydb1…
阅读更多...
用Python Scrapy征服网络爬虫（反爬技术深入剖析）

用Python Scrapy征服网络爬虫（反爬技术深入剖析）

目录 第1章：Scrapy是个啥？为什么它是你爬虫路上的最佳拍档？ 1.1 Scrapy的核心亮点 1.2 啥时候用Scrapy？ 1.3 安装Scrapy 第2章：动手写你的第一个Scrapy爬虫 2.1 创建Scrapy项目 2.2 定义数据结构（Items） 2.3 编写爬虫逻辑 2.4 运行爬虫 2.5 小技巧：调试爬虫 …
阅读更多...
解决Electron透明窗口点击不影响其他应用

解决Electron透明窗口点击不影响其他应用

遇到的问题&#xff1a;在electron透明窗口点击&#xff0c;影响窗口下的应用接受不到点击事件解决方案&#xff1a;CSSIgnoreMouseEvents实现原理&#xff1a;主进程默认设置禁用目标窗口鼠标事件&#xff08;禁用之后能检测到mousemove&#xff09;&#xff0c;UI进程检测页面…
阅读更多...
C# 泛型（Generics）详解

C# 泛型（Generics）详解

泛型是 C# 2.0 引入的核心特性&#xff0c;它允许在定义类、接口、方法、委托等时使用未指定的类型参数&#xff0c;在使用时再指定具体类型。这种机制可以显著提高代码的复用性、类型安全性和性能。一、泛型的核心概念类型参数化泛型允许将类型作为 "参数" 传递给类…
阅读更多...
Spring中存在两个相同的Bean是否会报错？

Spring中存在两个相同的Bean是否会报错？

第一种情况&#xff1a;使用XML的方式设置Bean&#xff0c;这种情况在Spring启动时就会报错&#xff0c;因为ID在Spring中是Bean的唯一标识&#xff0c;Spring容器在启动时会校验唯一性&#xff0c;一旦发现重复就会报错。但是如果是在两个不同的XML文件中定义两个相同的Bean&a…
阅读更多...
【新手入门】Android基础知识（一）：系统架构

【新手入门】Android基础知识（一）：系统架构

目 录 Android 系统架构图 1. 应用 2. JAVA API 框架 3. 原生 C/C 库 4. Android 运行时&#xff08;Android Runtime&#xff09; 5. 硬件抽象层 (HAL) 6. Linux 内核 参考资料 Android 系统架构图 Android底层内核空间以Linux Kernel作为基石&#xff0c;上层用户空…
阅读更多...
晶振电路的负载电容、电阻参数设计

晶振电路的负载电容、电阻参数设计

系列文章目录 文章目录系列文章目录前言一、晶振主要参数二、有源与无源区别三、无源晶振四、有源晶振总结前言 在硬件电路的设计中&#xff0c;晶振电路是必不可少的&#xff0c;它充当了整个电路心脏的作用。在这个晶振电路的设计中负载电容、电阻参数的选型是很重要的&…
阅读更多...
电脑上练打字用什么软件最好：10款打字软件评测

电脑上练打字用什么软件最好：10款打字软件评测

现在孩子们在电脑上练打字&#xff0c;软件一搜一大把&#xff0c;可好多家长和老师都犯愁&#xff1a;到底哪个管用&#xff1f;我带200多个小学生练过字&#xff0c;前前后后试了十款软件&#xff0c;今天就掏心窝子说说——有的看着花哨其实没用&#xff0c;有的专业是专业但…
阅读更多...
第五天～提取Arxml的模板信息

第五天～提取Arxml的模板信息

🌟 ARXML模板信息提取：解锁汽车软件的乐高魔法 在汽车电子的世界里，AUTOSAR（汽车开放系统架构）如同无形的神经系统，而ARXML文件正是承载这套神经系统蓝图的数字载体。当工程师们需要批量创建或修改ECU（电子控制单元）配置时，模板信息提取便成为了一项至关重要的核心技…
阅读更多...
react+antd+vite自动引入组件、图标等

react+antd+vite自动引入组件、图标等

前言&#xff1a;react在使用antd的时候&#xff0c;也是需要每个组件都在界面上按需引入的&#xff0c;那能不能自动生成&#xff0c;按需使用呢&#xff1f;我们这里说一说这个。安装插件&#xff0c;组件按需引入unplugin-antd-resolverunplugin-auto-importnpm install unp…
阅读更多...
深度学习与遥感入门（六）｜轻量化 MobileNetV2 高光谱分类

深度学习与遥感入门（六）｜轻量化 MobileNetV2 高光谱分类

系列回顾&#xff1a; &#xff08;一&#xff09;CNN 基础&#xff1a;高光谱图像分类可视化全流程 &#xff08;二&#xff09;HybridNet&#xff08;CNNTransformer&#xff09;&#xff1a;提升全局感受野 &#xff08;三&#xff09;GCN 入门实战&#xff1a;基于光谱 KNN…
阅读更多...
第4节 神经网络从公式简化到卷积神经网络(CNN)的进化之路

第4节 神经网络从公式简化到卷积神经网络(CNN)的进化之路

🧙 深度学习的"玄学进化史" 从CNN用卷积层池化层处理图片，循环网络RNN如何利用上下文处理序列数据，到注意力机制让Transformer横空出世，现在的大语言模型已经能写能画能决策！每个新技巧都让人惊呼"还能这么玩"，难怪说深度学习像玄学——但这玄学，…
阅读更多...
最新去水印小程序系统 前端+后端全套源码 多套模版 免授权(源码下载)

最新去水印小程序系统 前端+后端全套源码 多套模版 免授权(源码下载)

最新去水印小程序系统 前端后端全套源码 多套模版 免授权 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/91669468 更多资源下载&#xff1a;关注我
阅读更多...
TCP Socket 编程实战：实现简易英译汉服务

TCP Socket 编程实战：实现简易英译汉服务

前言&#xff1a;TCP&#xff08;传输控制协议&#xff09;是一种面向连接、可靠的流式传输协议&#xff0c;与 UDP 的无连接特性不同&#xff0c;它通过三次握手建立连接、四次挥手断开连接&#xff0c;提供数据确认、重传机制&#xff0c;保证数据有序且完整传输。本文将基于…
阅读更多...
CF566C Logistical Questions Solution

CF566C Logistical Questions Solution

Description 给定一棵 nnn 个点的树 TTT&#xff0c;点有点权 aia_iai​&#xff0c;边有边权 www. 定义 dist⁡(u,v)\operatorname{dist}(u,v)dist(u,v) 为 u→vu\to vu→v 的简单路径上的边权和. 找到一个节点 uuu&#xff0c;使得 W∑i1ndist⁡(u,i)32aiW\sum\limits_{i1}^n…
阅读更多...
聊天室全栈开发-保姆级教程（Node.js+Websocket+Redis+HTML+CSS）

聊天室全栈开发-保姆级教程（Node.js+Websocket+Redis+HTML+CSS）

前言 最近在学习websocket全双工通信&#xff0c;想要做一个联机小游戏&#xff0c;做游戏之前先做一个聊天室练练手。 跟着本篇博客&#xff0c;可以从0搭建一个属于你自己的聊天室。 准备阶段 什么人适合学习本篇文章&#xff1f; 答&#xff1a;前端开发者&#xff0c;有一…
阅读更多...
最新文章

Copyright @ 2022~2023