B站直播简介——孤独木木的简介

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

本人在用的样式

B站直播简介——孤独木木的简介

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

    <!--简介框架1193px*300px-->
    <div style="width:1193px; height:300px; overflow:hidden; position:absolute; top:-80px; left:-20px; z-index:1;">
        <!--第一个展示的主页显示页-->
        <div style="width:1193px; height:300px; overflow:hidden;" id="mumu_1">
            <span style="display:block; width:1193px; height:300px; position:absolute; top:0px; left:0px; overflow:hidden; background:#FF9999; color:#FFF; font-family:行楷;">
                <!--在框架上的阴影层-->
                <span style="display:block; width:1150px; height:275px; box-shadow:1px 1px 25px #CCCCCC; position:absolute; top:10px; left:14px; border-radius:10px; background:rgba(153, 153, 102, 0.28);"></span>

                <!--四个显示的菱形的图案-->
                <!--如果标题的字数超过时请更改这个的width和height的像素必要时更改transform来改变旋转的弧度-->
                <!--这里面标签是不能写东西的这个只是用来装饰的-->
                <!--border是边框   3px  是边框的宽度  solid   是边框显示为实线   #FFF 是边框的颜色-->
                <!--主播简介-->
                <span style="display:block; width:60px; height:60px; position:absolute; top:40px; left:30px; border:3px solid #FFF;"></span>
                <span style="display:block; width:60px; height:60px; position:absolute; top:40px; left:30px; border:3px solid #FFF;transform:rotate(44deg)"></span>
                <!--直播内容-->
                <span style="display:block; width:60px; height:60px; position:absolute; top:190px; left:30px; border:3px solid #FFF;"></span>
                <span style="display:block; width:60px; height:60px; position:absolute; top:190px; left:30px; border:3px solid #FFF;transform:rotate(44deg)"></span>
                <!--直播时间-->
                <span style="display:block; width:60px; height:60px; position:absolute; top:40px; left:485px; border:3px solid #FFF;"></span>
                <span style="display:block; width:60px; height:60px; position:absolute; top:40px; left:485px; border:3px solid #FFF;transform:rotate(44deg)"></span>
                <!--勾搭方式-->
                <span style="display:block; width:60px; height:60px; position:absolute; top:190px; left:485px; border:3px solid #FFF;"></span>
                <span style="display:block; width:60px; height:60px; position:absolute; top:190px; left:485px; border:3px solid #FFF;transform:rotate(44deg)"></span>

            </span>


            <!--第一页显示的内容-->
            <span style="display:block; width:1193px; height:300px; position:absolute; top:0px; left:0px; overflow:hidden; font-size:15px; font-family:行楷;color:#FFF; font-weight:bold; z-index:1;">
                <!--左边展示的标题-->
                <span style="display:block; width:120px; height:100%; overflow:hidden; float:left;">
                    <!--标题的字数限制在4个-->
                    <!--如果要超出的字数限制请更改上面的四个显示的菱形的图案-->
                    <span style="font-size:17px;display:block; margin:48px 0px 0px 45px; width:50px; color:#FFF;">主播简介</span>
                    <span style="font-size:17px;display:block; margin:101px 0px 0px 45px; width:50px; color:#FFF;">直播内容</span>
                </span>
                <!--左边展示的内容-->
                <span style="display:block;width:370px; height:100%;overflow:hidden;float:left;">
                    <!--主播简介-->
                    <!--为了美化行数限制在5行这个可以和右边的对称-->
                    <span style="display:block; margin-top:25px;">大神 * 木木</span>
                    <span style="display:block; margin-left:48px;">UP是一个前端的开发人员</span>
                    <span style="display:block; margin-left:48px;">近期比较忙简介写的慢没办法</span>
                    <span style="display:block; margin-left:48px;">经常性的放歌 但是晚上一定会开屏直播的</span>
                    <span style="display:block; margin-left:48px;">本人很和谐的禁止调戏 ^_^</span>
                    <!--直播内容-->
                    <!--为了美化行数限制在4行这个可以和右边的对称-->
                    <span style="display:block; margin-top:30px;">简介 * 木木</span>
                    <span style="display:block; margin-left:48px;">平时会直播写简介的</span>
                    <span style="display:block; margin-left:48px;">会玩游戏的好玩的给推荐</span>
                    <span style="display:block; margin-left:48px;">我是手残党各位大佬带我超神</span>
                </span>
                <!--中间的展示标题-->
                <span style="display:block; width:120px; height:100%; overflow:hidden; float:left;">
                    <!--标题的字数限制在4个-->
                    <!--如果要超出的字数限制请更改上面的四个显示的菱形的图案-->
                    <span style="font-size:17px;display:block; margin:48px 0px 0px 10px; width:50px; color:#FFF;">直播时间</span>
                    <span style="font-size:17px;display:block; margin:101px 0px 0px 10px; width:50px; color:#FFF;">勾搭方式</span>
                </span>
                <!--中间的展示内容-->
                <span style="display:block; width:330px; height:100%; overflow:hidden; float:left;">
                    <!--为了美化行数限制在5行这个可以和左边的对称-->
                    <span style="display:block; margin-top:25px;">手残 * 木木</span>
                    <span style="display:block; margin-left:48px;">时间对于我来说无限的时间</span>
                    <span style="display:block; margin-left:48px;">想什么时候直播都可以哈哈</span>
                    <span style="display:block; margin-left:48px;">晚上10点到12点一定在</span>
                    <span style="display:block; margin-left:48px;">不在就是有事去了 谅解(๑•̀ω•́๑)</span>
                    <!--为了美化行数限制在4行这个可以和左边的对称-->
                    <span style="display:block; margin-top:30px;">小受 * 木木</span>
                    <span style="display:block; margin-left:48px;">可以找我写简介哟 免费代码写简介</span>
                    <span style="display:block; margin-left:48px;">可以私聊我本人QQ:<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes" title="点击直接加好友" style="color:#FFF;">157604558</a></span>
                    <span style="display:block; margin-left:48px;">玩耍QQ群:<a target="_blank" href="http://jq.qq.com/?_wv=1027&k=2IM3m9k" title="点击直接加Q群" style="color:#FFF;">169577454</a></span>
                    <span style="display:block; margin-left:48px;">微博:<a href="http://weibo.com/5464837102" style="color:#FFF;" title="点击关注">独孤Q_Q</a></span>
                    <span style="display:block; margin-left:48px; font-size:13px;">STEAM ID:孤独木木</span>
                </span>
                <!--右边的展示二维码投食区-->
                <span style="display:block; width:250px; height:100%;float:left;">

                    <span style="display:block; width:200px; height:222px;margin-top:25px; box-shadow: 1px 1px 25px #CCCCCC;">

                        <span style="display:block; text-align:center; background: #999; border-top-left-radius:5px; border-top-right-radius:5px;">↓扫码投食↓</span>
                        <span style="display:block;"><img src="http://www.blibii.top/images/1.png" style="width:200px; height:200px;border-bottom-left-radius:5px; border-bottom-right-radius:5px;" /></span>
                    </span>
                    <span style="display:block; width:200px; text-align:center;">投食请带上ID</span>

                </span>

            </span>
        </div>
        <!--第二的展示页面-->
        <div style="width:1193px; height:300px; overflow:hidden; background:#CCFFFF;" id="mumu_2">






        </div>
        <!--第三的展示页面-->
        <div style="width:1193px; height:300px; overflow:hidden; background:#33CC33;" id="mumu_3">






        </div>






    </div>
    <!--最右边的切换页面的链接按钮-->
    <span style="display: block; position:absolute; top:60px; right:-17px; width:20px; z-index:1;">
        <!--title 是鼠标悬停是显示的一个提示性文字 可以用来装B-->
        <a href="http://live.bilibili.com/49784#player_object" target="_self" title="返回直播" style="display:block; width:20px; height:5px; background:#FFFFCC; border-radius:2px;"></a>
        <a href="http://live.bilibili.com/49784#mumu_2" target="_self" title="另一个世界" style="display:block; width:20px; height:5px; background:#FFCCCC; margin-top:10px; border-radius:2px;"></a>
        <a href="http://live.bilibili.com/49784#mumu_3" target="_self" title="地狱的时间" style="display:block; width:20px; height:5px; background:#99CC66;margin-top:10px; border-radius:2px;"></a>
        <a href="http://live.bilibili.com/49784#mumu_1" target="_self" title="简介首页" style="display:block; width:20px; height:5px; background:#99CCFF;margin-top:10px; border-radius:2px;"></a>

    </span>

    <!--版权所有者信息-->
    <span style="position:absolute; bottom:-20px; left:-20px; font-size:20px; background:#3B7FAD; border-radius:0px 3px 0px 0px;z-index:1"><a href="http://live.bilibili.com/49784" title="制作人员" target="_blank" style="color:#FFF;">孤独木木制作</a></span>

    <!--把简介撑开的主体-->
    <p style="display:block; width:1px; height:200px;">.</p>

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

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

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