一、学校官网
1.1学校官网
代码如下：
html
<!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: 130px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-logo>img{
margin-top: 0;
max-width: 300px;
height: auto;
}
.search{
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.search>input{
width: 150px;
height: 40px;
border-radius: 20px;
border: 1px solid rgb(211, 211, 229);
padding: 0 15px;
}
.search>input:focus{
outline: none;
border: 1px solid black;
}
.search button{
width: 60px;
height: 40px;
border: none;
/* background-image: linear-gradient(blue,white); */
color: rgb(22, 112, 195);
cursor: pointer;
border-radius: 20px;
}
nav{
width: 100%;
background-color: rgb(31, 61, 150);
}
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="./3.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>效果如下：
1.2学校在线学堂官网
代码如下：
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>
:root{
--all-width:1300px;
}
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 {
width: 100%;
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;
font: "宋体";
}
.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%;
}
/* 蓝色登录按钮 */
.btn-login{
width: 80px;
height: 40px;
border: none;
/* background-image: linear-gradient(blue,white); */
color: rgb(138, 150, 161);
cursor: pointer;
border-radius: 15px;
}
/* .btn-login:hover{
background:#40a9ff;
} */
/* 红色重置按钮 */
.btn-reset{
width: 80px;
height: 40px;
border: none;
/* background-image: linear-gradient(blue,white); */
color: rgb(195, 212, 224);
cursor: pointer;
border-radius: 15px;
background-color: rgb(19, 119, 241);
}
</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 class="btn-login">教师登录</button>
<button class="btn-reset">学生登录</button>
</div>
</header>
<div class="banner">
<img src="./8.png" alt="">
</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>效果如下：
1.3学校教务系统登陆界面
代码如下：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学校教务系统登录界面</title>
<style>
/* 原 logo 区域 */
.logo{
position:relative;
padding:30px 0;
height:80px;
line-height:80px;
}
.logo img{
height:80px;
margin-left:15%;
vertical-align:middle;
}
/* 主容器 */
.flex-container{
width:1500px;
height:300px;
margin:auto;
background-color:#eee9e9;
display:flex;
align-items:center;
}
/* 左侧大图 */
.nav{
width:49%;
height:550px;
margin-left:15px;
display:flex;
align-items:center;
justify-content:center;
}
.nav img{
width:60%;
height:55%;
}
/* 右侧登录卡片 */
.login-card{
width:50%;
padding:0 50px;
display:flex;
flex-direction:column;
justify-content:space-between;
height:230px;
}
.login-title{
font-size:22px;
font-weight:600;
color:#333;
margin-bottom:25px;
}
.form-group{
display:flex;
align-items:center;
margin-bottom:10px;
}
.form-group label{
width:70px;
font-size:15px;
text-align:right;
margin-right:12px;
}
/* 新增：限制输入框长度 */
.input-box{
width:220px; /* 想要的宽度，可自行再改 */
}
.input-box input{
width:100%;
height:30px;
padding:0 12px;
border:1px solid #d9d9d9;
border-radius:4px;
}
/* 小图区域 */
.small-banner{
align-self:center;
margin-top:10px;
}
.small-banner img{
height:40px;
width:auto;
}
.aone{
margin-left: 10%;
color: gray;
}
.two{
color: blue;
}
.afour{
margin-left: 75%;
color: gray;
}
footer a{
color:#007bff;
text-decoration:none;
margin:0 5px;
}
footer a:nth-child(2){
text-decoration:underline;
}
</style>
</head>
<body>
<!-- logo -->
<div class="logo">
<img src="./4.png" alt="logo">
</div>
<!-- 主区域 -->
<div class="flex-container">
<!-- 左侧大图 -->
<div class="nav">
<img src="./5.png" alt="">
</div>
<!-- 右侧登录 -->
<div class="login-card">
<div class="login-title">用户登录</div>
<form action="#" method="post">
<div class="form-group">
<label>用户名</label>
<div class="input-box">
<input type="text" placeholder="请输入您的学号" required>
</div>
</div>
<div class="form-group">
<label>密码</label>
<div class="input-box">
<input type="password" placeholder="请输入您的密码" required>
</div>
</div>
</form>
<!-- 小图 -->
<div class="small-banner">
<img src="./6.png" alt="">
</div>
</div>
</div>
<!-- 页脚 -->
<footer>
<a href="#" class="aone">湖南强智科技发展有限公司 版权所有</a>
<a href="#" class="atwo">找回密码</a>
<a href="#" class="afour">隐私声明|设为首页</a>
</footer>
</body>
</html>效果如下：
二、淘宝网页
2.1淘宝登录页面
代码如下：
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;
}
.top2,.top3{
width: 120px;
height: 5px;
margin-top: 15px;
font-size: x-small;
}
.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: 210px;
height: 210px;
margin-left: 70px;
margin-top: 30px;
}
.inner3{
width: 30px;
height: 20px;
float: left;
font-size: x-small;
margin-left: 70px;
margin-top: 15px;
color: gray;
}
.inner4{
width: 55px;
height: 20px;
float: left;
font-size: x-small;
color: rgb(255, 98, 0);
margin-top: 15px;
}
.inner5{
width: 130px;
height: 20px;
float: left;
font-size: x-small;
margin-top: 15px;
color: gray;
}
.inner6{
width: 120px;
height: 20px;
margin-top: 80px;
margin-left: 120px;
color: gray;
font-size: 15px;
}
.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="./1.png" alt="taobao" width="70px" height="70px"></div>
<div class="main2">
<div class="top2"><a href="" class="top4">网络无障碍</a></div>
<div class="top3">
<a href="https://survey.taobao.com/apps/zhiliao/rWq00C2IB?spm=a2107.1.0.0.762211d9Ubw8RQ" class="top4">"登陆页面"改进建议</a>
</div>
</div>
</div>
<div class="middle">
<div class="middle1">
<div class="inner1">手机扫码登录</div>
<div class="inner2"> <img src="./二维码.png" alt="登录" width="210px" height="210px"></div>
<div class="inner3">打开</div>
<div class="inner4">淘宝app</div>
<div class="inner5">------点击左上角扫一扫</div>
<div class="inner6">怎么扫码登录?</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淘宝商品浏览界面
代码如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝</title>
<!--
技巧：
1.布局
2.小格子
3.通过调试工具看源代码
-->
<style>
/* 1.所有商品初始窗体 */
.prod_all{
width: 1310px;
height: 1000px;
margin: auto;
}
li{
list-style: none;
width: 214px;
height: 328px;
display: inline-block;
}
li:hover{
border: 1px solid orangered;
border-radius: 12px;
}
img{
border-radius: 12px;
margin-left: 2.8px;
}
.introduce{
font-size: 16px;
line-height: 24px;
}
.price{
color: orangered;
font-weight: bold;
font-family: "黑体";
font-size: 20px;
margin-top: 10px;
}
.price>span:nth-child(1){
font-size: 16px;
}
</style>
</head>
<body>
<div class="prod_all">
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>238</span></div>
</li>
</div>
</body>
</html>效果如下：
2.3淘宝购物车页面
代码如下：
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">店铺:MAC魅可官方店<img src="口红.png"height="23px"width="23px" /> </td>
</tr>
<tr height="30px">
<td align="right"><input type="checkbox" name="勾选"/></td>
<td><img src="口红.png"width="140px"height="150px"/></td>
<td width="35%"> <a href="https://www.taobao.com">【直播专享】MAC/魅可大子弹头口红唇膏哑光显色669/602/666</a>
<br/>
<img src="./9.png"width="150px"height="60px"/>
</td>
<td><font color="gainsboro">版本<br/>哑光大子弹头 | 浓郁持色 大宠粉666</font> </td>
<td>
<del><font color="grey">¥225.00</font></p></del>
<p>¥185.00</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">¥185.00</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">店铺:cogi高资旗舰店<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">[重磅升级]高姿面膜女蜂巢补水保湿舒缓积雪草修护熬夜肌官方正品</a>
<br/>
<img src="./10.png"width="200px"height="70px"/>
</td>
<td><font color="gainsboro">【升级版22片】3.0版到手2盒+2片<br/>【升级版组合装】3.0版锁水1盒+焕采1盒+修护2盒+7片</font> </td>
<td>
<p><color="grey">¥199.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">¥199.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>效果如下：
