本人在用的样式
文章里面出现的一些标签需要修改的属性可以在这里查找点击
<!--简介框架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>
转载时请保留版权信息孤独木木制作
