一、完成自己學習的官網，至少三個不同的頁面。
? ? ? ? 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">中國大陸 </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>運行結果圖如下：
三、淘寶的購物車界面
? ? ? ? 代碼：
<!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>運行結果圖如下：
![第十六屆藍橋杯青少組C++省賽[2025.8.9]第二部分編程題（4、矩陣圈層交錯旋轉）](http://pic.xiahunao.cn/第十六屆藍橋杯青少組C++省賽[2025.8.9]第二部分編程題（4、矩陣圈層交錯旋轉）)
![【FastGTP?】[01] 使用 FastGPT 搭建簡易 AI 應用](http://pic.xiahunao.cn/【FastGTP?】[01] 使用 FastGPT 搭建簡易 AI 應用)
的進化之路)
)
