用戶:GuoPC/Navbox design
存放GuoPC完全或部分設計拿來練手的一些Navbox。具體實現寫法可查看各章節中間的代碼,或者點擊各二級標題轉至對應模板頁面查看。
T:紀念碑谷
圖例 | ||
背景 | black | #433A35 #4F7B70 #8F886E #B0B191 #E0BE99 #FCC29C #FECC9B|
文字 | #FFF | |
代碼 | |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; | |
圖例 | ||
背景 | black | |
文字 | #FFF | |
代碼 | |groupstyle = background: black; | |
圖例 | ||
背景 | black | |
文字 | #FFF |
|
🖌️ 依據遊戲截圖:File:Monument Valley VG.jpg
T:愛殺寶貝
圖例 | ||
背景 | #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; | |
圖例 | ||
背景 | #EFC3FF #FFDDFF | |
文字 | black | |
代碼 | |groupstyle = background-color:#EFC3FF; | |
圖例 | ||
背景 | #FFF0FF #FDFDFD | |
文字 | #0645AD |
|
🖌️ 依據動畫版Logo
T:釣球
圖例 | ||
背景 | #66B9D8 #DDEAF2 | |
文字 | #2085AB | |
代碼 | |title = {{coloredlink|#3EA2CC|钓球|钓球({{lj|つり球}})}} |titlestyle = background: #DDEAF2; border-top: #66B9D8 2px solid; color: #2085AB; | |
圖例 | ||
背景 | #7ECFED #9CD9F0 | |
文字 | #615734 | |
代碼 | |groupstyle = background:#7ECFED;color:#615734; | |
圖例 | ||
背景 | #E0EDF5 #FDFDFD | |
文字 | #0645AD |
|
🖌️ 依據官網:TVアニメ「つり球」
T:HELLO WORLD
圖例 | ||
背景 | #FFF | #D0DCEC #E6C6AD #6E6A81 #000|
文字 | #5F5F5F #FFF | |
代碼 | |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; | |
圖例 | ||
背景 | #FFF | #5F5F5F|
文字 | #5F5F5F #FFF | |
代碼 | |groupstyle = background: #FFF; color: rgb(95, 95, 95); | |
圖例 | ||
背景 | #FDFDFD | |
文字 | #0645AD |
|
🖌️ 依據官網:オリジナル劇場アニメ『HELLO WORLD』公式サイト
T:SAGA PLANETS
圖例 | ||
背景 | #FF7AB0 | |
文字 | #FFF | |
代碼 | |title = [[File:SAGA Planets icon.png|70px|alt=SAGA PLANETS|link=SAGA PLANETS]] |titlestyle = background: #FF7AB0; color: #FFF; | |
圖例 | ||
背景 | #F5CB74 #F4E6B5 | |
文字 | #FFF | |
代碼 | |groupstyle = background: repeating-linear-gradient(135deg, #F5CB74 0px, #F5CB74 6px, #F4E6B5 7px, #F4E6B5 13px); width: 3em; | |
圖例 | ||
背景 | #3AB4DD #6FC8E4 | |
文字 | #FFF |
|
🖌️ 依據官網:SAGA PLANETS OFFICIAL HOMEPAGE
T:慎重勇者
圖例 | ||
背景 | #BD030C | |
文字 | #FFF | |
代碼 | |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; | |
圖例 | ||
背景 | #CEBA85 | |
文字 | black | |
代碼 | |groupstyle = background: #CEBA85; | |
圖例 | ||
背景 | #F5F1E7 #FDFDFD | |
文字 | #0645AD |
|
🖌️ 依據官網:『この勇者が俺TUEEEくせに慎重すぎる』土日月 特設サイト|カドカワBOOKS|KADOKAWA
T:SCHOOLGIRL STRIKERS
圖例 | ||
背景 | #FFF | |
文字 | #444 | |
代碼 | |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; | |
圖例 | ||
背景 | #FFF | #FF6B53|
文字 | #444 | |
代碼 | |groupstyle = background: #FFF; color: #444; border: #FF6B53 2px solid; border-radius: 5px; | |
圖例 | ||
背景 | #FFEADB | |
文字 | #444 |
|
🖌️ 依據官網:スクールガールストライカーズ2 【スクスト2】 | SQUARE ENIX - 公式サイト
T:惡魔之謎
圖例 | ||
背景 | #D50066 #000 | |
文字 | #FFF | |
代碼 | |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; | |
圖例 | ||
背景 | #D50066 #000 | |
文字 | #FFF | |
代碼 | |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; | |
圖例 | ||
背景 | #FFE9F3 #FDFDFD | |
文字 | #0645AD |
|
🖌️ 依據官網:アニメ「悪魔のリドル」公式サイト(原始頁面:アニメ「悪魔のリドル」公式サイト)
T:動畫同好會
圖例 | ||
背景 | #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; | |
圖例 | ||
背景 | #F2A2B9 #FFF | |
文字 | #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; | |
圖例 | ||
背景 | #FCE9EE #FDFDFD | |
文字 | #0645AD |
|
🖌️ 依據官網:アニメガタリ || TOHOシネマズ(原始頁面:アニメガタリ || TOHOシネマズ)
T:男子高中生的日常
圖例 | ||
背景 | #36F | #FFF|
文字 | #000 | #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; | |
圖例 | ||
背景 | #69F | #9CF|
文字 | black | |
代碼 | |groupstyle = background: #69F; | |
圖例 | ||
背景 | #FDFDFD | |
文字 | #0645AD |
|
🖌️ 依據官網:TVアニメ「男子高校生の日常」公式HP
T:魔法少女什麼的已經夠了啦
圖例 | ||
背景 | #FFF | |
文字 | #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; | |
圖例 | ||
背景 | #EE86A6 #F19EB8 #5CB7E8 #7DC5EB #94F1E0 #A9F4E6 | |
文字 | black | |
代碼 | |groupstyle = background: repeating-linear-gradient(135deg, #EE86A6 0 5px, #F19EB8 6px 11px); | |
圖例 | ||
背景 | #FDFDFD | |
文字 | #0645AD |
|
🖌️ 依據官網:アニメ『魔法少女なんてもういいですから。』公式サイト
T:催眠麥克風
圖例 | ||
背景 | #879CB2 #FFF | |
文字 | black | |
代碼 | |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); | |
圖例 | ||
背景 | #333 | |
文字 | white | |
代碼 | |groupstyle = background: #333; color: white; | |
圖例 | ||
背景 | #EBEBEB #F5F5F5 | |
文字 | #0645AD |
|
🖌️ 依據官網:音楽原作キャラクターラッププロジェクト『ヒプノシスマイク』オフィシャルサイト
T:NHK
圖例 | ||
背景 | #FFDA67 #FFFFC3 #FFF | |
文字 | #F90 | |
代碼 | |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}}; | |
圖例 | ||
背景 | #FFF | |
文字 | #F90 | |
代碼 | |groupstyle = background: #FFF; border: #F90 1px solid; color: #F90; | |
圖例 | ||
背景 | #FFF7EB #FDFDFD | |
文字 | #0645AD |
|
🖌️ 依據官網:N・H・Kにようこそ!
T:漫畫家與助手
圖例 | ||
背景 | #0E7EBA #2898D4 | |
文字 | #FFF | |
代碼 | |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; | |
圖例 | ||
背景 | #108CCF #CCE1FB | |
文字 | #FFF | |
代碼 | |groupstyle = background: #108CCF; color: #FFF; | |
圖例 | ||
背景 | #EFF6FC #FDFDFD | |
文字 | #0645AD |
|
🖌️ 依據動畫官網:アニメ「マンガ家さんとアシスタントさんと」