This commit is contained in:
2026-09-02 10:19:05 +08:00
parent e969a1e559
commit b48044bdb3
6 changed files with 1759 additions and 738 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 871 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1019 KiB

+866
View File
@@ -0,0 +1,866 @@
<!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;
}
body {
width: 1600px;
margin: 0 auto;
background: #FFFFFF;
font-family: "Microsoft YaHei", Arial, sans-serif;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
display: block;
border: 0;
}
.wrap {
width: 1600px;
margin: 0 auto;
}
/* ========== 板块1:顶部工具栏 ========== */
.topbar {
width: 100%;
height: 32px;
background: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
font-size: 12px;
color: #555;
}
.topbar .wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.topbar .welcome {
color: #333;
display: flex;
align-items: center;
margin-left: 203px;
}
.topbar .welcome img {
width: 16px;
height: 16px;
margin-right: 6px;
}
.topbar .searchbox {
display: flex;
}
.topbar .searchbox input {
height: 22px;
width: 220px;
padding: 0 8px;
border: 1px solid #ccc;
font-size: 12px;
outline: none;
}
.topbar .searchbox button {
height: 22px;
padding: 0 14px;
border: 1px solid #ccc;
border-left: 0;
background: #fff;
cursor: pointer;
font-size: 12px;
}
.topbar .toplinks a {
color: #555;
margin: 0 4px;
}
.topbar .toplinks a:hover {
color: #c00;
}
/* ========== 板块2:导航栏 53px ========== */
.navbar {
width: 100%;
height: 53px;
background: #1a4a8a;
}
.navbar .wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar ul {
display: flex;
height: 100%;
}
.navbar ul li {
height: 100%;
}
.navbar ul li a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 32px;
color: #fff;
font-size: 16px;
font-weight: bold;
}
.navbar ul li a:hover,
.navbar ul li a.active {
background: #0d3266;
}
/* ========== 板块3:网站头部切图 ========== */
.header-banner {
width: 100%;
}
.header-banner img {
width: 100%;
}
/* ========== 通用板块容器 ========== */
.section {
width: 100%;
padding: 30px 0;
}
.section .wrap {
display: flex;
gap: 20px;
}
/* ========== 板块标题 ========== */
.sec-title {
text-align: center;
margin-bottom: 20px;
}
.sec-title h2 {
display: inline-block;
font-size: 22px;
color: #1a4a8a;
border-bottom: 2px solid #1a4a8a;
padding: 0 20px 8px;
font-weight: bold;
}
.sec-title-en {
font-size: 12px;
color: #999;
margin-top: 4px;
letter-spacing: 1px;
}
/* ========== 板块4:新闻资讯(3列) ========== */
.news-section {
background: #fff;
}
.news-col {
flex: 1;
background: #f9f9f9;
border: 1px solid #e8e8e8;
padding: 15px;
}
.news-col h3 {
font-size: 16px;
color: #1a4a8a;
border-bottom: 1px solid #1a4a8a;
padding-bottom: 8px;
margin-bottom: 12px;
}
.news-pic img {
width: 100%;
height: 180px;
background: #ddd;
object-fit: cover;
}
.news-pic h4 {
font-size: 15px;
color: #333;
margin: 10px 0 6px;
line-height: 1.5;
}
.news-pic p {
font-size: 12px;
color: #888;
line-height: 1.6;
}
.news-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed #eee;
font-size: 13px;
}
.news-list li a {
color: #333;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 10px;
position: relative;
}
.news-list li a::before {
content: "·";
position: absolute;
left: 0;
color: #1a4a8a;
font-weight: bold;
}
.news-list li .date {
color: #999;
font-size: 12px;
}
.news-list li a:hover {
color: #c00;
}
.news-rank li {
display: flex;
align-items: center;
padding: 7px 0;
border-bottom: 1px dashed #eee;
font-size: 13px;
}
.news-rank .rank-num {
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
background: #ccc;
color: #fff;
font-size: 12px;
margin-right: 8px;
}
.news-rank li:nth-child(-n+3) .rank-num {
background: #c00;
}
.news-rank li a {
color: #333;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news-rank li a:hover {
color: #c00;
}
/* ========== 蓝色波浪分隔条 ========== */
.divider-wave {
width: 100%;
height: 60px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 60' preserveAspectRatio='none'><path d='M0,30 Q200,0 400,30 T800,30 T1200,30 T1600,30 L1600,60 L0,60 Z' fill='%231a4a8a' opacity='0.15'/><path d='M0,40 Q200,20 400,40 T800,40 T1200,40 T1600,40' stroke='%231a4a8a' stroke-width='2' fill='none'/></svg>") center/100% 100% no-repeat;
}
.divider-wave-2 {
width: 100%;
height: 50px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 50' preserveAspectRatio='none'><path d='M0,25 C200,5 400,45 800,25 C1200,5 1400,45 1600,25 L1600,50 L0,50 Z' fill='%231a4a8a' opacity='0.1'/></svg>") center/100% 100% no-repeat;
}
/* ========== 红色丝带分隔条 ========== */
.divider-ribbon {
width: 100%;
height: 50px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 50' preserveAspectRatio='none'><path d='M0,15 L1600,15 L1600,35 L800,45 L0,35 Z' fill='%23c00' opacity='0.85'/><path d='M0,15 L1600,15' stroke='%23ff6b6b' stroke-width='1'/></svg>") center/100% 100% no-repeat;
}
/* ========== 板块5:中心内容(标题+文章列表) ========== */
.article-section {
background: #fff;
}
.article-section .wrap {
display: block;
}
.article-list {
margin-top: 20px;
}
.article-list li {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px dashed #e5e5e5;
font-size: 14px;
}
.article-list li .tag {
display: inline-block;
padding: 2px 8px;
background: #1a4a8a;
color: #fff;
font-size: 12px;
margin-right: 12px;
border-radius: 2px;
}
.article-list li a {
flex: 1;
color: #333;
}
.article-list li a:hover {
color: #c00;
}
.article-list li .date {
color: #999;
font-size: 12px;
}
/* ========== 板块63卡片网格 ========== */
.card-grid-3 {
display: flex;
gap: 20px;
}
.card {
flex: 1;
background: #f9f9f9;
border: 1px solid #e8e8e8;
overflow: hidden;
}
.card img {
width: 100%;
height: 200px;
background: #ddd;
object-fit: cover;
}
.card-body {
padding: 15px;
}
.card-body h4 {
font-size: 16px;
color: #1a4a8a;
margin-bottom: 8px;
text-align: center;
}
.card-body p {
font-size: 13px;
color: #666;
line-height: 1.6;
}
/* ========== 板块7:双列+侧边栏 ========== */
.layout-sidebar {
display: flex;
gap: 20px;
}
.sidebar {
width: 260px;
background: #f9f9f9;
border: 1px solid #e8e8e8;
}
.sidebar h3 {
background: #1a4a8a;
color: #fff;
padding: 12px 15px;
font-size: 16px;
}
.sidebar ul li a {
display: block;
padding: 10px 15px;
border-bottom: 1px solid #eee;
color: #333;
font-size: 14px;
}
.sidebar ul li a:hover {
background: #e8eef7;
color: #1a4a8a;
}
.main-content {
flex: 1;
background: #f9f9f9;
border: 1px solid #e8e8e8;
padding: 20px;
}
.main-content h3 {
font-size: 18px;
color: #1a4a8a;
border-bottom: 2px solid #1a4a8a;
padding-bottom: 8px;
margin-bottom: 15px;
}
/* ========== 板块84卡片网格(2x2 ========== */
.card-grid-4 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* ========== 板块9:双列内容 ========== */
.two-col {
display: flex;
gap: 20px;
}
.two-col-block {
flex: 1;
background: #f9f9f9;
border: 1px solid #e8e8e8;
padding: 20px;
}
.two-col-block h3 {
font-size: 18px;
color: #1a4a8a;
border-bottom: 2px solid #1a4a8a;
padding-bottom: 8px;
margin-bottom: 15px;
}
/* ========== 板块102x2图片网格 ========== */
.img-grid-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.img-grid-2x2 .img-item {
position: relative;
}
.img-grid-2x2 img {
width: 100%;
height: 240px;
background: #ddd;
object-fit: cover;
}
.img-grid-2x2 .img-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 8px 12px;
font-size: 14px;
}
/* ========== 板块:Footer ========== */
.footer {
width: 100%;
background: #1a4a8a;
color: #fff;
padding: 30px 0;
margin-top: 20px;
}
.footer .wrap {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.footer-left h4 {
font-size: 18px;
margin-bottom: 10px;
}
.footer-left p {
font-size: 13px;
line-height: 1.8;
color: #c8d4e8;
}
.footer-right {
text-align: right;
font-size: 12px;
color: #c8d4e8;
line-height: 1.8;
}
</style>
</head>
<body>
<!-- 板块1:顶部工具栏 -->
<div class="topbar">
<div class="wrap">
<span class="welcome">
<img src="assest/房子 1@2x.png" alt="">
东部战区海军强军网集群
</span>
<form class="searchbox" onsubmit="return false;">
<input type="text" placeholder="请输入关键字">
<button type="submit">搜索</button>
</form>
<div class="toplinks">
<a href="javascript:;">陈章溦 已登录</a> |
<a href="javascript:;">退出</a> |
<a href="javascript:;">注册</a> |
<a href="javascript:;">网盘</a>
</div>
</div>
</div>
<!-- 板块2:导航栏 53px -->
<nav class="navbar">
<div class="wrap">
<ul>
<li><a href="javascript:;" class="active">首页</a></li>
<li><a href="javascript:;">战区要闻</a></li>
<li><a href="javascript:;">部队动态</a></li>
<li><a href="javascript:;">军事资讯</a></li>
<li><a href="javascript:;">政策法规</a></li>
<li><a href="javascript:;">强军文化</a></li>
<li><a href="javascript:;">服务保障</a></li>
<li><a href="javascript:;">在线留言</a></li>
</ul>
</div>
</nav>
<!-- 板块3:网站头部切图 -->
<div class="header-banner">
<img src="assest/网站头部切图.png" alt="网站头部切图">
</div>
<!-- 板块4:新闻资讯(3列) -->
<section class="section news-section">
<div class="wrap">
<!-- 左:图片新闻 -->
<div class="news-col">
<h3>图片新闻</h3>
<div class="news-pic">
<img src="" alt="">
<h4>海军某部开展实战化训练 锤炼制胜本领</h4>
<p>近日,海军某部组织开展了实战化训练,全面锤炼部队打赢能力...</p>
</div>
</div>
<!-- 中:新闻列表 -->
<div class="news-col">
<h3>新闻动态</h3>
<ul class="news-list">
<li><a href="javascript:;">东部战区海军某驱逐舰支队开展海上实战化训练</a><span class="date">2026-08-28</span></li>
<li><a href="javascript:;">海军航空兵某团组织跨昼夜飞行训练</a><span class="date">2026-08-27</span></li>
<li><a href="javascript:;">某护卫舰大队开展编队协同训练提升作战能力</a><span class="date">2026-08-26</span></li>
<li><a href="javascript:;">战区海军组织机关干部军事体育考核</a><span class="date">2026-08-25</span></li>
<li><a href="javascript:;">海军陆战队某旅开展两栖装甲车驾驶训练</a><span class="date">2026-08-24</span></li>
<li><a href="javascript:;">某潜艇支队开展深海作战课题研练</a><span class="date">2026-08-23</span></li>
<li><a href="javascript:;">海军某基地组织新装备作战使用培训</a><span class="date">2026-08-22</span></li>
</ul>
</div>
<!-- 右:热门排行 -->
<div class="news-col">
<h3>热门排行</h3>
<ul class="news-rank">
<li><span class="rank-num">1</span><a href="javascript:;">东部战区海军隆重举行某重大演练活动</a></li>
<li><span class="rank-num">2</span><a href="javascript:;">海军某驱逐舰支队开展实弹射击训练</a></li>
<li><span class="rank-num">3</span><a href="javascript:;">战区海军某保障基地开展业务技能比武</a></li>
<li><span class="rank-num">4</span><a href="javascript:;">海军航空兵某师组织对抗空战训练</a></li>
<li><span class="rank-num">5</span><a href="javascript:;">某登陆舰支队开展装载训练提升投送能力</a></li>
<li><span class="rank-num">6</span><a href="javascript:;">海军陆战队某旅开展登陆作战演练</a></li>
<li><span class="rank-num">7</span><a href="javascript:;">战区海军机关组织开展主题党日活动</a></li>
</ul>
</div>
</div>
</section>
<!-- 蓝色波浪分隔条 -->
<div class="divider-wave"></div>
<!-- 板块5:文章中心 -->
<section class="section article-section">
<div class="wrap">
<div class="sec-title">
<h2>学习中心</h2>
<div class="sec-title-en">STUDY CENTER</div>
</div>
<ul class="article-list">
<li><span class="tag">要闻</span><a href="javascript:;">习近平主席关于国防和军队建设重要论述选编</a><span
class="date">2026-08-28</span></li>
<li><span class="tag">理论</span><a href="javascript:;">深刻领会新时代党的强军思想的丰富内涵和实践要求</a><span
class="date">2026-08-27</span></li>
<li><span class="tag">教育</span><a href="javascript:;">战区海军部队广泛开展主题教育实践活动</a><span
class="date">2026-08-26</span></li>
<li><span class="tag">学习</span><a href="javascript:;">深入推进"四史"学习教育 汲取奋进力量</a><span
class="date">2026-08-25</span></li>
<li><span class="tag">研讨</span><a href="javascript:;">围绕加快建设强大现代化海军开展专题研讨</a><span
class="date">2026-08-24</span></li>
<li><span class="tag">讲话</span><a href="javascript:;">在战区海军党委扩大会议上的重要讲话精神</a><span
class="date">2026-08-23</span></li>
<li><span class="tag">文件</span><a href="javascript:;">关于全面加强部队建设的若干意见</a><span
class="date">2026-08-22</span></li>
</ul>
</div>
</section>
<!-- 红色丝带分隔条 -->
<div class="divider-ribbon"></div>
<!-- 板块63卡片网格 -->
<section class="section">
<div class="wrap">
<div class="card-grid-3">
<div class="card">
<img src="" alt="">
<div class="card-body">
<h4>军事资讯</h4>
<p>提供最新军事动态、装备发展、训练演练等资讯内容,关注国防和军队现代化建设。</p>
</div>
</div>
<div class="card">
<img src="" alt="">
<div class="card-body">
<h4>战区要闻</h4>
<p>聚焦东部战区海军部队训练演习、战备执勤、抢险救灾等重要活动和重要时刻。</p>
</div>
</div>
<div class="card">
<img src="" alt="">
<div class="card-body">
<h4>部队动态</h4>
<p>展示基层部队官兵训练生活、典型事迹、经验做法等,记录海军官兵战斗风采。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 蓝色波浪分隔条 -->
<div class="divider-wave-2"></div>
<!-- 板块7:双列+侧边栏 -->
<section class="section">
<div class="wrap">
<div class="layout-sidebar">
<aside class="sidebar">
<h3>政策法规</h3>
<ul>
<li><a href="javascript:;">条令条例</a></li>
<li><a href="javascript:;">军事法规</a></li>
<li><a href="javascript:;">规章制度</a></li>
<li><a href="javascript:;">规范标准</a></li>
<li><a href="javascript:;">操作规程</a></li>
<li><a href="javascript:;">管理规定</a></li>
<li><a href="javascript:;">实施细则</a></li>
</ul>
</aside>
<div class="main-content">
<h3>政策法规详情</h3>
<ul class="article-list">
<li><span class="tag">法规</span><a href="javascript:;">《中华人民共和国国防法》全文</a><span
class="date">2026-08-28</span></li>
<li><span class="tag">条令</span><a href="javascript:;">内务条令、纪律条令、队列条令相关内容</a><span
class="date">2026-08-27</span></li>
<li><span class="tag">制度</span><a href="javascript:;">军队基层建设纲要及配套规章制度</a><span
class="date">2026-08-26</span></li>
<li><span class="tag">规定</span><a href="javascript:;">海军部队军事训练相关管理规定</a><span
class="date">2026-08-25</span></li>
<li><span class="tag">标准</span><a href="javascript:;">军事训练考核标准及实施细则</a><span
class="date">2026-08-24</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- 红色丝带分隔条 -->
<div class="divider-ribbon"></div>
<!-- 板块84卡片网格(2x2 -->
<section class="section">
<div class="wrap">
<div class="sec-title">
<h2>强军风采</h2>
<div class="sec-title-en">MILITARY STYLE</div>
</div>
<div class="card-grid-4">
<div class="card">
<img src="" alt="">
<div class="card-body">
<h4>训练剪影</h4>
<p>记录官兵训练瞬间,展现新时代海军官兵的战斗风采。</p>
</div>
</div>
<div class="card">
<img src="" alt="">
<div class="card-body">
<h4>演训一线</h4>
<p>聚焦海上演训一线,呈现实战化训练的精彩画面。</p>
</div>
</div>
<div class="card">
<img src="" alt="">
<div class="card-body">
<h4>装备风采</h4>
<p>展示新型武器装备,体现国防科技发展水平。</p>
</div>
</div>
<div class="card">
<img src="" alt="">
<div class="card-body">
<h4>军旅生活</h4>
<p>反映海军官兵丰富多彩的军旅生活和战友情谊。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 蓝色波浪分隔条 -->
<div class="divider-wave"></div>
<!-- 板块9:双列内容 -->
<section class="section">
<div class="wrap">
<div class="two-col">
<div class="two-col-block">
<h3>服务保障</h3>
<ul class="article-list">
<li><span class="tag">后勤</span><a href="javascript:;">战区海军后勤保障工作稳步推进</a><span
class="date">2026-08-28</span></li>
<li><span class="tag">装备</span><a href="javascript:;">海军装备维修保障能力建设取得新进展</a><span
class="date">2026-08-27</span></li>
<li><span class="tag">卫勤</span><a href="javascript:;">海上医疗救护演练提升卫勤保障能力</a><span
class="date">2026-08-26</span></li>
<li><span class="tag">运输</span><a href="javascript:;">海军运输投送能力建设成果显著</a><span
class="date">2026-08-25</span></li>
</ul>
</div>
<div class="two-col-block">
<h3>强军文化</h3>
<ul class="article-list">
<li><span class="tag">文化</span><a href="javascript:;">海军特色文化建设项目成果展示</a><span
class="date">2026-08-28</span></li>
<li><span class="tag">活动</span><a href="javascript:;">战区海军举办庆祝海军成立纪念活动</a><span
class="date">2026-08-27</span></li>
<li><span class="tag">作品</span><a href="javascript:;">海军官兵文学艺术作品征集评选活动</a><span
class="date">2026-08-26</span></li>
<li><span class="tag">典型</span><a href="javascript:;">宣传表彰强军路上先进典型事迹</a><span
class="date">2026-08-25</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- 红色丝带分隔条 -->
<div class="divider-ribbon"></div>
<!-- 板块102x2图片网格 -->
<section class="section">
<div class="wrap">
<div class="img-grid-2x2">
<div class="img-item">
<img src="" alt="">
<div class="img-caption">深蓝砺剑 - 海上实战化训练</div>
</div>
<div class="img-item">
<img src="" alt="">
<div class="img-caption">逐梦深蓝 - 海军官兵风采</div>
</div>
<div class="img-item">
<img src="" alt="">
<div class="img-caption">向海图强 - 装备建设发展</div>
</div>
<div class="img-item">
<img src="" alt="">
<div class="img-caption">练兵备战 - 演训一线报道</div>
</div>
</div>
</div>
</section>
<!-- 蓝色波浪分隔条 -->
<div class="divider-wave-2"></div>
<!-- 板块11:双列内容(在线留言/网盘等) -->
<section class="section">
<div class="wrap">
<div class="two-col">
<div class="two-col-block">
<h3>在线留言</h3>
<p style="color:#666;font-size:13px;line-height:1.8;">
为畅通官兵诉求渠道,倾听基层声音,欢迎广大官兵通过留言板反映问题、提出建议,我们将认真对待每一条留言,及时反馈处理结果。</p>
</div>
<div class="two-col-block">
<h3>网盘服务</h3>
<p style="color:#666;font-size:13px;line-height:1.8;">
提供文件存储、共享、下载等便捷服务,方便官兵日常工作和学习资料的存储与共享,支持多种文件格式上传与管理。</p>
</div>
</div>
</div>
</section>
<!-- 板块:Footer -->
<footer class="footer">
<div class="wrap">
<div class="footer-left">
<h4>东部战区海军强军网集群</h4>
<p>主办单位:东部战区海军政治工作部</p>
<p>承办单位:东部战区海军网络宣传中心</p>
<p>联系电话:XXX-XXXXXXXX &nbsp;&nbsp; Email: xxxxx@163.com</p>
</div>
<div class="footer-right">
<p>Copyright © 2026 东部战区海军强军网 版权所有</p>
<p>网站标识码:XXXXXXXXXX</p>
<p>京ICP备XXXXXXXX号 &nbsp; 军网XX字第XXX号</p>
</div>
</div>
</footer>
</body>
</html>
+51 -51
View File
@@ -1,12 +1,12 @@
/* /*
政工网通用样式表 ͨʽ
part1:reset.css part1:reset.css
part2:grid.css w1008-24 part2:grid.css w1008-24
part3:base.css part3:base.css
创建时间: 2015-06-29 ʱ: 2015-06-29
最后更新时间:2016-07-03 ʱ2016-07-03
未压缩版:4.0.2 δѹ4.0.2
制作:lhh lhh
*/ */
/*----------------------------part1:reset.css----------------------------*/ /*----------------------------part1:reset.css----------------------------*/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp { a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp {
@@ -103,7 +103,7 @@ body {
.omega { .omega {
margin-right: 0; margin-right: 0;
} }
/* Grid >> 24 Columns 宽度30 + 左边距6+右边距 /* Grid >> 24 Columns 30 + ߾6ұ߾
----------------------------------------------------------------------------------------------------*/ ----------------------------------------------------------------------------------------------------*/
.container_24 .grid_1 { .container_24 .grid_1 {
@@ -466,7 +466,7 @@ body {
.container_24 .pull_23 { .container_24 .pull_23 {
left: -966px; left: -966px;
} }
/* `清除浮动 */ /* ` */
.clear { .clear {
clear: both; clear: both;
display: block; display: block;
@@ -492,14 +492,14 @@ body {
zoom: 1; zoom: 1;
} }
/*----------------------------part3:base.css----------------------------*/ /*----------------------------part3:base.css----------------------------*/
/*1 标题 /*1
Example Example
<h1> 大标题<small>小标题</small></h1> <h1> <small>С</small></h1>
<h2> 大标题<small>小标题</small></h2> <h2> <small>С</small></h2>
<h3> 大标题<small>小标题</small></h3> <h3> <small>С</small></h3>
<h4> 大标题<small>小标题</small></h4> <h4> <small>С</small></h4>
<h5> 大标题<small>小标题</small></h5> <h5> <small>С</small></h5>
<h6> 大标题<small>小标题</small></h6> <h6> <small>С</small></h6>
*/ */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: 500; font-weight: 500;
@@ -543,42 +543,42 @@ h5 {
h6 { h6 {
font-size: 12px; font-size: 12px;
} }
/*2 文字效果 /*2 Ч
Name: 文字效果 Name: Ч
Example: style_b,style_strong,style_em,style_pre,style_uppercase,style_lowercase,style_capitalize,style_en Example: style_b,style_strong,style_em,style_pre,style_uppercase,style_lowercase,style_capitalize,style_en
*/ */
/*小型文本*/ /*Сı*/
b, strong { b, strong {
font-weight: bold; font-weight: bold;
} }
/*重要的文本,加粗*/ /*ҪıӴ*/
em { em {
font-style: italic; font-style: italic;
} }
pre { pre {
white-space: pre-wrap; white-space: pre-wrap;
} }
/*预格式化的文本*/ /*Ԥʽı*/
.uppercase { .uppercase {
text-transform: uppercase; text-transform: uppercase;
} }
/*文字大写*/ /*ִд*/
.lowercase { .lowercase {
text-transform: lowercase; text-transform: lowercase;
} }
/*文字小写*/ /*Сд*/
.capitalize { .capitalize {
text-transform: capitalize; text-transform: capitalize;
} }
/*首字母大写*/ /*ĸд*/
.en { .en {
font-family: Arial !important; font-family: Arial !important;
} }
/*3 对齐 /*3
Name: style_text-align Name: style_text-align
Example: class="text-l|text-r|text-c|va-t|va-m|va-b" Example: class="text-l|text-r|text-c|va-t|va-m|va-b"
Explain: .text-水平对齐 .text-l左对齐|.text-r右对齐|.text-c居中对齐) Explain: .text-ˮƽ .text-l|.text-rҶ|.text-cж
.va-上下对齐 (.va-t 居上对齐|.va-m 居中对齐|.va-b 居下对齐) .va- .va-t ϶|.va-m ж|.va-b
*/ */
.text-l { .text-l {
text-align: left; text-align: left;
@@ -591,7 +591,7 @@ pre {
} }
.va * { .va * {
vertical-align: sub !important; vertical-align: sub !important;
*vertical-align: middle !important; vertical-align: middle !important;
_vertical-align: middle !important; _vertical-align: middle !important;
} }
.va-t { .va-t {
@@ -603,10 +603,10 @@ pre {
.va-b { .va-b {
vertical-align: bottom !important; vertical-align: bottom !important;
} }
/*4 定位 /*4 λ
Name: style_position Name: style_position
Example: class="pos-r|pos-a|pos-f" Example: class="pos-r|pos-a|pos-f"
Explain: .pos-r 相对定位|.pos-a 绝对定位|.pos-f 固定 Explain: .pos-r Զλ|.pos-a Զλ|.pos-f ̶
*/ */
.pos-r { .pos-r {
position: relative; position: relative;
@@ -617,10 +617,10 @@ pre {
.pos-f { .pos-f {
position: fixed; position: fixed;
} }
/*5 浮动 /*5
Name: style_float Name: style_float
Example: class="l|r" Example: class="l|r"
Explain: .l 左浮动|.r 右浮动 Explain: .l 󸡶|.r Ҹ
*/ */
.l, .f-l { .l, .f-l {
float: left !important; float: left !important;
@@ -633,7 +633,7 @@ pre {
[class*="span"].r, [class*="span"].f-r { [class*="span"].r, [class*="span"].f-r {
float: right; float: right;
} }
/*控制元素对定位的位置:居左|居右|j居上|居下*/ /*ԪضԶλλã||j|*/
.left { .left {
left: 0; left: 0;
right: auto; right: auto;
@@ -650,7 +650,7 @@ pre {
top: 0; top: 0;
bottom: auto; bottom: auto;
} }
/*6 文字单行溢出省略号 /*6 ֵʡԺ
Name: style_text-overflow Name: style_text-overflow
Example: class="text-overflow" Example: class="text-overflow"
*/ */
@@ -659,7 +659,7 @@ pre {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/*7 线条 /*7
Name: style_line Name: style_line
Example: class="line" Example: class="line"
*/ */
@@ -669,10 +669,10 @@ pre {
border-top: solid 1px #eee; border-top: solid 1px #eee;
float: none; float: none;
} }
/*8 外边距 /*8 ߾
Name: style_margin Name: style_margin
Example: class="mt-5|mt-10..." Example: class="mt-5|mt-10..."
Explain: .mt表示上边距|.mb表示下边距|.ml表示左边距|.mr表示右边距 Explain: .mtʾϱ߾|.mbʾ±߾|.mlʾ߾|.mrʾұ߾
*/ */
.mt-5 { .mt-5 {
margin-top: 5px; margin-top: 5px;
@@ -764,10 +764,10 @@ pre {
.mr-50 { .mr-50 {
margin-right: 50px; margin-right: 50px;
} }
/*9 内填充 /*9
Name: style_padding Name: style_padding
Example: class="pt-5|pt-10|……" Example: class="pt-5|pt-10|"
Explain: .pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充 Explain: .ptʾ|.pbʾ|.plʾ|.prʾ
*/ */
.pt-5 { .pt-5 {
padding-top: 5px; padding-top: 5px;
@@ -823,10 +823,10 @@ pre {
.pd-40 { .pd-40 {
padding: 40px; padding: 40px;
} }
/*10 边框,css3圆角 /*10 ߿css3Բ
Name: style_border Name: style_border
Example: class="radius" Example: class="radius"
Explain: .bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形 Explain: .bk_gray ߿|radius Բ|round Բ | circle Բ
*/ */
.radius { .radius {
border-radius: 4px; border-radius: 4px;
@@ -852,11 +852,11 @@ pre {
overflow: hidden; overflow: hidden;
behavior: url(ie-css3.htc); behavior: url(ie-css3.htc);
} }
/*11 css3阴影 /*11 css3Ӱ
Name: style_shadow Name: style_shadow
Example: class="box-shadow|text-shadow" Example: class="box-shadow|text-shadow"
Explain: box-shadow 块级元素阴影,全局样式,可用在表格,文本框,文本域,div等块级元素上。 Explain: box-shadow 鼶ԪӰȫʽڱııdivȿ鼶Ԫϡ
text-shadow 文字阴影 text-shadow Ӱ
*/ */
.box-shadow { .box-shadow {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -868,7 +868,7 @@ pre {
text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
behavior: url(ie-css3.htc); behavior: url(ie-css3.htc);
} }
/*12 行内分割竖线 /*12 ڷָ
Name: style_pipe Name: style_pipe
Example: <span class="pipe"|</span Example: <span class="pipe"|</span
*/ */
@@ -877,10 +877,10 @@ pre {
color: #CCC; color: #CCC;
font-size: 10px !important; font-size: 10px !important;
} }
/*13 文字尺寸 /*13 ֳߴ
Name: style_font-size Name: style_font-size
Example: class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30" Example: class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30"
Explain: 12px字体|14px字体|16px字体|18px字体|20px字体|24px字体|26px字体|28px字体|30px字体 Explain: 12px|14px|16px|18px|20px|24px|26px|28px|30px
*/ */
.f-12 { .f-12 {
font-size: 12px; font-size: 12px;
@@ -909,10 +909,10 @@ pre {
.f-30 { .f-30 {
font-size: 30px; font-size: 30px;
} }
/*14 文字行距 /*14 о
Name: mod_line-height Name: mod_line-height
Example: class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30" Example: class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30"
Explain: 16px行高|18px行高|20px行高|22px行高|24px行高|26px行高|30px行高 Explain: 16pxи|18pxи|20pxи|22pxи|24pxи|26pxи|30pxи
*/ */
.lh-16 { .lh-16 {
line-height: 16px; line-height: 16px;
@@ -938,10 +938,10 @@ pre {
.lh-30 { .lh-30 {
line-height: 30px; line-height: 30px;
} }
/*15 全局文字颜色 /*15 ȫɫ
Name: style_body,style_a Name: style_body,style_a
*/ */
/*全局默认链接颜色*/ /*ȫĬɫ*/
body { body {
font-family: 'Microsoft YaHei'; font-family: 'Microsoft YaHei';
color: #333; color: #333;
+6 -6
View File
@@ -34,17 +34,17 @@ button { cursor: pointer; border: 0; background: none; font-family: inherit; }
.slogan { font-size: 18px; color: #003366; font-weight: bold; letter-spacing: 2px; } .slogan { font-size: 18px; color: #003366; font-weight: bold; letter-spacing: 2px; }
/* ===== 板块3:主导航 ===== */ /* ===== 板块3:主导航 ===== */
.mainnav { background: #003366; } .mainnav { background: #F7F7F7; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
.mainnav .inner { display: flex; align-items: center; height: 50px; } .mainnav .inner { display: flex; align-items: center; height: 50px; }
.mainnav ul { display: flex; flex: 1; } .mainnav ul { display: flex; flex: 1; }
.mainnav li { position: relative; } .mainnav li { position: relative; }
.mainnav li a { display: block; padding: 0 22px; height: 50px; line-height: 50px; color: #fff; font-size: 15px; font-weight: 500; } .mainnav li a { display: block; padding: 0 22px; height: 50px; line-height: 50px; color: #333; font-size: 15px; font-weight: 500; }
.mainnav li:hover a { background: #002244; } .mainnav li:hover a { background: #fff; color: #CC0000; }
.mainnav li.cur a { background: #002244; } .mainnav li.cur a { background: #fff; color: #CC0000; }
.mainnav li.cur::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #CC0000; } .mainnav li.cur::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #CC0000; }
.nav-icons { display: flex; } .nav-icons { display: flex; }
.nav-icon { width: 40px; height: 40px; background: #002244; color: #fff; margin-left: 5px; display: flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 3px; } .nav-icon { width: 40px; height: 40px; background: #fff; color: #003366; margin-left: 5px; display: flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 3px; border: 1px solid #e0e0e0; }
.nav-icon:hover { background: #CC0000; color: #fff; } .nav-icon:hover { background: #CC0000; color: #fff; border-color: #CC0000; }
/* ===== 板块通用:标题栏 ===== */ /* ===== 板块通用:标题栏 ===== */
.sec-title { height: 40px; line-height: 40px; border-bottom: 1px solid #e0e0e0; margin-bottom: 10px; padding-left: 12px; position: relative; } .sec-title { height: 40px; line-height: 40px; border-bottom: 1px solid #e0e0e0; margin-bottom: 10px; padding-left: 12px; position: relative; }
+272 -117
View File
@@ -1,20 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>东部战区海军</title> <title>东部战区海军</title>
<meta name="viewport" content="width=1200"> <meta name="viewport" content="width=1200">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/preview.css"> <link rel="stylesheet" href="css/preview.css">
<script src="js/jquery1.42.min.js"></script> <script src="js/jquery1.42.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script> <script src="js/jquery.SuperSlide.2.1.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head> </head>
<body> <body>
<!-- 板块1:顶部工具栏 --> <!-- 板块1:顶部工具栏 -->
<div class="topbar"> <div class="topbar">
<div class="inner"> <div class="inner">
<span class="welcome">欢迎访问东部战区海军网站</span> <span class="welcome">欢迎访问东部战区海军网站</span>
<form class="searchbox" onsubmit="return false;"> <form class="searchbox" onsubmit="return false;">
@@ -28,10 +30,10 @@
<a href="javascript:;">加入收藏</a> <a href="javascript:;">加入收藏</a>
</div> </div>
</div> </div>
</div> </div>
<!-- 板块2:网站头部 --> <!-- 板块2:网站头部 -->
<header class="site-header"> <header class="site-header">
<div class="inner"> <div class="inner">
<div class="logo-area"> <div class="logo-area">
<div class="logo-img" title="八一军徽+网站Logo">[八一军徽+网站Logo]</div> <div class="logo-img" title="八一军徽+网站Logo">[八一军徽+网站Logo]</div>
@@ -44,10 +46,10 @@
<div class="slogan">听党指挥 能打胜仗 作风优良</div> <div class="slogan">听党指挥 能打胜仗 作风优良</div>
</div> </div>
</div> </div>
</header> </header>
<!-- 板块3:主导航 --> <!-- 板块3:主导航 -->
<nav class="mainnav"> <nav class="mainnav">
<div class="inner"> <div class="inner">
<ul> <ul>
<li class="cur"><a href="javascript:;">新闻阅报</a></li> <li class="cur"><a href="javascript:;">新闻阅报</a></li>
@@ -66,10 +68,10 @@
<a class="nav-icon" href="javascript:;" title="邮箱"></a> <a class="nav-icon" href="javascript:;" title="邮箱"></a>
</div> </div>
</div> </div>
</nav> </nav>
<!-- 板块4:头条焦点区 --> <!-- 板块4:头条焦点区 -->
<section class="block block-headline"> <section class="block block-headline">
<div class="inner"> <div class="inner">
<div class="hd-left"> <div class="hd-left">
<div class="carousel" id="carousel-headline"> <div class="carousel" id="carousel-headline">
@@ -98,7 +100,8 @@
</div> </div>
<div class="hd-right"> <div class="hd-right">
<div class="hd-rt-top"> <div class="hd-rt-top">
<div class="sec-title"><span class="bar"></span>要闻速递<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="bar"></span>要闻速递<a class="more"
href="javascript:;">更多&gt;&gt;</a></div>
<ul class="news-list"> <ul class="news-list">
<li><a href="javascript:;">习近平在全军高级干部培训班开班式上发表重要讲话</a><span>08-31</span></li> <li><a href="javascript:;">习近平在全军高级干部培训班开班式上发表重要讲话</a><span>08-31</span></li>
<li><a href="javascript:;">东部战区海军党委理论学习中心组开展专题学习</a><span>08-30</span></li> <li><a href="javascript:;">东部战区海军党委理论学习中心组开展专题学习</a><span>08-30</span></li>
@@ -120,28 +123,35 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 板块5:第一内容区(三栏) --> <!-- 板块5:第一内容区(三栏) -->
<section class="block block-3col"> <section class="block block-3col">
<div class="inner"> <div class="inner">
<div class="col"> <div class="col">
<div class="sec-title"><span class="star"></span>媒体聚焦<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="star"></span>媒体聚焦<a class="more" href="javascript:;">更多&gt;&gt;</a>
</div>
<div class="col-feature"> <div class="col-feature">
<div class="feature-img" style="background:#4a5a6a;">[军舰图片]</div> <div class="feature-img" style="background:#4a5a6a;">[军舰图片]</div>
<a class="feature-tit" href="javascript:;">海军某驱逐舰支队开展实战化训练提升打赢能力</a> <a class="feature-tit" href="javascript:;">海军某驱逐舰支队开展实战化训练提升打赢能力</a>
</div> </div>
<ul class="news-list img-news"> <ul class="news-list img-news">
<li><span class="thumb" style="background:#3a5f7d;">[图]</span><a href="javascript:;">东海舰队组织舰艇编队海上补给演练</a></li> <li><span class="thumb" style="background:#3a5f7d;">[图]</span><a
<li><span class="thumb" style="background:#1f4e79;">[图]</span><a href="javascript:;">航空兵某师开展夜间低空战术训</a></li> href="javascript:;">东海舰队组织舰艇编队海上补给演</a></li>
<li><span class="thumb" style="background:#2d5a3d;">[图]</span><a href="javascript:;">陆战队员开展极限体能训练</a></li> <li><span class="thumb" style="background:#1f4e79;">[图]</span><a
<li><span class="thumb" style="background:#5a3d2d;">[图]</span><a href="javascript:;">某勤务船大队组织海上救生演</a></li> href="javascript:;">航空兵某师开展夜间低空战术训</a></li>
<li><span class="thumb" style="background:#2d5a3d;">[图]</span><a
href="javascript:;">陆战队员开展极限体能训练</a></li>
<li><span class="thumb" style="background:#5a3d2d;">[图]</span><a
href="javascript:;">某勤务船大队组织海上救生演练</a></li>
</ul> </ul>
</div> </div>
<div class="col"> <div class="col">
<div class="sec-title"><span class="star"></span>新闻中心<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="star"></span>新闻中心<a class="more" href="javascript:;">更多&gt;&gt;</a>
</div>
<ul class="news-list text-list"> <ul class="news-list text-list">
<li class="imp"><a href="javascript:;">习近平在全军高级干部培训班开班式上发表重要讲话</a><span>08-31</span></li> <li class="imp"><a href="javascript:;">习近平在全军高级干部培训班开班式上发表重要讲话</a><span>08-31</span>
</li>
<li class="imp"><a href="javascript:;">东部战区海军召开主题教育推进会</a><span>08-30</span></li> <li class="imp"><a href="javascript:;">东部战区海军召开主题教育推进会</a><span>08-30</span></li>
<li><a href="javascript:;">战区海军党委传达学习上级重要指示精神</a><span>08-29</span></li> <li><a href="javascript:;">战区海军党委传达学习上级重要指示精神</a><span>08-29</span></li>
<li><a href="javascript:;">某潜艇支队开展水下攻防对抗训练</a><span>08-29</span></li> <li><a href="javascript:;">某潜艇支队开展水下攻防对抗训练</a><span>08-29</span></li>
@@ -154,9 +164,11 @@
</ul> </ul>
</div> </div>
<div class="col"> <div class="col">
<div class="sec-title"><span class="star"></span>通知公告<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="star"></span>通知公告<a class="more" href="javascript:;">更多&gt;&gt;</a>
</div>
<ul class="news-list text-list"> <ul class="news-list text-list">
<li><a href="javascript:;" class="red">关于召开"学习強军思想 建功强军事业"先进事迹报告会的通知</a><span class="new">new</span></li> <li><a href="javascript:;" class="red">关于召开"学习強军思想 建功强军事业"先进事迹报告会的通知</a><span class="new">new</span>
</li>
<li><a href="javascript:;" class="red">关于举办海军成立纪念日系列活动的通知</a><span class="new">new</span></li> <li><a href="javascript:;" class="red">关于举办海军成立纪念日系列活动的通知</a><span class="new">new</span></li>
<li><a href="javascript:;">2026年度军事职业教育课程申报通知</a></li> <li><a href="javascript:;">2026年度军事职业教育课程申报通知</a></li>
<li><a href="javascript:;">关于规范营区车辆停放秩序的公告</a></li> <li><a href="javascript:;">关于规范营区车辆停放秩序的公告</a></li>
@@ -169,10 +181,10 @@
</ul> </ul>
</div> </div>
</div> </div>
</section> </section>
<!-- 板块6:红色宣传横幅 --> <!-- 板块6:红色宣传横幅 -->
<section class="red-banner"> <section class="red-banner">
<div class="inner"> <div class="inner">
<a class="red-btn" href="javascript:;">学习贯彻习近平新时代中国特色社会主义思想</a> <a class="red-btn" href="javascript:;">学习贯彻习近平新时代中国特色社会主义思想</a>
<a class="red-btn" href="javascript:;">学习宣传贯彻党的二十大精神</a> <a class="red-btn" href="javascript:;">学习宣传贯彻党的二十大精神</a>
@@ -181,10 +193,10 @@
<a class="red-btn" href="javascript:;">传承红色基因 担当强军重任</a> <a class="red-btn" href="javascript:;">传承红色基因 担当强军重任</a>
<a class="red-btn" href="javascript:;">学党史 悟思想 办实事 开新局</a> <a class="red-btn" href="javascript:;">学党史 悟思想 办实事 开新局</a>
</div> </div>
</section> </section>
<!-- 板块7:学习强军(最复杂) --> <!-- 板块7:学习强军(最复杂) -->
<section class="block block-study"> <section class="block block-study">
<div class="study-hd"> <div class="study-hd">
<div class="inner"> <div class="inner">
<span class="star"></span><span class="title">学习强军</span> <span class="star"></span><span class="title">学习强军</span>
@@ -206,9 +218,18 @@
<div class="study-sub">学习数据统计</div> <div class="study-sub">学习数据统计</div>
<div id="echart-bar" style="width:100%;height:200px;"></div> <div id="echart-bar" style="width:100%;height:200px;"></div>
<div class="data-cards"> <div class="data-cards">
<div class="data-card"><div class="num">2,486</div><div class="lab">本月学时(小时)</div></div> <div class="data-card">
<div class="data-card"><div class="num">36</div><div class="lab">本周课程(节)</div></div> <div class="num">2,486</div>
<div class="data-card"><div class="num">98.6%</div><div class="lab">完成率</div></div> <div class="lab">本月学时(小时)</div>
</div>
<div class="data-card">
<div class="num">36</div>
<div class="lab">本周课程(节)</div>
</div>
<div class="data-card">
<div class="num">98.6%</div>
<div class="lab">完成率</div>
</div>
</div> </div>
</div> </div>
<!-- 中40%:文章列表 --> <!-- 中40%:文章列表 -->
@@ -240,14 +261,72 @@
<a class="cal-next" href="javascript:;"></a> <a class="cal-next" href="javascript:;"></a>
</div> </div>
<table class="cal-tb"> <table class="cal-tb">
<thead><tr><th></th><th></th><th></th><th></th><th></th><th class="wk"></th><th class="wk"></th></tr></thead> <thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="wk"></th>
<th class="wk"></th>
</tr>
</thead>
<tbody> <tbody>
<tr><td></td><td></td><td></td><td></td><td></td><td>1</td><td class="wk">2</td></tr> <tr>
<tr><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td class="wk">9</td></tr> <td></td>
<tr><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td class="wk">16</td></tr> <td></td>
<tr><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td class="wk">23</td></tr> <td></td>
<tr><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td class="today">29</td><td class="wk">30</td></tr> <td></td>
<tr><td class="cur">31</td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <td></td>
<td>1</td>
<td class="wk">2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td class="wk">9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td class="wk">16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td class="wk">23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td class="today">29</td>
<td class="wk">30</td>
</tr>
<tr>
<td class="cur">31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@@ -260,50 +339,67 @@
<div class="sub-title">精品课程</div> <div class="sub-title">精品课程</div>
<a class="course" href="javascript:;"> <a class="course" href="javascript:;">
<span class="course-img" style="background:#3a5f7d;">[视频封面]</span> <span class="course-img" style="background:#3a5f7d;">[视频封面]</span>
<span class="course-info"><span class="course-name">党的二十大精神专题辅导</span><span class="course-meta">主讲:王教授 · 120分钟</span></span> <span class="course-info"><span class="course-name">党的二十大精神专题辅导</span><span
class="course-meta">主讲:王教授 · 120分钟</span></span>
</a> </a>
<a class="course" href="javascript:;"> <a class="course" href="javascript:;">
<span class="course-img" style="background:#1f4e79;">[视频封面]</span> <span class="course-img" style="background:#1f4e79;">[视频封面]</span>
<span class="course-info"><span class="course-name">习近平强军思想研读</span><span class="course-meta">主讲:李教授 · 90分钟</span></span> <span class="course-info"><span class="course-name">习近平强军思想研读</span><span
class="course-meta">主讲:李教授 · 90分钟</span></span>
</a> </a>
<a class="course" href="javascript:;"> <a class="course" href="javascript:;">
<span class="course-img" style="background:#2d5a3d;">[视频封面]</span> <span class="course-img" style="background:#2d5a3d;">[视频封面]</span>
<span class="course-info"><span class="course-name">国际形势与我国安全环境</span><span class="course-meta">主讲:张教授 · 60分钟</span></span> <span class="course-info"><span class="course-name">国际形势与我国安全环境</span><span
class="course-meta">主讲:张教授 · 60分钟</span></span>
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<div class="sub-title">优秀教案</div> <div class="sub-title">优秀教案</div>
<a class="course" href="javascript:;"> <a class="course" href="javascript:;">
<span class="course-img" style="background:#5a3d2d;">[教案封面]</span> <span class="course-img" style="background:#5a3d2d;">[教案封面]</span>
<span class="course-info"><span class="course-name">《新时代国防和军队建设》教学设计</span><span class="course-meta">作者:陈教员 · 浏览2.3k</span></span> <span class="course-info"><span class="course-name">《新时代国防和军队建设》教学设计</span><span
class="course-meta">作者:陈教员 · 浏览2.3k</span></span>
</a> </a>
<a class="course" href="javascript:;"> <a class="course" href="javascript:;">
<span class="course-img" style="background:#3d5a3d;">[教案封面]</span> <span class="course-img" style="background:#3d5a3d;">[教案封面]</span>
<span class="course-info"><span class="course-name">《军队基层建设纲要》解读</span><span class="course-meta">作者:刘教员 · 浏览1.8k</span></span> <span class="course-info"><span class="course-name">《军队基层建设纲要》解读</span><span
class="course-meta">作者:刘教员 · 浏览1.8k</span></span>
</a> </a>
<a class="course" href="javascript:;"> <a class="course" href="javascript:;">
<span class="course-img" style="background:#4a3a2d;">[教案封面]</span> <span class="course-img" style="background:#4a3a2d;">[教案封面]</span>
<span class="course-info"><span class="course-name">《思想政治工作条例》案例教学</span><span class="course-meta">作者:赵教员 · 浏览1.5k</span></span> <span class="course-info"><span class="course-name">《思想政治工作条例》案例教学</span><span
class="course-meta">作者:赵教员 · 浏览1.5k</span></span>
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<div class="sub-title">学习之星</div> <div class="sub-title">学习之星</div>
<ul class="star-list"> <ul class="star-list">
<li><span class="avatar" style="background:#aaa;">[头像]</span><div><a href="javascript:;">张志强</a><span>某驱逐舰支队政治教导员</span></div></li> <li><span class="avatar" style="background:#aaa;">[头像]</span>
<li><span class="avatar" style="background:#aaa;">[头像]</span><div><a href="javascript:;">李晓东</a><span>潜艇某大队技师</span></div></li> <div><a href="javascript:;">张志强</a><span>某驱逐舰支队政治教导员</span></div>
<li><span class="avatar" style="background:#aaa;">[头像]</span><div><a href="javascript:;">王晓燕</a><span>航空兵某团飞行员</span></div></li> </li>
<li><span class="avatar" style="background:#aaa;">[头像]</span><div><a href="javascript:;">刘建国</a><span>陆战某旅连长</span></div></li> <li><span class="avatar" style="background:#aaa;">[头像]</span>
<li><span class="avatar" style="background:#aaa;">[头像]</span><div><a href="javascript:;">陈志远</a><span>勤务船大队班长</span></div></li> <div><a href="javascript:;">李晓东</a><span>潜艇某大队技师</span></div>
</li>
<li><span class="avatar" style="background:#aaa;">[头像]</span>
<div><a href="javascript:;">王晓燕</a><span>航空兵某团飞行员</span></div>
</li>
<li><span class="avatar" style="background:#aaa;">[头像]</span>
<div><a href="javascript:;">刘建国</a><span>陆战某旅连长</span></div>
</li>
<li><span class="avatar" style="background:#aaa;">[头像]</span>
<div><a href="javascript:;">陈志远</a><span>勤务船大队班长</span></div>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 板块8:东海视线(视频) --> <!-- 板块8:东海视线(视频) -->
<section class="block block-video"> <section class="block block-video">
<div class="inner"> <div class="inner">
<div class="sec-title"><span class="star"></span>东海视线<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="star"></span>东海视线<a class="more" href="javascript:;">更多&gt;&gt;</a>
</div>
<div class="video-2col"> <div class="video-2col">
<a class="video-big" href="javascript:;"> <a class="video-big" href="javascript:;">
<span class="vb-img" style="background:#3a5f7d;">[视频封面]</span> <span class="vb-img" style="background:#3a5f7d;">[视频封面]</span>
@@ -334,12 +430,13 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 板块9:练兵备战 --> <!-- 板块9:练兵备战 -->
<section class="block block-train"> <section class="block block-train">
<div class="inner"> <div class="inner">
<div class="sec-title"><span class="star"></span>练兵备战<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="star"></span>练兵备战<a class="more" href="javascript:;">更多&gt;&gt;</a>
</div>
<div class="train-pic"> <div class="train-pic">
<a class="train-big" href="javascript:;"> <a class="train-big" href="javascript:;">
<span class="tb-img" style="background:#3a5f7d;">[训练图片] 东海舰队某驱逐舰支队开展实战化训练</span> <span class="tb-img" style="background:#3a5f7d;">[训练图片] 东海舰队某驱逐舰支队开展实战化训练</span>
@@ -403,10 +500,10 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 板块10:政治/后装/纪律(三栏) --> <!-- 板块10:政治/后装/纪律(三栏) -->
<section class="block block-3col-cards"> <section class="block block-3col-cards">
<div class="inner"> <div class="inner">
<div class="col-card"> <div class="col-card">
<div class="col-card-hd political"> <div class="col-card-hd political">
@@ -472,13 +569,14 @@
</ul> </ul>
</div> </div>
</div> </div>
</section> </section>
<!-- 板块11:理论/心理服务 --> <!-- 板块11:理论/心理服务 -->
<section class="block block-2col"> <section class="block block-2col">
<div class="inner"> <div class="inner">
<div class="col"> <div class="col">
<div class="sec-title"><span class="star"></span>理论服务<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="star"></span>理论服务<a class="more" href="javascript:;">更多&gt;&gt;</a>
</div>
<div class="expert-list"> <div class="expert-list">
<div class="expert"> <div class="expert">
<span class="avatar" style="background:#aaa;">[头像]</span> <span class="avatar" style="background:#aaa;">[头像]</span>
@@ -502,7 +600,8 @@
<div class="service-time">服务时间:周一至周五 08:00-17:30</div> <div class="service-time">服务时间:周一至周五 08:00-17:30</div>
</div> </div>
<div class="col"> <div class="col">
<div class="sec-title"><span class="star"></span>心理服务<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="star"></span>心理服务<a class="more" href="javascript:;">更多&gt;&gt;</a>
</div>
<div class="expert-list"> <div class="expert-list">
<div class="expert"> <div class="expert">
<span class="avatar" style="background:#aaa;">[头像]</span> <span class="avatar" style="background:#aaa;">[头像]</span>
@@ -526,27 +625,66 @@
<div class="service-time">服务时间:每日 08:00-22:00(24小时热线)</div> <div class="service-time">服务时间:每日 08:00-22:00(24小时热线)</div>
</div> </div>
</div> </div>
</section> </section>
<!-- 板块12:公示/数字军史 --> <!-- 板块12:公示/数字军史 -->
<section class="block block-2col"> <section class="block block-2col">
<div class="inner"> <div class="inner">
<div class="col"> <div class="col">
<div class="sec-title"><span class="star"></span>公示公开<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="star"></span>公示公开<a class="more" href="javascript:;">更多&gt;&gt;</a>
</div>
<table class="public-table"> <table class="public-table">
<thead><tr><th width="50">序号</th><th>标题</th><th width="80">日期</th><th width="70">状态</th></tr></thead> <thead>
<tr>
<th width="50">序号</th>
<th>标题</th>
<th width="80">日期</th>
<th width="70">状态</th>
</tr>
</thead>
<tbody> <tbody>
<tr><td>1</td><td><a href="javascript:;" class="red">2026年度干部任免公示(第三批)</a></td><td>08-30</td><td class="red">公示中</td></tr> <tr>
<tr><td>2</td><td><a href="javascript:;" class="red">关于表彰"四有"优秀个人的决定</a></td><td>08-29</td><td class="red">公示中</td></tr> <td>1</td>
<tr><td>3</td><td><a href="javascript:;">后勤物资采购公开招标公告</a></td><td>08-28</td><td>已发布</td></tr> <td><a href="javascript:;" class="red">2026年度干部任免公示(第三批)</a></td>
<tr><td>4</td><td><a href="javascript:;">装备采购意向公开</a></td><td>08-27</td><td>已发布</td></tr> <td>08-30</td>
<tr><td>5</td><td><a href="javascript:;">营区基建项目招标公告</a></td><td>08-26</td><td>已发布</td></tr> <td class="red">公示中</td>
<tr><td>6</td><td><a href="javascript:;">2026年军队院校招生简章</a></td><td>08-25</td><td>已发布</td></tr> </tr>
<tr>
<td>2</td>
<td><a href="javascript:;" class="red">关于表彰"四有"优秀个人的决定</a></td>
<td>08-29</td>
<td class="red">公示中</td>
</tr>
<tr>
<td>3</td>
<td><a href="javascript:;">后勤物资采购公开招标公告</a></td>
<td>08-28</td>
<td>已发布</td>
</tr>
<tr>
<td>4</td>
<td><a href="javascript:;">装备采购意向公开</a></td>
<td>08-27</td>
<td>已发布</td>
</tr>
<tr>
<td>5</td>
<td><a href="javascript:;">营区基建项目招标公告</a></td>
<td>08-26</td>
<td>已发布</td>
</tr>
<tr>
<td>6</td>
<td><a href="javascript:;">2026年军队院校招生简章</a></td>
<td>08-25</td>
<td>已发布</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="col"> <div class="col">
<div class="sec-title"><span class="star"></span>数字军史<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="star"></span>数字军史<a class="more" href="javascript:;">更多&gt;&gt;</a>
</div>
<div class="digit-stats"> <div class="digit-stats">
<div class="stat"> <div class="stat">
<div class="num">77</div> <div class="num">77</div>
@@ -566,19 +704,24 @@
</div> </div>
</div> </div>
<div class="timeline"> <div class="timeline">
<div class="tl-item"><span class="dot"></span><span class="year">1949.04.23</span><span class="evt">中国人民解放军海军在泰州白马庙宣告成立</span></div> <div class="tl-item"><span class="dot"></span><span class="year">1949.04.23</span><span
<div class="tl-item"><span class="dot"></span><span class="year">1955.01.18</span><span class="evt">解放一江山岛战役,海军首次协同作战</span></div> class="evt">中国人民解放军海军在泰州白马庙宣告成立</span></div>
<div class="tl-item"><span class="dot"></span><span class="year">1985.11.16</span><span class="evt">海军舰队首次走出国门访问南亚三国</span></div> <div class="tl-item"><span class="dot"></span><span class="year">1955.01.18</span><span
<div class="tl-item"><span class="dot"></span><span class="year">2008.12.26</span><span class="evt">海军首批护航编队赴亚丁湾执行护航任务</span></div> class="evt">解放一江山岛战役,海军首次协同作战</span></div>
<div class="tl-item"><span class="dot"></span><span class="year">1985.11.16</span><span
class="evt">海军舰队首次走出国门访问南亚三国</span></div>
<div class="tl-item"><span class="dot"></span><span class="year">2008.12.26</span><span
class="evt">海军首批护航编队赴亚丁湾执行护航任务</span></div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 板块13:东海清风(廉政) --> <!-- 板块13:东海清风(廉政) -->
<section class="block block-discipline"> <section class="block block-discipline">
<div class="inner"> <div class="inner">
<div class="sec-title"><span class="star red"></span>东海清风<a class="more" href="javascript:;">更多&gt;&gt;</a></div> <div class="sec-title"><span class="star red"></span>东海清风<a class="more" href="javascript:;">更多&gt;&gt;</a>
</div>
<div class="discipline-2col"> <div class="discipline-2col">
<div> <div>
<div class="sub-title">以案说法</div> <div class="sub-title">以案说法</div>
@@ -604,17 +747,21 @@
</ul> </ul>
</div> </div>
<div class="discipline-imgs"> <div class="discipline-imgs">
<a class="di-img" href="javascript:;"><span style="background:#5a3d2d;">[廉政图片]</span><span>廉政教育进基层</span></a> <a class="di-img" href="javascript:;"><span
<a class="di-img" href="javascript:;"><span style="background:#3d5a3d;">[廉政图片]</span><span>警示教育大会</span></a> style="background:#5a3d2d;">[廉政图片]</span><span>廉政教育进基层</span></a>
<a class="di-img" href="javascript:;"><span style="background:#4a3a2d;">[廉政图片]</span><span>参观廉政教育基地</span></a> <a class="di-img" href="javascript:;"><span
<a class="di-img" href="javascript:;"><span style="background:#3a4a5a;">[廉政图片]</span><span>廉政文化作品展</span></a> style="background:#3d5a3d;">[廉政图片]</span><span>警示教育大会</span></a>
<a class="di-img" href="javascript:;"><span
style="background:#4a3a2d;">[廉政图片]</span><span>参观廉政教育基地</span></a>
<a class="di-img" href="javascript:;"><span
style="background:#3a4a5a;">[廉政图片]</span><span>廉政文化作品展</span></a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 板块14:东海文化(图片墙) --> <!-- 板块14:东海文化(图片墙) -->
<section class="block block-culture"> <section class="block block-culture">
<div class="culture-hd"> <div class="culture-hd">
<div class="inner"> <div class="inner">
<span class="star"></span><span class="title">东海文化</span> <span class="star"></span><span class="title">东海文化</span>
@@ -629,19 +776,26 @@
</div> </div>
<div class="inner"> <div class="inner">
<div class="imgwall"> <div class="imgwall">
<a class="iw-big" href="javascript:;"><span style="background:#3a5f7d;">[文艺演出图片] 海军文艺轻骑队深入基层慰问演出</span><span class="cap">海军文艺轻骑队深入基层慰问演出</span></a> <a class="iw-big" href="javascript:;"><span style="background:#3a5f7d;">[文艺演出图片]
<a class="iw-1" href="javascript:;"><span style="background:#1f4e79;">[图片]</span><span class="cap">军营歌手大赛</span></a> 海军文艺轻骑队深入基层慰问演出</span><span class="cap">海军文艺轻骑队深入基层慰问演出</span></a>
<a class="iw-2" href="javascript:;"><span style="background:#2d5a3d;">[图片]</span><span class="cap">书画展</span></a> <a class="iw-1" href="javascript:;"><span style="background:#1f4e79;">[图片]</span><span
<a class="iw-3" href="javascript:;"><span style="background:#5a3d2d;">[图片]</span><span class="cap">摄影展</span></a> class="cap">军营歌手大赛</span></a>
<a class="iw-4" href="javascript:;"><span style="background:#3d5a3d;">[图片]</span><span class="cap">读书分享会</span></a> <a class="iw-2" href="javascript:;"><span style="background:#2d5a3d;">[图片]</span><span
<a class="iw-5" href="javascript:;"><span style="background:#4a3a2d;">[图片]</span><span class="cap">文艺汇演</span></a> class="cap">书画展</span></a>
<a class="iw-6" href="javascript:;"><span style="background:#3a4a5a;">[图片]</span><span class="cap">演讲比赛</span></a> <a class="iw-3" href="javascript:;"><span style="background:#5a3d2d;">[图片]</span><span
class="cap">摄影展</span></a>
<a class="iw-4" href="javascript:;"><span style="background:#3d5a3d;">[图片]</span><span
class="cap">读书分享会</span></a>
<a class="iw-5" href="javascript:;"><span style="background:#4a3a2d;">[图片]</span><span
class="cap">文艺汇演</span></a>
<a class="iw-6" href="javascript:;"><span style="background:#3a4a5a;">[图片]</span><span
class="cap">演讲比赛</span></a>
</div> </div>
</div> </div>
</section> </section>
<!-- 板块15:底部 --> <!-- 板块15:底部 -->
<footer class="site-footer"> <footer class="site-footer">
<div class="inner"> <div class="inner">
<div class="footer-map"> <div class="footer-map">
<div class="fm-col"> <div class="fm-col">
@@ -694,11 +848,12 @@
</div> </div>
</div> </div>
<div class="footer-line"></div> <div class="footer-line"></div>
</footer> </footer>
<!-- 返回顶部 --> <!-- 返回顶部 -->
<a class="back-top" href="javascript:;" id="backTop"></a> <a class="back-top" href="javascript:;" id="backTop"></a>
<script src="js/preview.js"></script> <script src="js/preview.js"></script>
</body> </body>
</html> </html>