2023年政策修订增补工作正在进行中，欢迎参与！
  • Moegirl.ICU：萌娘百科流亡社群 581077156（QQ），欢迎对萌娘百科运营感到失望的编辑者加入！
  • Moegirl.ICU：账号认领正在试运行，有意者请参照账号认领流程。

使用者:GuoPC/Navbox design

萌娘百科，萬物皆可萌的百科全書！轉載請標註來源頁面的網頁連結，並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋

存放GuoPC完全或部分設計拿來練手的一些Navbox。具體實現寫法可查看各章節中間的代碼，或者點擊各二級標題轉至對應模板頁面查看。

T:紀念碑谷

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  black00 #433A35 #4F7B70 #8F886E #B0B191 #E0BE99 #FCC29C #FECC9B 
文字  #FFF000 
代碼

|title = [[纪念碑谷|<img style="width:200px" src="{{filepath:Monument Valley Logo.png}}" alt="纪念碑谷系列" />]]<span style="display:none!important">[[File:Monument Valley Logo.png|1px|link=]]</span>

|titlestyle = background: linear-gradient(45deg, black 10%, #433A35 15%, #4F7B70 calc(15% + 1px), #4F7B70 20%, #8F886E calc(20% + 1px), #8F886E 25%, #B0B191 calc(25% + 1px), #B0B191 30%, #E0BE99 calc(30% + 1px), #E0BE99 35%, #FCC29C calc(35% + 1px), #FCC29C 40%, transparent calc(40% + 1px)), linear-gradient(135deg, transparent calc(60% - 1px), #FCC29C 60%, #FCC29C calc(65% - 1px), #E0BE99 70%, #E0BE99 calc(75% - 1px), #B0B191 75%, #B0B191 calc(80% - 1px), #8F886E 80%, #8F886E calc(85% - 1px), #4F7B70 85%, #4F7B70 calc(90% - 1px), #433A35 90%, black 95%), #FECC9B; color: #FFF;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  black00 
文字  #FFF000 
代碼 |groupstyle = background: black;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  black00 
文字  #FFF000 
標題設計
紀念碑谷系列

🖌️ 依據遊戲截圖：File:Monument Valley VG.jpg

T:愛殺寶貝

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #EFC3FF 
文字  #FFEE8A #5B493B 
代碼

|title = <div style="text-shadow:-1px 0 #5B493B, 0 -1px #5B493B, 0 1px #5B493B, 1px 0 #5B493B;">{{coloredlink|#FFEE8A|爱杀宝贝|爱杀宝贝（{{lj|キルミーベイベー}}）}}</div>

|titlestyle = background-color:#EFC3FF;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #EFC3FF #FFDDFF 
文字  black00 
代碼 |groupstyle = background-color:#EFC3FF;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFF0FF #FDFDFD 
文字  #0645AD 
標題設計
愛殺寶貝（キルミーベイベー）

🖌️ 依據動畫版Logo

T:釣球

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #66B9D8 #DDEAF2 
文字  #2085AB 
代碼

|title = {{coloredlink|#3EA2CC|钓球|钓球（{{lj|つり球}}）}}

|titlestyle = background: #DDEAF2; border-top: #66B9D8 2px solid; color: #2085AB;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #7ECFED #9CD9F0 
文字  #615734 
代碼 |groupstyle = background:#7ECFED;color:#615734;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #E0EDF5 #FDFDFD 
文字  #0645AD 
標題設計
釣球（つり球）

🖌️ 依據官網：TVアニメ「つり球」

T:HELLO WORLD

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFF000 #D0DCEC #E6C6AD #6E6A81 #000000 
文字  #5F5F5F #FFF000 
代碼

|title = [[HELLO WORLD|'''<big>{{color|rgb(95, 95, 95)|HELLO}} <span style="color: #FFF; padding: 0 .4em 0 .5em; background-color: rgb(95, 95, 95); text-shadow: none; box-shadow: 0 1px 1px #FFF, 1px 0 1px #FFF, 0 -1px 1px #FFF, -1px 0 1px #FFF;">WORLD</span></big>''']]

|titlestyle = background: radial-gradient(circle at top left, #FFF 20%, #D0DCEC 30%, #D0DCEC 55%, #E6C6AD 70%, #6E6A81 80%, #000), #000; color: rgb(95, 95, 95); text-shadow: 0 1px 1px #FFF, 1px 0 1px #FFF, 0 -1px 1px #FFF, -1px 0 1px #FFF; letter-spacing: 2px;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFF000 #5F5F5F 
文字  #5F5F5F #FFF000 
代碼 |groupstyle = background: #FFF; color: rgb(95, 95, 95);
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FDFDFD 
文字  #0645AD 
標題設計
HELLO WORLD

🖌️ 依據官網：オリジナル劇場アニメ『HELLO WORLD』公式サイト

T:SAGA PLANETS

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FF7AB0 
文字  #FFF000 
代碼

|title = [[File:SAGA Planets icon.png|70px|alt=SAGA PLANETS|link=SAGA PLANETS]]

|titlestyle = background: #FF7AB0; color: #FFF;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #F5CB74 #F4E6B5 
文字  #FFF000 
代碼 |groupstyle = background: repeating-linear-gradient(135deg, #F5CB74 0px, #F5CB74 6px, #F4E6B5 7px, #F4E6B5 13px); width: 3em;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #3AB4DD #6FC8E4 
文字  #FFF000 
標題設計
SAGA PLANETS

🖌️ 依據官網：SAGA PLANETS OFFICIAL HOMEPAGE

T:慎重勇者

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #BD030C 
文字  #FFF000 
代碼

|title = [[这个勇者明明超强却过分慎重|<span style="color:#000;font-family:serif;text-shadow:-1px 0 0 #FFF,0 -1px 0 #FFF,0 1px 0 #FFF,1px 0 0 #FFF,0 1.5px 2px #000C;">这个勇者明明</span><span style="color:#FFF;text-shadow:-1px 0 0 #D10207,0 -1px 0 #D10207,0 1px 0 #D10207,1px 0 0 #D10207,0 1.5px 2px #000C;">超强</span><span style="color:#000;font-family:serif;text-shadow:-1px 0 0 #FFF,0 -1px 0 #FFF,0 1px 0 #FFF,1px 0 0 #FFF,0 1.5px 2px #000C;">却过分慎重</span>]]

|titlestyle = background: #BD030C; color: #FFF; text-shadow: 0 1.5px 2px #000C;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #CEBA85 
文字  black00 
代碼 |groupstyle = background: #CEBA85;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #F5F1E7 #FDFDFD 
文字  #0645AD 
標題設計
這個勇者明明超強卻過分慎重

🖌️ 依據官網：『この勇者が俺ＴＵＥＥＥくせに慎重すぎる』土日月　特設サイト｜カドカワBOOKS｜KADOKAWA

T:SCHOOLGIRL STRIKERS

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFF000 
文字  #444000 
代碼

|title = [[SCHOOLGIRL STRIKERS|<span style="display:inline-block;color:#000;letter-spacing:5px;transform:scaleY(0.7);"><span style="color:#99BC7D;">S</span>CHOOL<span style="color:#D99CAE;">G</span>IRL <span style="color:#7FBBDB;">S</span>TRIKERS</span>]]

|titlestyle = background: #FFF; color: #444;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFF000 #FF6B53 
文字  #444000 
代碼 |groupstyle = background: #FFF; color: #444; border: #FF6B53 2px solid; border-radius: 5px;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFEADB 
文字  #444000 
標題設計
SCHOOLGIRL STRIKERS

🖌️ 依據官網：スクールガールストライカーズ2 【スクスト2】 | SQUARE ENIX - 公式サイト

T:惡魔之謎

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #D50066 #000000 
文字  #FFF000 
代碼

|title = {{coloredlink|#FFF|恶魔之谜}}

|titlestyle = background: linear-gradient(135deg, transparent 0% calc(48% - 1px), #000 48% 52%, transparent calc(52% + 1px) 100%), repeating-linear-gradient(135deg, #D50066 0px 2px, transparent 3px 4px), #000; color: #FFF;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #D50066 #000000 
文字  #FFF000 
代碼 |groupstyle = background: linear-gradient(135deg, transparent 0% calc(30% - 1px), #000 30% 70%, transparent calc(70% + 1px) 100%), repeating-linear-gradient(135deg, #D50066 0px 2px, transparent 3px 4px), #000; color: #FFF;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFE9F3 #FDFDFD 
文字  #0645AD 
標題設計
惡魔之謎

🖌️ 依據官網：アニメ「悪魔のリドル」公式サイト（原始頁面：アニメ「悪魔のリドル」公式サイト）

T:動畫同好會

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #E95F87 
文字  #FCCF00 #7CCCF3 #C3D600 
代碼

|title = [[动画同好会|<span style="color: #FCCF00;">动</span><span style="color: #7CCCF3;">画</span><span style="color: #C3D600;">同</span><span style="color: #FCCF00;">好</span><span style="color: #7CCCF3;">会</span><span style="color: #C3D600;">（</span>{{lj|1=<span style="color: #FCCF00;">ア</span><span style="color: #7CCCF3;">ニ</span><span style="color: #C3D600;">メ</span><span style="color: #FCCF00;">ガ</span><span style="color: #7CCCF3;">タ</span><span style="color: #00BEDF;">リ</span><span style="color: #C3D600;">ズ</span>}}<span style="color: #FCCF00;">）</span>]]

|titlestyle = background: #E95F87; color: #FFF;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #F2A2B9 #FFF000 
文字  #E95F87 
代碼 |groupstyle = background: repeating-linear-gradient(140deg, #FFF 0px 5px, transparent 6px 8px), repeating-linear-gradient(50deg, #FFF 0px 5px, #F2A2B9 6px 8px); color: #E95F87; text-shadow: -1px 0 0 #FFF, 0 -1px 0 #FFF, 0 1px 0 #FFF, 1px 0 0 #FFF;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FCE9EE #FDFDFD 
文字  #0645AD 
標題設計
動畫同好會（アニメガタリズ）

🖌️ 依據官網：アニメガタリ || TOHOシネマズ（原始頁面：アニメガタリ || TOHOシネマズ）

T:男子高中生的日常

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #36F000 #FFF000 
文字  #000000 #0099D9 
代碼

|title = [[男子高中生的日常|<div style="display:inline-block;background:#FFF;color:#000;font-size:larger;line-height:1em;"><div style="display:inline-block;border:#000 2px solid;padding:1px;">男</div><div style="display:inline-block;border:#000 2px solid;border-left:none;padding:1px;">子</div><div style="display:inline-block;border:#000 2px solid;border-left:none;padding:1px;">高</div><div style="display:inline-block;border:#000 2px solid;border-left:none;padding:1px;">中</div><div style="display:inline-block;border:#000 2px solid;border-left:none;padding:1px;">生</div><div style="display:inline-block;border:#000 2px solid;border-left:none;padding:1px;">的</div><div style="display:inline-block;border:#000 2px solid;border-left:none;color:#0099D9;padding:1px;">日</div><div style="display:inline-block;border:#000 2px solid;border-left:none;color:#0099D9;padding:1px;">常</div></div>]]

|titlestyle = background: #36F; color: #FFF;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #69F000 #9CF000 
文字  black00 
代碼 |groupstyle = background: #69F;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FDFDFD 
文字  #0645AD 
標題設計
男
子
高
中
生
的
日
常

🖌️ 依據官網：TVアニメ「男子高校生の日常」公式HP

T:魔法少女什麼的已經夠了啦

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFF000 
文字  #5DB7E8 #EE86A7 
代碼

|title = [[魔法少女什么的已经够了啦。|<span style="display: inline-block; color: #5DB7E8; font-size: 0.85em; line-height: 1.1em; text-align: left; width: 7em;"><span style="color: #EE86A7;">魔法少女</span>什么的<br/>已经够了啦。</span>]]

|titlestyle = background: #FFF;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #EE86A6 #F19EB8 #5CB7E8 #7DC5EB #94F1E0 #A9F4E6 
文字  black00 
代碼 |groupstyle = background: repeating-linear-gradient(135deg, #EE86A6 0 5px, #F19EB8 6px 11px);
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FDFDFD 
文字  #0645AD 
標題設計
魔法少女什麼的
已經夠了啦。

🖌️ 依據官網：アニメ『魔法少女なんてもういいですから。』公式サイト

T:催眠麥克風

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #879CB2 #FFF000 
文字  black00 
代碼

|title = [[催眠麦克风]]

|titlestyle = background: radial-gradient(circle, #FFF 40%, #FFF4), repeating-linear-gradient(135deg, #879CB2 0 2px, transparent 3px 5px), repeating-linear-gradient(45deg, #879CB2 0 2px, transparent 3px 5px);

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #333000 
文字  white00 
代碼 |groupstyle = background: #333; color: white;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #EBEBEB #F5F5F5 
文字  #0645AD 
標題設計
催眠麥克風

🖌️ 依據官網：音楽原作キャラクターラッププロジェクト『ヒプノシスマイク』オフィシャルサイト

T:NHK

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFDA67 #FFFFC3 #FFF000 
文字  #F90000 
代碼

|title = {{coloredlink|#F90|欢迎加入NHK！|欢迎加入NHK！（{{lj|NHKにようこそ！}}）}}

|titlestyle = background: repeating-linear-gradient(#FFF 0 1px, #FFDA6788 2px 7px, #FFFFC388 8px 18px, #FFDA6788 19px 21px) 2px 2px, repeating-linear-gradient(to right, #FFF 0 1px, #FFDA6788 2px 7px, #FFFFC388 8px 18px, #FFDA6788 19px 21px) 2px 2px; color: #F90; -webkit-text-fill-color: #F90; {{文字描边|#FFF}};

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFF000 
文字  #F90000 
代碼 |groupstyle = background: #FFF; border: #F90 1px solid; color: #F90;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #FFF7EB #FDFDFD 
文字  #0645AD 
標題設計
歡迎加入NHK！（NHKにようこそ！）

🖌️ 依據官網：N・H・Kにようこそ！

T:漫畫家與助手

配色
標題（title） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #0E7EBA #2898D4 
文字  #FFF000 
代碼

|title = {{coloredlink|#FFF|漫画家与助手}}

|titlestyle = background: radial-gradient(circle at center, #0E7EBA 2px, transparent 3px) 6px 5px/9px 9px, radial-gradient(circle at center, #0E7EBA 2px, transparent 3px) 10.5px 9.5px/9px 9px, #2898D4; color: #FFF; -webkit-text-fill-color: #FFF;

分組（group） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #108CCF #CCE1FB 
文字  #FFF000 
代碼 |groupstyle = background: #108CCF; color: #FFF;
其他（other） 圖例
The quick brown fox jumps over the lazy dog. 海內存知己，天涯若比鄰。
背景  #EFF6FC #FDFDFD 
文字  #0645AD 
標題設計
漫畫家與助手

🖌️ 依據動畫官網：アニメ「マンガ家さんとアシスタントさんと」

取自「https://moegirl.icu/index.php?title=User:GuoPC/Navbox_design&oldid=7451032」