B站简介制作2017年第三版-465 -2018-08-11修改

样式代码 孤独木木 2年前 (2017-01-30) 1905次浏览 已收录 0个评论 扫描二维码


已经根据 B 站改版后对应的修改

B 站简介制作 2017 年第三版-465 -2018-08-11 修改
B 站简介制作 2017 年第三版-465 -2018-08-11 修改
B 站简介制作 2017 年第三版-465 -2018-08-11 修改
B 站简介制作 2017 年第三版-465 -2018-08-11 修改

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

   <div style="width: 100%; height: 230px; overflow: hidden;">
    <div style="width: 100%; height: 230px; margin: 0px; overflow: hidden; font-size: 20px; color: #ffffff; font-weight: 900; background: url('http://51tuku.cn/images/2017/01/30/eDLm.jpg') no-repeat 0px -593px; background-size: 100%;">
      <div id="mumu_1" style="width: 100%; height: 230px; overflow: hidden;">
        <div style="width: 200px; float: left; height: 230px; position: relative; margin-left: 1%;">
          <div style="width: 150px; height: 35px; line-height: 35px; text-align: center; border-radius: 5px; margin: 20px 0px 0px 0px; background: rgba(255, 102, 102, 0.7);">主播简介</div>
          <div style="width: 50px; float: right; height: 4px; background-color: rgba(0, 0, 0, 0.2); margin: -19px 0px 0px 0px;"> </div>
        </div>
        <div style="width: 4px; height: 230px; background-color: rgba(0, 0, 0, 0.2); margin: 6px 0px 0px 0px; border-radius: 2px; float: left;"> </div>
        <div style="width: 63%; height: 230px; float: left; overflow: hidden;">
          <div style="width: 50px; float: left; height: 230px;"> </div>
          <div style="width: calc( 100% - 50px ); float: left; height: 230px;">
            <div style="width: 100%; height: 215px; border-radius: 5px; background: rgba(51, 51, 51, 0.47); overflow: hidden; margin: 1% 0px 0px 0px;">
              <div style="width: calc( 100% + -30px); height: 230px; margin: 0px 0px 0px 49px; overflow: auto;">BiliBili2 年游戏 UP 主千葉型 DJ,专职游戏主播
                <br> 玩任何自己想玩 你们想看的游戏
                <br> B 站小霸王经常匿机,卡顿请刷新
                <br>会一直留在 b 站,希望大家多多支持~</div>
            </div>
          </div>
        </div>
        <div style="float: right; width: 150px; height: 230px; margin-right: 2%;">
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px; color: rgba(255, 102, 102, 0.78);">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_1" target="_self"> 主播简介 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/49784?visit_id=77ujljx1cq00#mumu_2" target="_self"> 直播内容 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_3" target="_self"> 直播时间 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_4" target="_self">联系方式 </a>
          </div>
        </div>
      </div>
      <div id="mumu_2" style="width: 100%; height: 230px; overflow: hidden;">
        <div style="width: 200px; float: left; height: 230px; position: relative; margin-left: 1%;">
          <div style="width: 150px; height: 35px; line-height: 35px; text-align: center; border-radius: 5px; margin: 20px 0px 0px 0px; background: rgba(255, 153, 102, 0.7);">直播内容</div>
          <div style="width: 50px; float: right; height: 4px; background-color: rgba(0, 0, 0, 0.2); margin: -19px 0px 0px 0px;"> </div>
        </div>
        <div style="width: 4px; height: 230px; background-color: rgba(0, 0, 0, 0.2); border-radius: 2px; float: left;"> </div>
        <div style="width: 63%; height: 230px; float: left; overflow: hidden;">
          <div style="width: 50px; float: left; height: 230px;"> </div>
          <div style="width: calc( 100% - 50px ); float: left; height: 230px;">
            <div style="width: 100%; height: 215px; border-radius: 5px; background: rgba(51, 51, 51, 0.47); overflow: hidden; margin: 8px 0px 0px 0px;">
              <div style="width: calc( 100% + -30px); height: 230px; margin: 0px 0px 0px 49px; overflow: auto;">Steam Origin Uplay 热门单机联机
                <br> Fate/Grand Order</div>
            </div>
          </div>
        </div>
        <div style="float: right; width: 150px; height: 230px; margin-right: 2%;">
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_1" target="_self">主播简介 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px; color: rgba(255, 153, 102, 0.7);">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_2" target="_self"> 直播内容 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/49784?visit_id=77ujljx1cq00#mumu_3" target="_self"> 直播时间 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_4" target="_self"> 联系方式 </a>
          </div>
        </div>
      </div>
      <div id="mumu_3" style="width: 100%; height: 230px; overflow: hidden;">
        <div style="width: 200px; float: left; height: 230px; position: relative; margin-left: 1%;">
          <div style="width: 150px; height: 35px; line-height: 35px; text-align: center; border-radius: 5px; margin: 20px 0px 0px 0px; background: rgba(176, 217, 107, 0.7);">直播时间</div>
          <div style="width: 50px; float: right; height: 4px; background-color: rgba(0, 0, 0, 0.2); margin: -19px 0px 0px 0px;"> </div>
        </div>
        <div style="width: 4px; height: 230px; background-color: rgba(0, 0, 0, 0.2); border-radius: 2px; float: left;"> </div>
        <div style="width: 63%; height: 230px; float: left; overflow: hidden;">
          <div style="width: 50px; float: left; height: 230px;"> </div>
          <div style="width: calc( 100% - 50px ); float: left; height: 230px;">
            <div style="width: 100%; height: 215px; border-radius: 5px; background: rgba(51, 51, 51, 0.47); overflow: hidden; margin: 8px 0px 0px 0px;">
              <div style="width: calc( 100% + -30px); height: 230px; margin: 0px 0px 0px 49px; overflow: auto;">一般是下午 2:00 至 5:00
                <br> 晚上 7:00 至 9:30
                <br> 早上起来就播(希望不赖床)
                <br> 如果有事会在群里或者前天直播说明</div>
            </div>
          </div>
        </div>
        <div style="float: right; width: 150px; height: 230px; margin-right: 2%;">
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_1" target="_self">主播简介 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_2" target="_self"> 直播内容 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px; color: rgba(176, 217, 107, 0.7);">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_3" target="_self"> 直播时间</a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/49784?visit_id=77ujljx1cq00#mumu_4" target="_self"> 联系方式 </a>
          </div>
        </div>
      </div>
      <div id="mumu_4" style="width: 100%; height: 230px; overflow: hidden;">
        <div style="width: 200px; float: left; height: 230px; position: relative; margin-left: 1%;">
          <div style="width: 150px; height: 35px; line-height: 35px; text-align: center; border-radius: 5px; margin: 20px 0px 0px 0px; background: rgba(175,220,224,0.7);">联系方式</div>
          <div style="width: 50px; float: right; height: 4px; background-color: rgba(0, 0, 0, 0.2); margin: -19px 0px 0px 0px;"> </div>
        </div>
        <div style="width: 4px; height: 230px; background-color: rgba(0, 0, 0, 0.2); margin: -8px 0px 0px 0px; border-radius: 2px; float: left;"> </div>
        <div style="width: 63%; height: 230px; float: left; overflow: hidden;">
          <div style="width: 50px; float: left; height: 230px;"> </div>
          <div style="width: calc( 100% - 50px ); float: left; height: 230px;">
            <div style="width: 100%; height: 215px; border-radius: 5px; background: rgba(51, 51, 51, 0.47); overflow: hidden; margin: 8px 0px 0px 0px;">
              <div style="width: calc( 100% + -30px);height: 230px;margin: 0px 0px 0px 49px;overflow: auto;">
                <div style="width: calc(100% - 210px);height: auto;float: left;">Fate/GO 交流群:
                  <a style="color: #ff6666;" title="点击链接加入群【Fate/GO 冠位咸鱼交流群】" href="https://jq.qq.com/?_wv=1027&k=44Ouhr2"
                    target="_blank">584042358</a>
                  <br> 其他游戏交流:
                  <a style="color: #ff6666;" title="点击链接加入群【秋名山车队】" href="https://jq.qq.com/?_wv=1027&k=44P02ge"
                    target="_blank">415425004</a>
                </div>
                <div style="width: 170px; height: 220px; float: right; margin-right: 28px;">
                  <div style="width: 170px; height: 25px; line-height: 25px; text-align: center; color: #ffffff; font-size: 20px;">扫码投食</div>
                  <div style="width: 170px; height: 170px; background: url('http://51tuku.cn/images/2017/01/30/lZyr.jpg') no-repeat -21px -16px; background-size: 127%; border-radius: 30px;"> </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="float: right; width: 150px; height: 230px; margin-right: 2%;">
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_1" target="_self"> 主播简介 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_2" target="_self"> 直播内容 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px;">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_3" target="_self"> 直播时间 </a>
          </div>
          <div style="width: 150px; line-height: 30px; height: 30px; text-align: center; border-radius: 10px; box-shadow: 1px 1px 10px  #FF6666; margin-top: 20px; color: rgba(175,220,224,0.7);">
            <a style="color: #ffffff; font-size: 19px; font-weight: bold; display: block; width: 150px; line-height: 30px; height: 30px;"
              href="https://live.bilibili.com/465#mumu_4" target="_self"> 联系方式 </a>
          </div>
        </div>
      </div>
      <span style="position: absolute; bottom: 0px; right: 0px; font-size: 14px; background: rgba(210, 216, 207, 0.43); border-radius: 3px 0px 0px 0px;">
        <a style="color: #cac4c6;" title="制作人员更多请关注 https://www.blibili.cn B 站简介制作" href="https://live.bilibili.com/49784" target="_blank">孤独木木制作</a>
      </span>
    </div>
  </div>

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

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

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