首页技术文章详细

如何用拼图(pintuer)框架写个人中心
  • 快审
  • 推荐

贵州掌上导航2019-11-29 09:55:19 29

拼图框架(http://www.pintuer.com/)

首先,先查看我们所需要编辑的页面,再用QQ截图工具进行布局分析。如下图:

用截图工具进行布局分析:

然后我们开始写代码。代码如下:

用户可自行引入拼图js和css;核心代码如下:

<body style="background: #f2f4f5;">

<!--

        作者:1533539391@qq.com

        时间:2019-11-28

        描述:顶部导航条

        -->

<div class="navbar padding-big layout fixed-top bg-white text-center text-white text-big" style="z-index: 101;background:#ff4090">

        个人中心

      </div>

      <!--

          作者:1533539391@qq.com

          时间:2019-11-28

          描述:头像页

          -->

        <div class="navbar padding-big" style="position: relative;margin-top: 60px;background:#ff4090 ;display: flex;">

    <img src="../static/img/logo.jpg" width="60" height="60" class="radius-circle" />

        <div class="right margin-small-left">

        <p class="text-large text-white" style="height: 36px;line-height: 36px;">清茶</p>

        <div class="">

        <span class="icon-refresh text-white">更新</span>

        </div>

        </div>

        <img src="../static/img/titlebg.png" class="bg-title"/>

        </div>

        <!--

        作者:1533539391@qq.com

        时间:2019-11-28

        描述:下方页

        -->

        <div class="container padding-big-top" >

        <div class="items  radius-big" style="background: #ffffff;">

        <div class="item border-bottom padding-big-left padding-small-top padding-small-bottom">

        我的服务

        </div>

        <div class="item padding-big border-bottom">

        <span class="icon-file-text-o text-big margin-small-right"></span>我的购买订单 <span class="icon-angle-right text-big float-right"></span>

        </div>

        <div class="item padding-big">

        <span class="icon-user margin-small-right text-big"></span>我的邀请人<span class="icon-angle-right text-big float-right"></span>

        </div>

        </div>

        </div>

<p class="text-center margin-big-top" style="color:#d2d2d2;">版本号:&nbsp;1.5.3</p>

<div class="service radius-circle padding-small">

<img src="../static/img/sever.png" class="radius-circle"/>

</div>

</body>
//大家可自己进入拼图官网详细查看当前框架的各种特征

//我会在后期持续更新首页及其他页面,希望大家多多关注

快审推荐

发表评论

  • * 评论内容:
  •  

精彩评论

  • 无任何评论信息!