头部内容居中:限制最大宽度960px,搜索框不撑满全屏
This commit is contained in:
+15
-12
@@ -58,7 +58,8 @@ body {
|
|||||||
border-bottom: 1px solid var(--border-light);
|
border-bottom: 1px solid var(--border-light);
|
||||||
display: flex; align-items: center; justify-content: center; padding: 0 16px; z-index: 100; gap: 16px;
|
display: flex; align-items: center; justify-content: center; padding: 0 16px; z-index: 100; gap: 16px;
|
||||||
}
|
}
|
||||||
[data-theme="dark"] .header-bar { background: rgba(20,20,20,0.95); }
|
.header-bar-inner { display: flex; align-items: center; gap: 16px; max-width: 960px; width: 100%; }
|
||||||
|
[data-theme="dark"] .header-bar { background: rgba(28,28,30,0.95); }
|
||||||
.header-bar .menu-btn {
|
.header-bar .menu-btn {
|
||||||
width: 36px; height: 36px; border: none; background: none;
|
width: 36px; height: 36px; border: none; background: none;
|
||||||
cursor: pointer; border-radius: var(--radius-sm);
|
cursor: pointer; border-radius: var(--radius-sm);
|
||||||
@@ -74,7 +75,7 @@ body {
|
|||||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
||||||
}
|
}
|
||||||
.header-bar .tagline { font-size: 11px; color: var(--text-tertiary); display: inline; }
|
.header-bar .tagline { font-size: 11px; color: var(--text-tertiary); display: inline; }
|
||||||
.search-box { flex: 1; min-width: 80px; position: relative; }
|
.search-box { flex: 0 1 240px; min-width: 100px; position: relative; }
|
||||||
.search-box input {
|
.search-box input {
|
||||||
width: 100%; padding: 8px 12px 8px 34px;
|
width: 100%; padding: 8px 12px 8px 34px;
|
||||||
border: 1px solid var(--border); border-radius: var(--radius-sm);
|
border: 1px solid var(--border); border-radius: var(--radius-sm);
|
||||||
@@ -256,16 +257,18 @@ body {
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header class="header-bar">
|
<header class="header-bar">
|
||||||
<button class="menu-btn" id="menuBtn" aria-label="菜单">
|
<div class="header-bar-inner">
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
<button class="menu-btn" id="menuBtn" aria-label="菜单">
|
||||||
</button>
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
||||||
<div class="brand">
|
</button>
|
||||||
<h1>Wiki 知识库</h1>
|
<div class="brand">
|
||||||
<span class="tagline">一人公司开发团队</span>
|
<h1>Wiki 知识库</h1>
|
||||||
</div>
|
<span class="tagline">一人公司开发团队</span>
|
||||||
<div class="search-box">
|
</div>
|
||||||
<span class="search-icon">🔍</span>
|
<div class="search-box">
|
||||||
<input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off">
|
<span class="search-icon">🔍</span>
|
||||||
|
<input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user