版式页面
包含了所有CSS、字体、图标、还有我的页面代码
<!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">
<!--字体-->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
<!--页面的CSS-->
<link rel="stylesheet" href="../css/css-pages.css">
<!--bann栏的CSS-->
<link rel="stylesheet" href="../css/css-banna.css">
<!--我的CSS,一定要放在最下面，样式会重叠-->
<link rel="stylesheet" href="../css/main-dhb.css">
<style>
<!--样式写这里-->
</style>
</head>
<body>
<!-- 顶部通知栏 -->
<div class="top-bar">
<div class="container top-bar-content">
<div>你好！今天也要努力学习！</div>
<div>党建服务热线：12345 | 咨询服务电话：010-12345</div>
</div>
</div>
<!-- 头部区域 -->
<header>
<div class="container">
<div class="header-content">
<a href="../index.html" class="logo">
<div class="party-emblem">
<i class="fas fa-star"></i>
</div>
<div class="logo-text">
<h1>党建先锋</h1>
<p>基层党组织建设平台</p>
</div>
</a>
<div class="login-area">
<a href="pages/login.html">
<button class="login-btn"><i class="fas fa-user"></i> 党员登录</button>
</a>
</div>
</div>
</div>
<!-- 导航栏 -->
<nav>
<div class="container nav-container">
<button class="mobile-nav-toggle" id="mobile-nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="main-nav" id="main-nav">
<li><a href="../index.html">首页</a></li>
<li><a href="1-dangjiandongtai.html">党建动态</a></li>
<li><a href="2-dangshixuexi.html">党史学习</a></li>
<li><a href="3-dangyuanjiaoyu.html">党员教育</a></li>
<li><a href="4-dangwugongkai.html">党务公开</a></li>
<li><a href="5-zhengcewenjian.html">政策文件</a></li>
<li><a href="6-dangyuanfengcai.html">党员风采</a></li>
<li><a href="7-zuzhishenghuo.html">组织生活</a></li>
</ul>
</div>
</nav>
</header>
<!--内容放在这里的-->
<!-- 页脚 -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>快速链接</h3>
<ul class="footer-links">
<li><a href="https://www.12371.cn/"><i class="fas fa-angle-right"></i> 共产党员网</a></li>
<li><a href="https://www.xuexi.cn/"><i class="fas fa-angle-right"></i> 学习强国</a></li>
<li><a href="https://www.12371.cn/dsxx/"><i class="fas fa-angle-right"></i> 党史学习教育</a></li>
<li><a href="https://www.dangjianwang.com"><i class="fas fa-angle-right"></i> 全国党建云平台</a></li>
<li><a href="https://www.cela.gov.cn/home/"><i class="fas fa-angle-right"></i> 干部网络学院</a></li>
</ul>
</div>
<div class="footer-column">
<h3>政策文件</h3>
<ul class="footer-links">
<li><a href="https://www.mofcom.gov.cn/ddesdjsxxpt/zyjs/index.html"><i class="fas fa-angle-right"></i> 中央精神</a></li>
<li><a href="https://www.12371.cn/special/dnfg/"><i class="fas fa-angle-right"></i> 党内法规</a></li>
<li><a href="https://www.dswxyjy.org.cn/GB/427196/423772/428232/index.html"><i class="fas fa-angle-right"></i> 重要文献</a></li>
<li><a href="https://www.12371.cn/special/xxzd/jh/"><i class="fas fa-angle-right"></i> 重要讲话</a></li>
<li><a href="https://news.12371.cn/dzybmbdj/zzb/zcjd/"><i class="fas fa-angle-right"></i> 政策解读</a></li>
</ul>
</div>
<div class="footer-column">
<h3>党员服务</h3>
<ul class="footer-links">
<li><a href="../pages/404.html"><i class="fas fa-angle-right"></i> 党员组织关系转接</a></li>
<li><a href="../pages/404.html"><i class="fas fa-angle-right"></i> 党费缴纳</a></li>
<li><a href="../pages/404.html"><i class="fas fa-angle-right"></i> 流动党员管理</a></li>
<li><a href="../pages/404.html"><i class="fas fa-angle-right"></i> 党员发展流程</a></li>
<li><a href="../pages/404.html"><i class="fas fa-angle-right"></i> 党员咨询服务</a></li>
</ul>
</div>
<div class="footer-column">
<h3>联系我们</h3>
<div class="contact-info">
<p><i class="fas fa-map-marker-alt"></i> 地址：北京市西城区西长安街80号</p>
<p><i class="fas fa-phone"></i> 电话：010-12345</p>
<p><i class="fas fa-envelope"></i> 邮箱：1690747667@qq.com</p>
<p><i class="fas fa-globe"></i> 网址：www.12345.com</p>
</div>
</div>
</div>
<div class="copyright">
<p>版权所有 © 2025 党建先锋平台 | 京ICP备12345678号-1 | 党建信息服务平台</p>
<p>本网站建议使用Chrome、Firefox、Edge等现代浏览器访问</p>
</div>
</div>
</footer>
<script>
// 移动端导航菜单切换
document.addEventListener('DOMContentLoaded', function() {
const mobileNavToggle = document.getElementById('mobile-nav-toggle');
const mainNav = document.getElementById('main-nav');
mobileNavToggle.addEventListener('click', function() {
mainNav.classList.toggle('active');
if (mainNav.classList.contains('active')) {
mobileNavToggle.innerHTML = '<i class="fas fa-times"></i>';
} else {
mobileNavToggle.innerHTML = '<i class="fas fa-bars"></i>';
}
});
// 导航菜单项点击关闭菜单
const navLinks = mainNav.querySelectorAll('a');
navLinks.forEach(link => {
link.addEventListener('click', function() {
mainNav.classList.remove('active');
mobileNavToggle.innerHTML = '<i class="fas fa-bars"></i>';
});
});
// 导航菜单悬停效果
const navItems = document.querySelectorAll('.main-nav li');
navItems.forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
});
item.addEventListener('mouseleave', function() {
if (!this.querySelector('a').classList.contains('active')) {
this.style.backgroundColor = '';
}
});
});
// 资源卡片效果
const resourceCards = document.querySelectorAll('.resource-card');
resourceCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.2)';
});
card.addEventListener('mouseleave', function() {
this.style.boxShadow = '';
});
});
// 活动卡片点击效果
const activityCards = document.querySelectorAll('.activity-card');
activityCards.forEach(card => {
card.addEventListener('click', function(e) {
if (e.target.tagName !== 'A') {
this.querySelector('.activity-link').click();
}
});
});
});
</script>
</body>
</html>