一、作业1：完成自己学校的官网，动忘内容直接贴，至少三个不同的页面
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、界面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>
（2）运行结果
二、作业2：自己寻找一个大型的网站,完放至少三个页面，其中必包含登录页面
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>淘宝登录界面</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>
（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>淘宝热卖界面</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">中国大陆 </span><span class="hang">免费注册 <a href=""></a></span><span class="hang">手机逛淘宝 </span><span class="hang">淘宝网首页 </span><span class="hang">我的淘宝 </span><span class="hang">购物车 </span><span class="hang">收藏夹 </span><span class="hang">商品分类 </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>
（2）运行结果
3、界面3
（1）相关代码
<!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> </span><input type="button" value="结算"style="background-color: red; width: 34px;height: 25px;color: #F5F5F5;border: none;"/></td></tr></tfoot></table></body>
</html>
（2）运行结果
