如果你看到本段文字,说明该页面未正常加载全局JS,部分功能无法使用,请点击 刷新 重新加载页面。
如果打开页面显示缩略图创建出错,请点击刷新或页面右上WIKI功能中的刷新按钮清除页面缓存并刷新,如果还有问题,请多尝试几次。
全站通知:

用户:68091755

来自碧蓝航线WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

用户名:粉彩画_pastel
碧蓝航线WIKI编辑爱好者,鲁莽厨,喜欢构筑城堡一般精美而庞大的页面,不太喜欢使用模板
联系方式:B站主页
变迁的记忆:着迷网主页(旧)
不变的记忆:CP24的像素绘图

参与完成的一些作品
鲁莽(启蒙页面)2018.10.8
TV动画合集(排版思想的萌芽)2019.10
碧蓝航线Crosswave(字数最多的子页面系统、改进型目录)
游戏周边汇总(flex布局全面应用、手机端适配)2020.11.24
BWIKI图文排版进阶心得(为熟练编辑人员撰写的排版指南)2020.12.13
大型作战定位布点式地图(扬长避短、浏览器适配、纯CSS多样化应用)2021.1.29
WIKI重要页面巡查树(ul和li组合的树状结构)2021.3.12
网络广播节目(grid布局、指向性折叠全面应用)2021.5.18
量产型敌舰图鉴(筛选功能和模板应用,初学者页面)2021.6.30

量产型敌舰更新计划:狂风、埃米尔、阿尔及利亚、布列塔尼、贝亚恩、扎拉、朱萨诺 因活动未复刻,无法获取图片;阳炎、马汉 因不明原因无法正常合成图片;最上 因命名规律未知导致无法定位图片位置。
周边汇总更新计划:WACCA、7dream.com


大型作战定位布点式地图源代码繁杂的问题较为突出,有时候连自己也会记不清页面的结构,故做一些笔记。
底层地图:用了轮播图模板,注意这里需要设置position为relative。
地图切换:地图切换的本质是将轮播图的底部指示器移动到预先准备好的表格中。用CSS构建一个“main-hi-sidebar”,同样用绝对定位固定在地图一侧。
上层点位:基本思路是运用绝对定位(position:absolute)将标记点放置在轮播图上面。用类和id对标记点命名,在CSS中用伪类(before、after)为点位标注号码(如14C、8A等)。
动画效果:display:block实现的矩形点,用border-radius将其变为圆形。用hover伪类让鼠标移过标记点时放大,填充内部样式。
点位控制台:用指向性折叠将每个区域、每个点位包裹起来,将折叠按钮安置在预先准备好的表格中。


添加点位:

<div class="btn map-point plateA" id="northwest-NA" style="left:?%;top:?%">
<div class="content">
<div class="content-over">
内容
</div>
</div>
</div>