算命 发表于 2017-7-10 17:42:52

分享一个小demo

本帖最后由 算命 于 2017-7-10 17:42 编辑 <br /><br /><meta charset="utf-8">

<style type="text/css">
    .qi {
      width: 350px;
      height: 400px;
      background-color: #CD2626;
      margin: 40px auto;
      -webkit-box-shadow: 0 0 16px #454345;
      -moz-box-shadow: 0 0 16px #454345;
      box-shadow: 0 0 16px #454345;
      font-family: "Poiret One", "微软雅黑 Light", sans-serif;
      font-width: 300;
      border-radius: 5px;
    }

    .qi-a {
      height: 120px;
      background-color: #B22222;
      text-align: center;
      overflow: hidden;
      border-bottom-left-radius: 40px;
      border-bottom-right-radius: 40px;
      box-shadow: 0 0 10px 0px #454345;
    }

    .qi-a img{
      vertical-align: middle;
      width: 85px;
      height: 85px;
      margin: 17px;
      border-radius: 50%;
    }
    .qi-b {
      text-align: center;
    }
</style>

<div class="qi">
    <div class="qi-a">
      <img src="http://www.qqmcc.net/data/attachment/album/201707/07/174744s72tfsltf9f139wl.jpg"> <!-- 这里放头像链接 -->
    </div>
    <div class="qi-b">
      <span style="display: block; margin-top: 60px;">
            <span style="color: #EEEE00;font-size: 16px;letter-spacing: 1px;">秦始皇觉得你的帖子很赞</span><br>
            <span style="color: #ffffff;font-size: 90px;font-weight: bold">6.66</span>
      </span>
    </div>
</div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="//music.163.com/outchain/player?type=2&id=34229234&auto=1&height=66"></iframe>

算命 发表于 2017-7-10 17:42:53

本帖最后由 算命 于 2017-7-10 17:39 编辑

// 使用请先勾选附加选项的H码,再点击右上角纯文本   代码附注释不懂留言

<style type="text/css">
    .qi {
      width: 350px;
      height: 400px;
      background-color: #CD2626;
      margin: 40px auto;
      -webkit-box-shadow: 0 0 16px #454345;
      -moz-box-shadow: 0 0 16px #454345;
      box-shadow: 0 0 16px #454345;
      font-family: "Poiret One", "微软雅黑 Light", sans-serif;
      font-width: 300;
      border-radius: 5px;
    }

    .qi-a {
      height: 120px;
      background-color: #B22222;
      text-align: center;
      overflow: hidden;
      border-bottom-left-radius: 40px;
      border-bottom-right-radius: 40px;
      box-shadow: 0 0 10px 0px #454345;
    }

    .qi-a img{
      vertical-align: middle;
      width: 85px;
      height: 85px;
      margin: 17px;
      border-radius: 50%;
    }
    .qi-b {
      text-align: center;
    }
</style>

<div class="qi">
    <div class="qi-a">
      <img src="http://www.qqmcc.net/data/attachment/album/201707/07/174744s72tfsltf9f139wl.jpg"> <!-- 这里放头像链接 -->
    </div>
    <div class="qi-b">
      <span style="display: block; margin-top: 60px;">
            <span style="color: #EEEE00;font-size: 16px;letter-spacing: 1px;">秦始皇觉得你的帖子很赞</span><br>
            <span style="color: #ffffff;font-size: 90px;font-weight: bold">6.66</span>
      </span>
    </div>
</div>

QQmcc-如初 发表于 2017-7-10 17:51:18

本帖最后由 QQmcc-如初 于 2017-7-10 17:52 编辑 <br /><br />
<style type="text/css">
    .qi {
      width: 350px;
      height: 400px;
      background-color: #CD2626;
      margin: 40px auto;
      -webkit-box-shadow: 0 0 16px #454345;
      -moz-box-shadow: 0 0 16px #454345;
      box-shadow: 0 0 16px #454345;
      font-family: "Poiret One", "微软雅黑 Light", sans-serif;
      font-width: 300;
      border-radius: 5px;
    }

    .qi-a {
      height: 120px;
      background-color: #B22222;
      text-align: center;
      overflow: hidden;
      border-bottom-left-radius: 40px;
      border-bottom-right-radius: 40px;
      box-shadow: 0 0 10px 0px #454345;
    }

    .qi-a img{
      vertical-align: middle;
      width: 85px;
      height: 85px;
      margin: 17px;
      border-radius: 50%;
    }
    .qi-b {
      text-align: center;
    }
</style>

<div class="qi">
    <div class="qi-a">
      <img src="http://www.qqmcc.net/data/attachment/album/201704/14/192446fq5q1tbxiwqz01xi.jpg"> <!-- 这里放头像链接 -->
    </div>
    <div class="qi-b">
      <span style="display: block; margin-top: 60px;">
            <span style="color: #EEEE00;font-size: 16px;letter-spacing: 1px;">比心 送给你</span><br>
            <span style="color: #ffffff;font-size: 90px;font-weight: bold">5.20</span>
      </span>
    </div>
</div>

五月十二 发表于 2017-7-10 18:12:26

这个好看啊。   厉害了

爱你痛彻我心扉 发表于 2017-7-10 19:22:22

厉害了

QQmcc-玫瑰 发表于 2017-7-14 14:54:40

你是前端      
页: [1]
查看完整版本: 分享一个小demo