1.完成自己学校的官方网站，动态内容直接贴图即可，至少三个不同的页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>银川科技学院 - 官方网站</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary-color: #1e5799;
--secondary-color: #207cca;
--accent-color: #ff8c00;
--light-color: #f8f9fa;
--dark-color: #2c3e50;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
/* 头部样式 */
header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 60px;
margin-right: 15px;
}
.logo-text {
font-size: 1.8rem;
font-weight: 700;
}
.logo-text span {
color: var(--accent-color);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 10px 15px;
border-radius: 4px;
transition: all 0.3s ease;
font-weight: 500;
}
nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
nav ul li a.active {
background-color: rgba(255, 255, 255, 0.2);
}
/* 主内容区 */
main {
padding: 2rem 0;
min-height: calc(100vh - 200px);
}
.page {
display: none;
}
.page.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero {
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
url('https://images.unsplash.com/photo-1523580494863-6f3031224c94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80');
background-size: cover;
background-position: center;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
margin-bottom: 2rem;
border-radius: 8px;
}
.hero-content {
max-width: 800px;
padding: 0 20px;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.btn {
display: inline-block;
background: var(--accent-color);
color: white;
padding: 12px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn:hover {
background: #e67e00;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.section-title {
text-align: center;
margin-bottom: 2rem;
color: var(--dark-color);
position: relative;
padding-bottom: 15px;
}
.section-title:after {
content: '';
display: block;
width: 80px;
height: 3px;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
margin: 10px auto 0;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.feature-card {
background: white;
border-radius: 8px;
padding: 25px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.feature-card i {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 15px;
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.news-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.news-image {
height: 200px;
overflow: hidden;
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-card:hover .news-image img {
transform: scale(1.05);
}
.news-content {
padding: 20px;
}
.news-date {
color: #7f8c8d;
font-size: 0.9rem;
margin: 10px 0;
display: block;
}
/* 院系页面样式 */
.department-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.department-card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.department-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.department-card h3 {
color: var(--primary-color);
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid var(--accent-color);
}
/* 招生就业页面样式 */
.admission-section {
background: white;
border-radius: 8px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
margin-bottom: 30px;
}
.admission-steps {
display: flex;
justify-content: space-between;
margin-top: 30px;
flex-wrap: wrap;
}
.step {
flex: 1;
min-width: 200px;
text-align: center;
padding: 20px;
position: relative;
}
.step:not(:last-child):after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 40px;
height: 2px;
background: var(--primary-color);
transform: translateY(-50%);
}
.step-number {
width: 40px;
height: 40px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-weight: bold;
}
.career-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.stat-card {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border-radius: 8px;
padding: 20px;
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 10px;
}
/* 页脚样式 */
footer {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 2rem 0;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.footer-section h3 {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: white;
}
.contact-info {
margin-bottom: 10px;
}
.contact-info i {
margin-right: 10px;
width: 20px;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 15px;
}
.social-links a {
display: inline-block;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
text-align: center;
line-height: 40px;
color: white;
transition: all 0.3s;
}
.social-links a:hover {
background: var(--accent-color);
transform: translateY(-3px);
}
.copyright {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.7);
}
/* 响应式设计 */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
}
.logo {
margin-bottom: 1rem;
}
nav ul {
flex-wrap: wrap;
justify-content: center;
}
nav ul li {
margin: 5px;
}
.hero h1 {
font-size: 2.2rem;
}
.hero {
height: 400px;
}
.step:not(:last-child):after {
display: none;
}
.step {
margin-bottom: 20px;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<div class="logo">
<div class="logo-img">
<svg width="60" height="60" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#1e5799" />
<path d="M30,30 L70,30 L70,70 L30,70 Z" fill="white" />
<circle cx="50" cy="50" r="15" fill="#ff8c00" />
<text x="50" y="50" font-size="12" text-anchor="middle" fill="white" dy=".3em">YCIST</text>
</svg>
</div>
<div class="logo-text">银川<span>科技学院</span></div>
</div>
<nav>
<ul>
<li><a href="#" class="nav-link active" data-page="home">首页</a></li>
<li><a href="#" class="nav-link" data-page="departments">院系设置</a></li>
<li><a href="#" class="nav-link" data-page="admission">招生就业</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>
</div>
</header>
<main class="container">
<!-- 首页 -->
<div id="home" class="page active">
<div class="hero">
<div class="hero-content">
<h1>银川科技学院</h1>
<p>创新引领未来，科技改变世界</p>
<a href="#" class="btn">探索校园</a>
</div>
</div>
<h2 class="section-title">学校特色</h2>
<div class="features">
<div class="feature-card">
<i class="fas fa-flask"></i>
<h3>科研实力</h3>
<p>拥有多个国家级和省部级科研平台，科研成果丰硕</p>
</div>
<div class="feature-card">
<i class="fas fa-user-graduate"></i>
<h3>人才培养</h3>
<p>毕业生就业率连续多年保持在95%以上</p>
</div>
<div class="feature-card">
<i class="fas fa-globe-asia"></i>
<h3>国际合作</h3>
<p>与全球多所知名高校建立合作关系</p>
</div>
<div class="feature-card">
<i class="fas fa-laptop-code"></i>
<h3>创新教育</h3>
<p>注重学生创新能力和实践能力的培养</p>
</div>
</div>
<h2 class="section-title">校园新闻</h2>
<div class="news-grid">
<div class="news-card">
<div class="news-image">
<img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="毕业典礼">
</div>
<div class="news-content">
<h3>2025届毕业典礼隆重举行</h3>
<span class="news-date">2025年6月20日</span>
<p>我校2025届本科生毕业典礼在体育场隆重举行，6000余名毕业生踏上新的人生征程。</p>
</div>
</div>
<div class="news-card">
<div class="news-image">
<img src="https://images.unsplash.com/photo-1541339907198-e08756a5cf80?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="科研突破">
</div>
<div class="news-content">
<h3>材料学院科研团队取得突破性进展</h3>
<span class="news-date">2025年6月15日</span>
<p>我校材料科学与工程学院团队在顶级期刊Nature发表关于新型纳米材料的研究成果。</p>
</div>
</div>
<div class="news-card">
<div class="news-image">
<img src="https://images.unsplash.com/photo-1498243691581-b145c3f54a5a?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="国际交流">
</div>
<div class="news-content">
<h3>我校与MIT签署合作协议</h3>
<span class="news-date">2025年6月10日</span>
<p>与美国麻省理工学院(MIT)签署合作备忘录，将在人工智能、量子计算领域开展深入合作。</p>
</div>
</div>
</div>
</div>
<!-- 院系设置页面 -->
<div id="departments" class="page">
<h2 class="section-title">院系设置</h2>
<div class="department-grid">
<div class="department-card">
<h3><i class="fas fa-laptop-code"></i> 计算机与人工智能学院</h3>
<p>学院设有计算机科学与技术、软件工程、人工智能、信息安全等本科专业。拥有国家级实验教学示范中心和多个校企联合实验室。</p>
<p>师资力量：教授15人，副教授20人，博士生导师12人。</p>
</div>
<div class="department-card">
<h3><i class="fas fa-cogs"></i> 能源与动力工程学院</h3>
<p>学院设有机械工程、电气工程及其自动化、自动化、车辆工程等本科专业。拥有省级重点实验室和工程训练中心。</p>
<p>师资力量：教授18人，副教授25人，博士生导师15人。</p>
</div>
<div class="department-card">
<h3><i class="fas fa-atom"></i> 艺术学院</h3>
<p>设有数字媒体艺术、视觉传达设计、环境设计等专业。学院拥有现代化艺术工坊和数字创意实验室，注重培养学生创新思维与实践能力。</p>
<p>师资力量：教授12人，副教授18人，博士生导师10人。</p>
</div>
<div class="department-card">
<h3><i class="fas fa-chart-line"></i> 经济与管理学院</h3>
<p>学院设有工商管理、会计学、金融学、国际经济与贸易等本科专业。AACSB认证学院。</p>
<p>师资力量：教授10人，副教授15人，博士生导师8人。</p>
</div>
<div class="department-card">
<h3><i class="fas fa-dna"></i> 教育学院</h3>
<p>拥有省级示范实训中心和智能教育实验室，实施"双导师制"培养模式。学院与30余所中小学共建实践基地，注重教育理论与教学实践结合。</p>
<p>师资力量：教授8人，副教授12人，博士生导师6人。</p>
</div>
<div class="department-card">
<h3><i class="fas fa-theater-masks"></i> 人文学院</h3>
<p>学院设有汉语言文学、英语、日语、数字媒体艺术、工业设计等本科专业。设有国家级人文素质教育基地。</p>
<p>师资力量：教授6人，副教授10人，博士生导师4人。</p>
</div>
</div>
</div>
<!-- 招生就业页面 -->
<div id="admission" class="page">
<h2 class="section-title">招生信息</h2>
<div class="admission-section">
<p>银川科技学院2025年面向全国31个省、自治区、直辖市招生，计划招收本科生5000人。学校坚持以学生为中心，注重学生全面发展，培养具有创新精神和实践能力的高素质应用型人才。</p>
<div class="admission-steps">
<div class="step">
<div class="step-number">1</div>
<h3>招生计划</h3>
<p>查看招生简章，了解专业设置和招生计划</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3>网上报名</h3>
<p>登录招生网站填写报名信息</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3>参加考试</h3>
<p>参加全国统一高考或学校自主招生考试</p>
</div>
<div class="step">
<div class="step-number">4</div>
<h3>录取通知</h3>
<p>查询录取结果，接收录取通知书</p>
</div>
</div>
<div style="text-align: center; margin-top: 30px;">
<a href="#" class="btn">查看招生简章</a>
</div>
</div>
<h2 class="section-title">就业情况</h2>
<div class="career-stats">
<div class="stat-card">
<div class="stat-number">96.5%</div>
<p>毕业生就业率</p>
</div>
<div class="stat-card">
<div class="stat-number">85%</div>
<p>专业对口率</p>
</div>
<div class="stat-card">
<div class="stat-number">500+</div>
<p>合作企业</p>
</div>
<div class="stat-card">
<div class="stat-number">92%</div>
<p>雇主满意度</p>
</div>
</div>
<div class="admission-section">
<h3>就业服务</h3>
<p>学校设有就业指导中心，为学生提供全方位的就业服务：</p>
<ul style="margin: 15px 0 15px 30px;">
<li>职业规划与就业指导</li>
<li>校园招聘会与企业宣讲会</li>
<li>实习基地与校企合作项目</li>
<li>创业指导与孵化服务</li>
<li>毕业生跟踪与校友网络</li>
</ul>
<div style="text-align: center; margin-top: 20px;">
<a href="#" class="btn">查看就业信息</a>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>关于我们</h3>
<p>银川科技学院是一所以工为主，工、理、管、文、经、法、教育、艺术等多学科协调发展的教学研究型大学。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-qq"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-section">
<h3>快速链接</h3>
<ul class="footer-links">
<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>
</div>
<div class="footer-section">
<h3>联系我们</h3>
<div class="contact-info">
<p><i class="fas fa-map-marker-alt"></i> 宁夏银川市西夏区贺兰山西路489号</p>
<p><i class="fas fa-phone"></i> 0951-1234567</p>
<p><i class="fas fa-envelope"></i> admission@ycist.edu.cn</p>
<p><i class="fas fa-globe"></i> www.ycist.edu.cn</p>
</div>
</div>
</div>
<div class="copyright">
© 2025 银川科技学院 版权所有 | 宁ICP备12345678号
</div>
</div>
</footer>
<script>
// 页面导航功能
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// 更新导航链接激活状态
document.querySelectorAll('.nav-link').forEach(a => {
a.classList.remove('active');
});
this.classList.add('active');
// 隐藏所有页面
document.querySelectorAll('.page').forEach(page => {
page.classList.remove('active');
});
// 显示目标页面
const targetPageId = this.getAttribute('data-page');
document.getElementById(targetPageId).classList.add('active');
// 滚动到页面顶部
window.scrollTo(0, 0);
});
});
// 模拟登录功能（如果有登录区域）
const loginBtn = document.getElementById('loginBtn');
if(loginBtn) {
loginBtn.addEventListener('click', function() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if(!username) {
alert('请输入用户名');
return;
}
if(!password) {
alert('请输入密码');
return;
}
alert('登录成功！');
});
}
</script>
</body>
</html>
2.自己寻找一个大型的网站，完成至少三个页面，其中必须包含登录页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝商城</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
header {
background: linear-gradient(135deg, #ff4000, #ff7700);
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
font-size: 2rem;
}
.search-bar {
flex: 1;
max-width: 600px;
margin: 0 20px;
display: flex;
}
.search-bar input {
flex: 1;
padding: 12px 15px;
border: none;
border-radius: 4px 0 0 4px;
font-size: 1rem;
}
.search-bar button {
background: #ff4000;
color: white;
border: none;
padding: 0 20px;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-weight: bold;
}
.user-actions {
display: flex;
align-items: center;
}
.user-actions a {
color: white;
text-decoration: none;
margin-left: 20px;
display: flex;
align-items: center;
}
.user-actions i {
margin-right: 5px;
}
nav {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.nav-links {
display: flex;
list-style: none;
padding: 10px 0;
}
.nav-links li {
margin: 0 15px;
}
.nav-links a {
color: #666;
text-decoration: none;
font-weight: 500;
padding: 8px 0;
position: relative;
}
.nav-links a:hover {
color: #ff4000;
}
.nav-links a.active {
color: #ff4000;
}
.nav-links a.active:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #ff4000;
}
main {
padding: 1rem 0;
min-height: calc(100vh - 200px);
}
.section-title {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #333;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/* 淘宝风格样式 */
.taobao {
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
padding: 1.5rem;
margin-bottom: 2rem;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.product-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
transition: all 0.3s ease;
position: relative;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.product-image {
height: 200px;
overflow: hidden;
position: relative;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-tag {
position: absolute;
top: 10px;
left: 10px;
background-color: #ff4000;
color: white;
padding: 5px 10px;
font-size: 0.8rem;
border-radius: 4px;
}
.product-content {
padding: 15px;
}
.product-price {
color: #ff4000;
font-size: 1.3rem;
font-weight: bold;
margin: 10px 0;
}
.product-original-price {
color: #999;
text-decoration: line-through;
font-size: 0.9rem;
margin-left: 10px;
}
.product-sales {
color: #7f8c8d;
font-size: 0.9rem;
}
/* 登录页面 */
.login-container {
max-width: 400px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header h2 {
color: #ff4000;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #555;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.form-control:focus {
border-color: #ff4000;
outline: none;
box-shadow: 0 0 0 2px rgba(255, 64, 0, 0.2);
}
.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.checkbox-group input {
margin-right: 8px;
}
.btn-login {
width: 100%;
background: linear-gradient(to right, #ff4000, #ff7700);
color: white;
border: none;
padding: 12px;
font-size: 1.1rem;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}
.btn-login:hover {
background: linear-gradient(to right, #e53900, #ff6600);
box-shadow: 0 5px 15px rgba(255, 64, 0, 0.3);
}
.login-footer {
text-align: center;
margin-top: 20px;
color: #7f8c8d;
}
.login-footer a {
color: #ff4000;
text-decoration: none;
}
/* 页面切换效果 */
.page {
display: none;
}
.page.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
footer {
background: #333;
color: #ccc;
padding: 2rem 0;
margin-top: 2rem;
}
.footer-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-section {
flex: 1;
min-width: 200px;
margin-bottom: 20px;
}
.footer-section h3 {
color: white;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #555;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 8px;
}
.footer-links a {
color: #999;
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: #ff4000;
}
.copyright {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #444;
color: #777;
font-size: 0.9rem;
}
/* 商品详情页 */
.product-detail {
display: flex;
gap: 30px;
margin-top: 20px;
}
.product-gallery {
flex: 1;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.main-image {
text-align: center;
margin-bottom: 20px;
}
.main-image img {
max-width: 100%;
max-height: 400px;
}
.thumbnails {
display: flex;
gap: 10px;
justify-content: center;
}
.thumbnail {
width: 60px;
height: 60px;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-info {
flex: 1;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.product-title {
font-size: 1.8rem;
margin-bottom: 10px;
}
.product-subtitle {
color: #888;
margin-bottom: 20px;
}
.price-section {
background: #f8f8f8;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.current-price {
font-size: 2rem;
color: #ff4000;
font-weight: bold;
}
.original-price {
color: #999;
text-decoration: line-through;
margin-left: 10px;
font-size: 1.2rem;
}
.promotion {
color: #ff4000;
margin: 10px 0;
}
.sales {
color: #7f8c8d;
font-size: 0.9rem;
}
.option-section {
margin: 20px 0;
padding: 15px;
background: #f8f8f8;
border-radius: 8px;
}
.option-title {
font-weight: bold;
margin-bottom: 10px;
}
.option-buttons {
display: flex;
gap: 10px;
margin-top: 10px;
}
.option-btn {
padding: 8px 15px;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.option-btn.active {
border-color: #ff4000;
color: #ff4000;
}
.action-buttons {
display: flex;
gap: 15px;
margin-top: 30px;
}
.cart-btn, .buy-btn {
flex: 1;
padding: 15px;
border: none;
border-radius: 4px;
font-weight: bold;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s;
}
.cart-btn {
background: linear-gradient(to bottom, #ffefc1, #ffda32);
}
.cart-btn:hover {
background: linear-gradient(to bottom, #ffe8a8, #ffd01a);
}
.buy-btn {
background: linear-gradient(to bottom, #ff4f02, #ff2a00);
color: white;
}
.buy-btn:hover {
background: linear-gradient(to bottom, #e94600, #e02500);
}
/* 响应式设计 */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 15px;
}
.search-bar {
margin: 10px 0;
max-width: 100%;
}
.user-actions {
width: 100%;
justify-content: center;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
}
.nav-links li {
margin: 5px 10px;
}
.product-detail {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<div class="logo">
<i class="fab fa-alipay"></i>
<span>淘宝商城</span>
</div>
<div class="search-bar">
<input type="text" placeholder="搜索商品、店铺...">
<button><i class="fas fa-search"></i></button>
</div>
<div class="user-actions">
<a href="#taobao-home"><i class="fas fa-home"></i> 首页</a>
<a href="#taobao-login"><i class="fas fa-user"></i> 登录</a>
<a href="#"><i class="fas fa-shopping-cart"></i> 购物车</a>
</div>
</div>
</div>
<nav>
<div class="container">
<ul class="nav-links">
<li><a href="#taobao-home" class="active">首页</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>
</div>
</nav>
</header>
<main class="container">
<!-- 淘宝首页 -->
<div id="taobao-home" class="page active">
<div class="taobao">
<h2 class="section-title">热门推荐</h2>
<div class="product-grid">
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="智能手机">
<span class="product-tag">新品</span>
</div>
<div class="product-content">
<h3>旗舰智能手机</h3>
<p>2025新款 5G手机 8+256GB</p>
<div class="product-price">¥3599 <span class="product-original-price">¥4299</span></div>
<div class="product-sales">月销2.8万+</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="智能手表">
<span class="product-tag">热门</span>
</div>
<div class="product-content">
<h3>智能运动手表</h3>
<p>GPS定位 心率监测 50米防水</p>
<div class="product-price">¥799 <span class="product-original-price">¥1299</span></div>
<div class="product-sales">月销5.3万+</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://ts3.tc.mm.bing.net/th/id/OIP-C.SPkka_x_XheYgge3p4JUfwHaHa?cb=thfc1&rs=1&pid=ImgDetMain&o=7&rm=3" alt="运动鞋">
<span class="product-tag">爆款</span>
</div>
<div class="product-content">
<h3>新款运动跑鞋</h3>
<p>透气轻便 减震回弹 多色可选</p>
<div class="product-price">¥399 <span class="product-original-price">¥599</span></div>
<div class="product-sales">月销9.2万+</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="相机">
<span class="product-tag">热卖</span>
</div>
<div class="product-content">
<h3>微单数码相机</h3>
<p>4K视频拍摄 高速连拍 超强防抖</p>
<div class="product-price">¥6499 <span class="product-original_price">¥7999</span></div>
<div class="product-sales">月销1.5万+</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://ts1.tc.mm.bing.net/th/id/R-C.da25c2378b872055fa6626e0eb36a059?rik=Uc9Ajq6lcgZNKw&riu=http%3a%2f%2fexp-picture.cdn.bcebos.com%2f94af5fc1b727ac53458c2b9b2ecadce89048995f.jpg%3fx-bce-process%3dimage%252Fcrop%252Cx_0%252Cy_0%252Cw_1920%252Ch_1280%252Fformat%252Cf_auto%252Fquality%252Cq_80&ehk=B%2fXoBYTTx2ihPDirBWJY4cACwO%2fcQx%2ff%2fhLIHvSIJNQ%3d&risl=&pid=ImgRaw&r=0" alt="耳机">
<span class="product-tag">新品</span>
</div>
<div class="product-content">
<h3>无线降噪耳机</h3>
<p>主动降噪 30小时续航 蓝牙5.2</p>
<div class="product-price">¥899 <span class="product-original-price">¥1299</span></div>
<div class="product-sales">月销3.2万+</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="外套">
<span class="product-tag">热卖</span>
</div>
<div class="product-content">
<h3>男士冬季加厚外套</h3>
<p>防风保暖 加厚棉服 多色可选</p>
<div class="product-price">¥299 <span class="product-original-price">¥499</span></div>
<div class="product-sales">月销7.8万+</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1591561954557-26941169b49e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="护肤品">
<span class="product-tag">新品</span>
</div>
<div class="product-content">
<h3>护肤精华套装</h3>
<p>补水保湿 提亮肤色 紧致肌肤</p>
<div class="product-price">¥499 <span class="product-original-price">¥799</span></div>
<div class="product-sales">月销4.5万+</div>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="咖啡机">
<span class="product-tag">热卖</span>
</div>
<div class="product-content">
<h3>全自动咖啡机</h3>
<p>一键制作 自动清洗 多口味选择</p>
<div class="product-price">¥1299 <span class="product-original-price">¥1999</span></div>
<div class="product-sales">月销1.2万+</div>
</div>
</div>
</div>
</div>
</div>
<!-- 登录页面 -->
<div id="taobao-login" class="page">
<div class="taobao">
<div class="login-container">
<div class="login-header">
<i class="fab fa-taobao" style="font-size: 3rem; color: #ff4000;"></i>
<h2>会员登录</h2>
</div>
<div class="form-group">
<label for="username">用户名/手机号</label>
<input type="text" id="username" class="form-control" placeholder="请输入用户名或手机号">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" class="form-control" placeholder="请输入登录密码">
</div>
<div class="checkbox-group">
<input type="checkbox" id="remember">
<label for="remember">记住用户名</label>
</div>
<button class="btn-login">登录</button>
<div class="login-footer">
<p><a href="#">忘记密码?</a> | <a href="#">免费注册</a></p>
<p>其他方式登录:
<a href="#"><i class="fab fa-weixin" style="color: #09bb07;"></i></a>
<a href="#"><i class="fab fa-qq" style="color: #12b7f5;"></i></a>
<a href="#"><i class="fab fa-weibo" style="color: #e6162d;"></i></a>
</p>
</div>
</div>
</div>
</div>
<!-- 商品详情页 -->
<div id="taobao-product" class="page">
<div class="taobao">
<div class="product-detail">
<div class="product-gallery">
<div class="main-image">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="旗舰智能手机">
</div>
<div class="thumbnails">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="手机正面">
</div>
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1595941069915-4ebc5197c14a?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="手机背面">
</div>
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1583394837771-8b9e362453f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="手机侧面">
</div>
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1598327105666-5b89351aff97?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="手机配件">
</div>
</div>
</div>
<div class="product-info">
<h1 class="product-title">旗舰智能手机 2025款</h1>
<p class="product-subtitle">新品上市 | 5G全网通 | 双卡双待 | 超长续航</p>
<div class="price-section">
<div class="current-price">¥3599 <span class="original-price">¥4299</span></div>
<div class="promotion">优惠活动: 满3000减200 | 24期免息</div>
<div class="sales">月销2.8万+ | 累计评价1.2万+</div>
</div>
<div class="option-section">
<div class="option-title">选择颜色</div>
<div class="option-buttons">
<div class="option-btn">星夜黑</div>
<div class="option-btn">冰晶蓝</div>
<div class="option-btn active">香槟金</div>
<div class="option-btn">玫瑰粉</div>
</div>
</div>
<div class="option-section">
<div class="option-title">选择版本</div>
<div class="option-buttons">
<div class="option-btn">8GB+128GB</div>
<div class="option-btn active">8GB+256GB</div>
<div class="option-btn">12GB+256GB</div>
<div class="option-btn">12GB+512GB</div>
</div>
</div>
<div class="action-buttons">
<button class="cart-btn">加入购物车</button>
<button class="buy-btn">立即购买</button>
</div>
</div>
</div>
<div class="product-description" style="background: white; padding: 20px; border-radius: 8px; margin-top: 30px;">
<h2 class="section-title">商品详情</h2>
<p style="margin: 15px 0;">最新旗舰智能手机，搭载顶级处理器，性能强劲，运行流畅。全新6.8英寸AMOLED曲面屏，分辨率3200×1440，支持120Hz高刷新率。内置5000mAh大容量电池，支持100W超级快充和50W无线快充。</p>
<p style="margin: 15px 0;">影像系统全面升级，1亿像素主摄+4800万超广角+1200万长焦+800万微距，支持8K视频录制。前置3200万自拍摄像头。全新一代屏下指纹识别，支持NFC、立体声双扬声器、IP68级防尘防水。</p>
<div style="text-align: center; margin: 30px 0;">
<img src="https://images.unsplash.com/photo-1603015269169-225cb700e29a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="手机详情" style="max-width: 100%;">
</div>
<div style="text-align: center; margin: 30px 0;">
<img src="https://images.unsplash.com/photo-1598327105854-c8674fadd0f8?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="手机性能" style="max-width: 100%;">
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>购物指南</h3>
<ul class="footer-links">
<li><a href="#">购物流程</a></li>
<li><a href="#">会员介绍</a></li>
<li><a href="#">积分制度</a></li>
<li><a href="#">优惠券使用</a></li>
</ul>
</div>
<div class="footer-section">
<h3>配送方式</h3>
<ul class="footer-links">
<li><a href="#">上门自提</a></li>
<li><a href="#">211限时达</a></li>
<li><a href="#">配送服务查询</a></li>
<li><a href="#">配送费收取标准</a></li>
</ul>
</div>
<div class="footer-section">
<h3>支付方式</h3>
<ul class="footer-links">
<li><a href="#">货到付款</a></li>
<li><a href="#">在线支付</a></li>
<li><a href="#">分期付款</a></li>
<li><a href="#">公司转账</a></li>
</ul>
</div>
<div class="footer-section">
<h3>售后服务</h3>
<ul class="footer-links">
<li><a href="#">售后政策</a></li>
<li><a href="#">价格保护</a></li>
<li><a href="#">退款说明</a></li>
<li><a href="#">返修/退换货</a></li>
</ul>
</div>
</div>
<div class="copyright">
© 2025 淘宝商城. 本网站仅用于网页设计展示，非淘宝官方网站。
</div>
</div>
</footer>
<script>
// 页面导航功能
document.querySelectorAll('.user-actions a, .nav-links a').forEach(link => {
link.addEventListener('click', function(e) {
if (this.getAttribute('href').startsWith('#')) {
e.preventDefault();
// 更新导航链接激活状态
document.querySelectorAll('.nav-links a').forEach(a => {
a.classList.remove('active');
});
// 隐藏所有页面
document.querySelectorAll('.page').forEach(page => {
page.classList.remove('active');
});
// 显示目标页面
const targetPageId = this.getAttribute('href');
document.querySelector(targetPageId).classList.add('active');
// 滚动到页面顶部
window.scrollTo(0, 0);
}
});
});
// 登录功能
document.querySelector('.btn-login').addEventListener('click', function() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if(!username) {
alert('请输入用户名或手机号');
return;
}
if(!password) {
alert('请输入密码');
return;
}
// 简单模拟登录
alert(`登录成功！\n欢迎回来，${username}`);
});
// 商品选项选择
document.querySelectorAll('.option-btn').forEach(btn => {
btn.addEventListener('click', function() {
this.parentElement.querySelectorAll('.option-btn').forEach(b => {
b.classList.remove('active');
});
this.classList.add('active');
});
});
// 缩略图切换
document.querySelectorAll('.thumbnail').forEach(thumb => {
thumb.addEventListener('click', function() {
const mainImg = this.querySelector('img').src.replace('200', '800');
document.querySelector('.main-image img').src = mainImg;
});
});
</script>
</body>
</html>
