学校官网
<!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>
2.在线学堂
<!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>
3.教务系统
<!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>
淘宝界面
<!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>
商品界面
<!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/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>11</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>11</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>11</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>11</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>23</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>23</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>23</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>23</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>28</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>28</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>28</span></div>
</li>
<li>
<!-- 1.图片 -->
<div>
<img width="200px" height="250px" src="https://img.alicdn.com/bao/uploaded/i1/63695485/O1CN016pgzES1qOBFu6NguK_!!63695485.jpg_460x460q90.jpg_.webp">
</div>
<!-- 2.商品介绍 -->
<div class="introduce">手机支架</div>
<!-- 3.价格 -->
<div class="price"><span>￥</span><span>38</span></div>
</li>
</div>
</body>
</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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
background-color: #f4f4f4;
color: #333;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
/* 顶部导航栏 */
.top-bar {
background: linear-gradient(to right, #ff5000, #ff8000);
color: white;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 28px;
font-weight: bold;
display: flex;
align-items: center;
}
.logo img {
margin-right: 10px;
}
.search-box {
display: flex;
width: 60%;
}
.search-box select {
border: 2px solid #ff5000;
border-right: none;
padding: 8px;
outline: none;
border-radius: 4px 0 0 4px;
color: #666;
}
.search-box input {
flex: 1;
border: 2px solid #ff5000;
border-left: none;
border-right: none;
padding: 8px 15px;
outline: none;
font-size: 14px;
}
.search-box button {
background: #ff5000;
border: none;
color: white;
padding: 0 20px;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-weight: bold;
}
.user-actions a {
color: white;
text-decoration: none;
margin-left: 20px;
font-size: 14px;
}
/* 购物车标题 */
.cart-header {
padding: 20px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
}
.cart-header h1 {
font-size: 24px;
color: #ff5000;
margin-right: 20px;
}
.cart-header span {
color: #999;
}
/* 购物车表格 */
.cart-table {
width: 100%;
border-collapse: collapse;
}
.cart-table th {
background: #f8f8f8;
padding: 12px 15px;
text-align: left;
font-weight: normal;
color: #666;
border-bottom: 1px solid #eee;
}
.cart-table td {
padding: 15px;
border-bottom: 1px solid #eee;
vertical-align: top;
}
.shop-row {
background: #fafafa;
}
.shop-name {
display: flex;
align-items: center;
}
.shop-name img {
width: 20px;
height: 20px;
margin-left: 10px;
}
.product-info {
display: flex;
align-items: flex-start;
}
.product-img {
width: 100px;
height: 100px;
margin-right: 15px;
border: 1px solid #f0f0f0;
border-radius: 4px;
overflow: hidden;
}
.product-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-details {
flex: 1;
}
.product-title {
font-size: 16px;
margin-bottom: 10px;
color: #333;
text-decoration: none;
display: block;
}
.product-title:hover {
color: #ff5000;
}
.product-sku {
color: #999;
font-size: 13px;
line-height: 1.5;
}
.product-promo {
margin-top: 10px;
}
.product-promo img {
height: 20px;
margin-right: 5px;
}
.price {
color: #ff5000;
font-weight: bold;
font-size: 16px;
}
.original-price {
color: #999;
text-decoration: line-through;
font-size: 13px;
}
.quantity-box {
display: flex;
align-items: center;
}
.quantity-btn {
width: 28px;
height: 28px;
background: #f5f5f5;
border: 1px solid #ddd;
font-size: 16px;
cursor: pointer;
}
.quantity-btn:hover {
background: #eee;
}
.quantity-input {
width: 40px;
height: 28px;
border: 1px solid #ddd;
border-left: none;
border-right: none;
text-align: center;
outline: none;
}
.subtotal {
color: #ff5000;
font-weight: bold;
font-size: 16px;
}
.actions a {
display: block;
color: #666;
text-decoration: none;
font-size: 13px;
margin-bottom: 5px;
}
.actions a:hover {
color: #ff5000;
}
/* 底部结算栏 */
.cart-footer {
padding: 20px;
background: #f8f8f8;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-left {
display: flex;
align-items: center;
}
.footer-left label {
margin-left: 5px;
cursor: pointer;
}
.footer-right {
display: flex;
align-items: center;
}
.total-price {
margin-right: 20px;
text-align: right;
}
.total-price span {
color: #ff5000;
font-size: 20px;
font-weight: bold;
}
.checkout-btn {
background: #ff5000;
color: white;
border: none;
padding: 10px 30px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.checkout-btn:hover {
background: #ff6a00;
}
.recommendation {
margin-top: 30px;
}
.recommendation h2 {
font-size: 18px;
padding: 10px 20px;
background: #f8f8f8;
border-bottom: 1px solid #eee;
}
.recommend-products {
display: flex;
padding: 20px;
overflow-x: auto;
}
.recommend-item {
width: 180px;
margin-right: 20px;
flex-shrink: 0;
text-align: center;
}
.recommend-img {
width: 160px;
height: 160px;
margin-bottom: 10px;
border-radius: 4px;
overflow: hidden;
}
.recommend-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recommend-title {
font-size: 14px;
color: #333;
text-decoration: none;
margin-bottom: 5px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.recommend-price {
color: #ff5000;
font-weight: bold;
}
/* 响应式调整 */
@media (max-width: 768px) {
.top-bar {
flex-direction: column;
padding: 10px;
}
.search-box {
width: 100%;
margin: 10px 0;
}
.cart-table th, .cart-table td {
padding: 8px;
font-size: 14px;
}
.product-img {
width: 70px;
height: 70px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 顶部导航栏 -->
<div class="top-bar">
<div class="logo">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01jDd3bQ1b8KzU1Vv8J_!!6000000003414-2-tps-240-80.png" alt="淘宝" width="120">
</div>
<div class="search-box">
<select>
<option selected>宝贝</option>
<option>店铺</option>
</select>
<input type="search" placeholder="请输入搜索关键词">
<button>搜索</button>
</div>
<div class="user-actions">
<a href="#">我的淘宝</a>
<a href="#">购物车</a>
<a href="#">收藏夹</a>
<a href="#">商品分类</a>
</div>
</div>
<!-- 购物车标题 -->
<div class="cart-header">
<h1>购物车</h1>
<span>温馨提示：商品价格可能随时变化，请及时结算</span>
</div>
<!-- 购物车表格 -->
<table class="cart-table">
<thead>
<tr>
<th width="5%"><input type="checkbox" id="select-all"> <label for="select-all">全选</label></th>
<th width="40%">商品信息</th>
<th width="10%">单价</th>
<th width="15%">数量</th>
<th width="10%">金额</th>
<th width="10%">操作</th>
</tr>
</thead>
<tbody>
<!-- 店铺1 -->
<tr class="shop-row">
<td colspan="6">
<input type="checkbox" checked>
<span class="shop-name">
小米官方旗舰店
<img src="https://img.alicdn.com/imgextra/i3/O1CN01m3Fv0D1Q4qZ4s5t7d_!!6000000001925-2-tps-160-160.png" alt="小米">
</span>
</td>
</tr>
<tr>
<td><input type="checkbox" checked></td>
<td>
<div class="product-info">
<div class="product-img">
<img src="https://img.alicdn.com/imgextra/i2/2217241077454/O1CN01unj02k24vzJ5S1dZ0_!!2217241077454.jpg" alt="小米手机">
</div>
<div class="product-details">
<a href="#" class="product-title">Xiaomi/小米 13 5G手机 骁龙8Gen2处理器 徕卡光学镜头 67W快充</a>
<div class="product-sku">
颜色：远山蓝<br>
版本：12GB+256GB<br>
套餐：官方标配
</div>
<div class="product-promo">
<img src="https://gtms01.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png" alt="优惠">
<span>店铺优惠：满3000减200</span>
</div>
</div>
</div>
</td>
<td>
<div class="original-price">¥4599.00</div>
<div class="price">¥4299.00</div>
</td>
<td>
<div class="quantity-box">
<button class="quantity-btn">-</button>
<input type="number" class="quantity-input" value="1" min="1">
<button class="quantity-btn">+</button>
</div>
</td>
<td class="subtotal">¥4299.00</td>
<td class="actions">
<a href="#">移入收藏夹</a>
<a href="#">删除</a>
<a href="#">找相似</a>
</td>
</tr>
<!-- 店铺2 -->
<tr class="shop-row">
<td colspan="6">
<input type="checkbox" checked>
<span class="shop-name">
阿迪达斯官方旗舰店
<img src="https://img.alicdn.com/imgextra/i2/1808940384/O1CN01Et9iNG1Ehv50iaAuJ_!!1808940384.jpg" alt="阿迪达斯">
</span>
</td>
</tr>
<tr>
<td><input type="checkbox" checked></td>
<td>
<div class="product-info">
<div class="product-img">
<img src="https://img.alicdn.com/imgextra/i2/1808940384/O1CN01Et9iNG1Ehv50iaAuJ_!!1808940384.jpg" alt="阿迪达斯鞋">
</div>
<div class="product-details">
<a href="#" class="product-title">adidas阿迪达斯Ultraboost Light男子跑步运动鞋</a>
<div class="product-sku">
颜色：深蓝/白<br>
尺码：42<br>
款式：2023新款
</div>
<div class="product-promo">
<img src="https://img.alicdn.com/imgextra/i4/O1CN01t1m5Rl1NwsXUJw1iM_!!6000000001619-2-tps-40-40.png" alt="优惠">
<span>满2件9折</span>
</div>
</div>
</div>
</td>
<td>
<div class="original-price">¥1399.00</div>
<div class="price">¥1099.00</div>
</td>
<td>
<div class="quantity-box">
<button class="quantity-btn">-</button>
<input type="number" class="quantity-input" value="1" min="1">
<button class="quantity-btn">+</button>
</div>
</td>
<td class="subtotal">¥1099.00</td>
<td class="actions">
<a href="#">移入收藏夹</a>
<a href="#">删除</a>
<a href="#">找相似</a>
</td>
</tr>
<!-- 店铺3 -->
<tr class="shop-row">
<td colspan="6">
<input type="checkbox" checked>
<span class="shop-name">
欧莱雅官方旗舰店
<img src="https://img.alicdn.com/imgextra/i1/2936142452/O1CN01tPvL3d1Tz3rQdG6FQ_!!2936142452.png" alt="欧莱雅">
</span>
</td>
</tr>
<tr>
<td><input type="checkbox" checked></td>
<td>
<div class="product-info">
<div class="product-img">
<img src="https://img.alicdn.com/imgextra/i3/533497499/O1CN01KmDies25GbAIB4hHW_!!533497499.jpg" alt="欧莱雅护肤品">
</div>
<div class="product-details">
<a href="#" class="product-title">【618预售】欧莱雅复颜抗皱紧致护肤套装 补水保湿抗衰老化妆品</a>
<div class="product-sku">
规格：洁面+水+乳液+眼霜<br>
赠品：精华液10ml*2
</div>
<div class="product-promo">
<img src="https://img.alicdn.com/imgextra/i3/O1CN01W7QHrL1pXE1U8W9aT_!!6000000005363-2-tps-40-40.png" alt="优惠">
<span>618预售：定金100抵200</span>
</div>
</div>
</div>
</td>
<td>
<div class="original-price">¥699.00</div>
<div class="price">¥499.00</div>
</td>
<td>
<div class="quantity-box">
<button class="quantity-btn">-</button>
<input type="number" class="quantity-input" value="1" min="1">
<button class="quantity-btn">+</button>
</div>
</td>
<td class="subtotal">¥499.00</td>
<td class="actions">
<a href="#">移入收藏夹</a>
<a href="#">删除</a>
<a href="#">找相似</a>
</td>
</tr>
</tbody>
</table>
<!-- 底部结算栏 -->
<div class="cart-footer">
<div class="footer-left">
<input type="checkbox" id="footer-select" checked>
<label for="footer-select">全选</label>
<a href="#" style="margin-left: 20px;">删除</a>
<a href="#" style="margin-left: 10px;">移入收藏夹</a>
</div>
<div class="footer-right">
<div class="total-price">
合计（不含运费）：<span>¥5897.00</span>
</div>
<button class="checkout-btn">结算(3)</button>
</div>
</div>
<!-- 推荐商品 -->
<div class="recommendation">
<h2>猜你喜欢</h2>
<div class="recommend-products">
<div class="recommend-item">
<div class="recommend-img">
<img src="https://img.alicdn.com/imgextra/i2/2206606866674/O1CN01rZfV9d1cNBGf8NfXc_!!2206606866674.jpg_430x430q90.jpg" alt="推荐商品">
</div>
<a href="#" class="recommend-title">Apple/苹果 iPhone 14 Pro Max 5G手机</a>
<div class="recommend-price">¥7899.00</div>
</div>
<div class="recommend-item">
<div class="recommend-img">
<img src="https://img.alicdn.com/imgextra/i1/2207960452482/O1CN01Ld7VxM1aHr7gGgv0R_!!2207960452482.jpg_430x430q90.jpg" alt="推荐商品">
</div>
<a href="#" class="recommend-title">Dyson戴森吹风机 Supersonic HD15</a>
<div class="recommend-price">¥2999.00</div>
</div>
<div class="recommend-item">
<div class="recommend-img">
<img src="https://img.alicdn.com/imgextra/i1/2207960452482/O1CN01Ld7VxM1aHr7gGgv0R_!!2207960452482.jpg_430x430q90.jpg" alt="推荐商品">
</div>
<a href="#" class="recommend-title">Sony索尼 WH-1000XM5 头戴式降噪耳机</a>
<div class="recommend-price">¥2899.00</div>
</div>
<div class="recommend-item">
<div class="recommend-img">
<img src="https://img.alicdn.com/imgextra/i3/2206606866674/O1CN01rZfV9d1cNBGf8NfXc_!!2206606866674.jpg_430x430q90.jpg" alt="推荐商品">
</div>
<a href="#" class="recommend-title">Nike耐克 Air Jordan 1 Mid AJ1男子篮球鞋</a>
<div class="recommend-price">¥1199.00</div>
</div>
<div class="recommend-item">
<div class="recommend-img">
<img src="https://img.alicdn.com/imgextra/i3/2207960452482/O1CN01Ld7VxM1aHr7gGgv0R_!!2207960452482.jpg_430x430q90.jpg" alt="推荐商品">
</div>
<a href="#" class="recommend-title">Kindle Paperwhite 电子书阅读器</a>
<div class="recommend-price">¥998.00</div>
</div>
</div>
</div>
</div>
<script>
// 数量加减功能
document.querySelectorAll('.quantity-btn').forEach(button => {
button.addEventListener('click', function() {
const input = this.parentElement.querySelector('.quantity-input');
let value = parseInt(input.value);
if (this.textContent === '+') {
value++;
} else if (this.textContent === '-' && value > 1) {
value--;
}
input.value = value;
updateSubtotal(this);
});
});
// 输入框变化时更新小计
document.querySelectorAll('.quantity-input').forEach(input => {
input.addEventListener('change', function() {
if (this.value < 1) this.value = 1;
updateSubtotal(this);
});
});
// 更新小计和总价
function updateSubtotal(element) {
const row = element.closest('tr');
const price = parseFloat(row.querySelector('.price').textContent.replace('¥', ''));
const quantity = parseInt(row.querySelector('.quantity-input').value);
const subtotal = row.querySelector('.subtotal');
subtotal.textContent = '¥' + (price * quantity).toFixed(2);
updateTotal();
}
// 更新总价
function updateTotal() {
let total = 0;
document.querySelectorAll('.subtotal').forEach(subtotal => {
total += parseFloat(subtotal.textContent.replace('¥', ''));
});
document.querySelector('.total-price span').textContent = '¥' + total.toFixed(2);
}
// 全选功能
document.getElementById('select-all').addEventListener('change', function() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});
// 初始化总价
updateTotal();
</script>
</body>
</html>