实验代码：
<!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: "Microsoft Yahei", sans-serif;
}
.top-header {
background-color: #0a2463;
padding: 12px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-title {
display: flex;
align-items: center;
gap: 12px;
}
.logo {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #0a2463;
font-weight: bold;
font-size: 20px;
}
.title-group h1 {
color: #fff;
font-size: 20px;
font-weight: 600;
}
.title-group p {
color: #d0d0d0;
font-size: 12px;
}
.search-box {
display: flex;
align-items: center;
gap: 4px;
}
.search-input {
height: 32px;
padding: 0 8px;
border: none;
border-radius: 4px;
outline: none;
}
.search-btn {
height: 32px;
width: 32px;
background-color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.nav-menu {
background-color: #0f3486;
}
.nav-menu ul {
list-style: none;
display: flex;
justify-content: space-around;
}
.nav-menu li a {
display: block;
color: #fff;
text-decoration: none;
padding: 12px 20px;
font-size: 14px;
}
.nav-menu li a:hover {
background-color: #1a4ba0;
}
.banner-container {
position: relative;
height: 300px;
overflow: hidden;
}
.banner-item {
background-color: #d62828;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 400"><path fill="rgba(255,255,255,0.1)" d="M0,0L1920,120L1920,400L0,400Z"/></svg>');
background-size: cover;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
.banner-item.active {
opacity: 1;
z-index: 1;
}
.banner-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.15);
}
.banner-item h2 {
font-size: 42px;
margin-bottom: 30px;
z-index: 1;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.banner-item p {
font-size: 32px;
z-index: 1;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.banner-dots {
position: absolute;
bottom: 20px;
z-index: 2;
display: flex;
gap: 8px;
left: 50%;
transform: translateX(-50%);
}
.banner-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
cursor: pointer;
transition: background-color 0.3s ease;
}
.banner-dot.active {
background-color: #fff;
}
</style>
</head>
<body>
<header class="top-header">
<div class="logo-title">
<div class="logo">X</div>
<div class="title-group">
<h1>XX理工学院质量管理与评估中心</h1>
<p>Quality Management and Evaluation Center, XX College of Technology</p>
</div>
</div>
<div class="search-box">
<input type="text" class="search-input" placeholder="搜索...">
<button class="search-btn">🔍</button>
</div>
</header><nav class="nav-menu">
<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><section class="banner-container">
<div class="banner-item active">
<h2>高举中国特色社会主义伟大旗帜</h2>
<p>为全面建设社会主义现代化国家而团结奋斗</p>
</div>
<div class="banner-item">
<h2>深化教育教学改革</h2>
<p>全面提升人才培养质量</p>
</div>
<div class="banner-item">
<h2>XX理工学院欢迎您</h2>
<p>厚德博学 格物致知</p>
</div>
<div class="banner-dots">
<span class="banner-dot active"></span>
<span class="banner-dot"></span>
<span class="banner-dot"></span>
</div>
</section><script>
const bannerItems = document.querySelectorAll('.banner-item');
const bannerDots = document.querySelectorAll('.banner-dot');
const bannerContainer = document.querySelector('.banner-container');
let currentIndex = 0;
let timer = null;function switchBanner(index) {
bannerItems.forEach(item => item.classList.remove('active'));
bannerDots.forEach(dot => dot.classList.remove('active'));
bannerItems[index].classList.add('active');
bannerDots[index].classList.add('active');
currentIndex = index;
}function autoPlay() {
timer = setInterval(() => {
let nextIndex = (currentIndex + 1) % bannerItems.length;
switchBanner(nextIndex);
}, 5000);
}bannerDots.forEach((dot, index) => {
dot.addEventListener('click', () => {
clearInterval(timer);
switchBanner(index);
autoPlay();
});
});bannerContainer.addEventListener('mouseenter', () => {
clearInterval(timer);
});
bannerContainer.addEventListener('mouseleave', () => {
autoPlay();
});autoPlay();
</script>
</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: "Microsoft Yahei", sans-serif; } .top-header { background-color: #0a2463; padding: 12px 40px; display: flex; align-items: center; justify-content: space-between; } .logo-title { display: flex; align-items: center; gap: 12px; } .logo { width: 48px; height: 48px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; color: #0a2463; font-weight: bold; font-size: 20px; } .title-group h1 { color: #fff; font-size: 20px; font-weight: 600; } .title-group p { color: #d0d0d0; font-size: 12px; } .search-box { display: flex; align-items: center; gap: 4px; } .search-input { height: 32px; padding: 0 8px; border: none; border-radius: 4px; outline: none; } .search-btn { height: 32px; width: 32px; background-color: #fff; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .nav-menu { background-color: #0f3486; } .nav-menu ul { list-style: none; display: flex; justify-content: space-around; } .nav-menu li a { display: block; color: #fff; text-decoration: none; padding: 12px 20px; font-size: 14px; } .nav-menu li a:hover { background-color: #1a4ba0; } .banner-container { position: relative; height: 300px; overflow: hidden; } .banner-item { background-color: #d62828; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 400"><path fill="rgba(255,255,255,0.1)" d="M0,0L1920,120L1920,400L0,400Z"/></svg>'); background-size: cover; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.5s ease; } .banner-item.active { opacity: 1; z-index: 1; } .banner-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.15); } .banner-item h2 { font-size: 42px; margin-bottom: 30px; z-index: 1; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .banner-item p { font-size: 32px; z-index: 1; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .banner-dots { position: absolute; bottom: 20px; z-index: 2; display: flex; gap: 8px; left: 50%; transform: translateX(-50%); } .banner-dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255,255,255,0.5); cursor: pointer; transition: background-color 0.3s ease; } .banner-dot.active { background-color: #fff; } </style> </head> <body> <header class="top-header"> <div class="logo-title"> <div class="logo">X</div> <div class="title-group"> <h1>XX理工学院质量管理与评估中心</h1> <p>Quality Management and Evaluation Center, XX College of Technology</p> </div> </div> <div class="search-box"> <input type="text" class="search-input" placeholder="搜索..."> <button class="search-btn">🔍</button> </div> </header> <nav class="nav-menu"> <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> <section class="banner-container"> <div class="banner-item active"> <h2>高举中国特色社会主义伟大旗帜</h2> <p>为全面建设社会主义现代化国家而团结奋斗</p> </div> <div class="banner-item"> <h2>深化教育教学改革</h2> <p>全面提升人才培养质量</p> </div> <div class="banner-item"> <h2>XX理工学院欢迎您</h2> <p>厚德博学 格物致知</p> </div> <div class="banner-dots"> <span class="banner-dot active"></span> <span class="banner-dot"></span> <span class="banner-dot"></span> </div> </section> <script> const bannerItems = document.querySelectorAll('.banner-item'); const bannerDots = document.querySelectorAll('.banner-dot'); const bannerContainer = document.querySelector('.banner-container'); let currentIndex = 0; let timer = null; function switchBanner(index) { bannerItems.forEach(item => item.classList.remove('active')); bannerDots.forEach(dot => dot.classList.remove('active')); bannerItems[index].classList.add('active'); bannerDots[index].classList.add('active'); currentIndex = index; } function autoPlay() { timer = setInterval(() => { let nextIndex = (currentIndex + 1) % bannerItems.length; switchBanner(nextIndex); }, 5000); } bannerDots.forEach((dot, index) => { dot.addEventListener('click', () => { clearInterval(timer); switchBanner(index); autoPlay(); }); }); bannerContainer.addEventListener('mouseenter', () => { clearInterval(timer); }); bannerContainer.addEventListener('mouseleave', () => { autoPlay(); }); autoPlay(); </script> </body> </html>代码运行结果：
注：
本次代码仿写仅实现某网站导航页的部分功能，例如轮播以及搜索栏、导航栏；但未实现图片插入和内嵌抽屉功能。
)
