顶部
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 871 B |
Binary file not shown.
|
After Width: | Height: | Size: 1019 KiB |
+866
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 板块6：3卡片网格 ========== */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 板块8：4卡片网格（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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 板块10：2x2图片网格 ========== */
|
||||||
|
.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>
|
||||||
|
|
||||||
|
<!-- 板块6：3卡片网格 -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 板块8：4卡片网格（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>
|
||||||
|
|
||||||
|
<!-- 板块10：2x2图片网格 -->
|
||||||
|
<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 Email: xxxxx@163.com</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-right">
|
||||||
|
<p>Copyright © 2026 东部战区海军强军网 版权所有</p>
|
||||||
|
<p>网站标识码：XXXXXXXXXX</p>
|
||||||
|
<p>京ICP备XXXXXXXX号 军网XX字第XXX号</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
+51
-51
@@ -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;
|
||||||
|
|||||||
@@ -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; }
|
||||||
|
|||||||
+836
-681
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user