B站简介制作————多页跳转多边框

样式代码 孤独木木 8年前 (2016-06-10) 3388次浏览 已收录 0个评论 扫描二维码

B站简介制作————多页跳转多边框

文章里面出现的一些标签需要修改的属性可以在这里查找点击

<div style="width:1193px; height:300px; overflow:hidden; position:absolute; top:-60px; left:-20px;background:#5FA7CF;">
<div style="width:0px;height:0px;border-top:150px solid transparent ;border-bottom:150px solid transparent;border-left:190px solid #FF99CC; float:left;"></div>


<div style="width:0px; height:0px; border-top:150px solid transparent; border-bottom:150px solid transparent; border-right:190px solid #FF99CC; float:right;"></div>
</div>
<div style="width:1193px; height:300px; position:absolute; top:-60px; left:-20px; overflow:hidden; color:
#FFF; font-size:17px;">
<div style="width:190px; height:300px; float:left; overflow:hidden;">
<span style="display:block; background:rgba(255, 255, 0, 0.68); font-size:20px; margin:111px 0px 0px 25px; width:80px; text-align:center; border-radius:3px 3px 0px 0px;">主播</span>
<span style="display:block;background:rgba(255, 255, 0, 0.68);font-size:20px;margin:0px 0px 0px 25px;width:80px; text-align:center; border-radius:0px 0px 3px 3px;">资料</span>
</div>

<div style="width:813px;; height:300px; float:left; overflow:hidden; position:relative;">
<div style="width:810px; height:35px; box-shadow:0px 2px 3px #FAF1F3; border-radius:3px; margin-top:13px; border:1px solid #FAF1F3;">
<span style="display:block; float:left; width:205px; height:35px; line-height:35px; text-align:center; background:#DD708F;"><a href="http://live.bilibili.com/33182#mumu_js" target="_self" style="color:#FFF;">主播介绍</a></span>
<span style="display:block; float:left; width:200px; height:35px; line-height:35px; text-align:center; background:#37A5B6;"><a href="http://live.bilibili.com/33182#mumu_sj" target="_self" style="color:#FFF;">直播时间</a></span>
<span style="display:block; float:left; width:200px; height:35px; line-height:35px; text-align:center;background:#5DB0D8;"><a href="http://live.bilibili.com/33182#mumu_yx" target="_self" style="color:#FFF;">直播游戏</a></span>
<span style="display:block; float:left; width:205px; height:35px; line-height:35px; text-align:center;background:#2C8887;"><a href="http://live.bilibili.com/33182#mumu_lx" target="_self" style="color:#FFF;">联系方式</a></span>

</div>
<div style="width:810px;box-shadow:0px 2px 3px #FAF1F3; border-radius:3px; margin-top:14px;border:1px solid #FAF1F3; overflow:hidden;height:190px;">
<div style="810px; height:220px; overflow:hidden;" id="mumu_js">
<div style="width:810px; height:30px; line-height:30px; text-align:center; font-size:25px;">咱是那个有时候很二货的小五</div>
<div style="width:810px; height:30px; line-height:30px; text-align:center; font-size:25px;">我嘛,是个初三党,所以说</div>
<div style="width:810px; height:30px; line-height:30px; text-align:center; font-size:25px;">有些事情不能做的很好,抱歉</div>
<div style="width:810px; height:30px; line-height:30px; text-align:center; font-size:25px;">我还有几个好朋友,也是做直播的</div>
<div style="width:810px; height:30px; line-height:30px; text-align:center; font-size:25px;">比如,<a href="http://live.bilibili.com/70107" style="color:#FFF;">薛喵(超链接:http://live.bilibili.com/70107)</a></div>
<div style="width:810px; height:30px; line-height:30px; text-align:center; font-size:25px;"><a href="http://live.bilibili.com/67584" style="color:#FFF;">蠢洁(超链接:http://live.bilibili.com/67584)等等数不清的朋友</a></div>


</div>

<div style="810px; height:220px; overflow:hidden;" id="mumu_sj">

<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">可啪的是,空闲时间不多</div>
<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">所以开启查房模式</div>
<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">13:00~14:30(查房模式)</div>
<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">放假模式就是每天中午到晚上</div>
<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">12:00~18:00(放假模式)</div>

</div>

<div style="810px; height:220px; overflow:hidden;" id="mumu_yx">

<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">以MC为主要,然后呢</div>
<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">也会和别人开黑LOL和300</div>
<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">有时候也会玩玩小游戏和旧游戏</div>
<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">反正开心就好</div>

</div>

<div style="810px; height:220px; overflow:hidden;" id="mumu_lx">

<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">微博:<a href="http://www.weibo.com/u/2453413561" style="color:#FFF;">心已略略略的小五</a></div>
<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">Steam:LittleFive_clever</div>
<div style="width:810px; height:35px; line-height:35px; text-align:center; font-size:25px;">粉丝群:<a href="http://jq.qq.com/?_wv=1027&k=2D79Spf" style="color:#FFF;">196857335</a> 或 扫描→_→二维码</div>

</div>




</div>

</div>

<div style="width:190px; height:300px; float:right; overflow:hidden;">
<img class="alignnone size-full wp-image-708" src="http://www.blibili.top/wp-content/uploads/2016/07/xiaowujun.jpg" width="468" height="468" />



</div>


<span style="position:absolute; bottom:0px; left:51px; font-size:20px; background:#3B7FAD; border-radius:3px 3px 0px 0px;"><a href="http://live.bilibili.com/49784" title="制作人员" target="_blank" style="color:#FFF;">孤独木木制作</a></span>

</div>




<p style="width:1px; height:220px;">.</p>

转载时请保留版权信息孤独木木制作

喜欢 (2)
[15390816981]
分享 (0)

您必须 登录 才能发表评论!