全站通知:

拼图

阅读

    

2023-02-08更新

    

最新编辑:六号技师麻某

阅读:

  

更新日期:2023-02-08

  

最新编辑:六号技师麻某

来自bilibili游戏中心 - WIKI
跳到导航 跳到搜索
页面贡献者 :
顾小满real
六号技师麻某
丨说明
  • 通过相对定位和绝对定位组合各种图片素材以达到游戏中实际的UI效果的方式
  • 对于图鉴内容较多的Wiki,不再需要逐一制作图片,大幅减少制图同学的工作量
  • 样例代码需要根据实际素材的变化进行调整大小,调整位置和增加层级,需要对定位和层级有一定的了解
  • 通过复制粘贴不能直接达到想要的效果,需要自行进行多次练习调整
丨示例
拼图教程1.png


丨参考代码
<!-- 背景 -->  <div class="ping1" style="">[[文件:pintu-bg2.png|116px|link=]]

<!-- 人物 --> <div class="ping2" style="left:-65px;bottom:-30px">[[文件:li_c{{{8|}}}_00_s.png|240px|link=]]</div>

<!-- 属性 -->  <div class="ping2" style="left:1px;top:30px">[[文件:{{{5|}}}.png|26px|link=]]</div>

<!-- 属性 -->  <div class="ping2" style="left:1px;top:58px">[[文件:{{{4|}}}.png|26px|link=]]</div>

<!-- 属性 -->  <div class="ping2" style="left:1px;top:88px">[[文件:爆裂阶段-{{{9|}}}.png|22px|link=]]</div>

<!-- 底部小蒙板 -->   <div class="ping2" style="left:0px;bottom:10px">[[文件:蒙版1.png|116px|link=]]</div>

<!-- 属性 -->   <div class="ping2" style="left:60px;bottom:5px">[[文件:{{{6|}}}{{{3|}}}.png|55px|link=]]</div>

<!-- 底边 -->  <div class="ping2" style="left:0px;bottom:0px">[[文件:{{{3|}}}底边1.png|116px|link=]]</div>

<!-- 底边 -->  <div class="ping2" style="left:0px;bottom:15px">[[文件:pt{{{3|}}}.png|50px|link=]]</div>

<!-- 名字 -->   <div style="position:absolute;right:2px;bottom:3px;width:100%;text-align:right;><font style="color:#fff;font-size:15px;font-weight:bold;text-shadow:2px 2px 2px #000">{{{2|}}}</font></div>

<!--整面大蒙板 -->  <div style="position: absolute;bottom:5px">[[文件:蒙版.png|link={{{2|}}}]]</div>
</div>