zhaichao/ningbo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

顶栏

Browse Source
This commit is contained in:
zhaichao
2026-09-02 11:41:36 +08:00
parent 20958efa67
commit 0768ba0ed2
2 changed files with 142 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/dbzq.css
+117 -66
View File
@@ -4,11 +4,16 @@
box-sizing: border-box;
}
html {
background: #ECEBF1;
}
body {
width: 1600px;
margin: 0 auto;
background: #FFFFFF;
font-family: "Microsoft YaHei", Arial, sans-serif;
background: #ECEBF1;
font-family: "Microsoft YaHei-Regular", Arial, sans-serif;
font-weight: Regular;
color: #333;
}
@@ -36,51 +41,60 @@ img {
position: relative;
width: 1600px;
height: 43px;
background: #f5f5f5;
background: #F7F7F7;
border-bottom: 1px solid #e5e5e5;
font-size: 12px;
color: #555;
margin-bottom: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.topbar .wrap {
position: relative;
width: 1600px;
height: 100%;
display: flex;
align-items: center;
}
.topbar .welcome {
/* 房子图标 */
.topbar .welcome-icon {
position: absolute;
left: 203px;
top: 50%;
transform: translateY(-50%);
color: #333;
display: flex;
align-items: center;
}
.topbar .welcome img {
width: 13px;
height: 13px;
margin-right: 6px;
}
.topbar .welcome .arrow {
/* 欢迎文字 */
.topbar .welcome-text {
position: absolute;
left: 222px;
top: 50%;
transform: translateY(-50%);
color: #414141;
white-space: nowrap;
}
/* 欢迎右侧箭头 */
.topbar .welcome-arrow {
position: absolute;
left: 380px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 5px;
margin-left: 14px;
margin-right: 0;
}
/* 军网导航 */
.topbar .nav {
position: absolute;
left: 416px;
top: 50%;
transform: translateY(-50%);
color: #333;
display: flex;
align-items: center;
color: #414141;
}
/* 军网导航箭头 */
.topbar .nav-arrow {
position: absolute;
left: 474px;
@@ -90,21 +104,45 @@ img {
height: 5px;
}
/* 搜索框 */
.topbar .searchbox {
position: absolute;
left: 688px;
top: 50%;
transform: translateY(-50%);
display: flex;
height: 33px;
}
.topbar .search-input-wrap {
position: relative;
width: 228px;
height: 33px;
}
.topbar .searchbox input {
height: 33px;
width: 228px;
padding: 0 8px;
height: 33px;
padding: 0 8px 0 28px;
border: 1px solid #ccc;
border-right: 0;
font-size: 12px;
outline: none;
color: #626468;
}
.topbar .searchbox input::placeholder {
color: #626468;
}
.topbar .search-icon {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
pointer-events: none;
}
.topbar .searchbox button {
@@ -116,63 +154,76 @@ img {
background: #fff;
cursor: pointer;
font-size: 12px;
color: #626468;
}
.topbar .toplinks {
/* 用户信息 */
.user-info {
position: absolute;
right: 20px;
left: 1046px;
top: 50%;
transform: translateY(-50%);
color: #414141;
font-size: 12px;
}
.topbar .toplinks a {
color: #555;
margin: 0 4px;
/* 右侧链接组 - 每个链接独立绝对定位 */
.topbar .toplinks-link {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 14px;
color: #414141;
}
.topbar .toplinks a:hover {
.topbar .toplinks-link .top-icon {
width: 12px;
height: 12px;
}
.topbar .link-exit .top-icon {
width: 17px;
height: 18px;
}
.topbar .link-register .top-icon {
width: 16px;
height: 18px;
}
.topbar .link-disk .top-icon {
width: 16px;
height: 15px;
}
.topbar .link-exit {
left: 1164px;
}
.topbar .link-register {
left: 1246px;
}
.topbar .link-disk {
left: 1326px;
}
/* 最右侧箭头 */
.topbar .links-arrow {
position: absolute;
left: 1388px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 5px;
}
.topbar .toplinks-link: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%;
web/dbzq.html
+25 -28
View File
@@ -12,42 +12,39 @@
<!-- 板块1：顶部工具栏 -->
<div class="topbar">
<div class="wrap">
<span class="welcome">
<img src="assest/房子 1@2x.png" alt="">
东部战区海军强军网集群
<img class="arrow" src="assest/Polygon 28.png" alt="">
</span>
<img class="welcome-icon" src="assest/房子 1@2x.png" alt="">
<span class="welcome-text">东部战区海军强军网集群</span>
<img class="welcome-arrow" src="assest/Polygon 28.png" alt="">
<span class="nav">军网导航</span>
<img class="nav-arrow" src="assest/Polygon 28.png" alt="">
<form class="searchbox" onsubmit="return false;">
<input type="text" placeholder="请输入关键字">
<div class="search-input-wrap">
<img class="search-icon" src="assest/Vector.png" alt="">
<input type="text" placeholder="请输入关键字">
</div>
<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>
<a class="user-info" href="javascript:;">标题标题 已登录</a>
<a class="toplinks-link link-exit" href="javascript:;">
<img class="top-icon" src="assest/登出 1.png" alt="">
退出
</a>
<a class="toplinks-link link-register" href="javascript:;">
<img class="top-icon" src="assest/注册 1.png" alt="">
注册
</a>
<a class="toplinks-link link-disk" href="javascript:;">
<img class="top-icon" src="assest/云 1.png" alt="">
网盘
</a>
<img class="links-arrow" src="assest/Polygon 28.png" alt="">
</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="网站头部切图">