完成一个小卡片

主页面代码

<div class="yskp" style="margin-left: 100px;">
            <table >
                <tr style="height: 168px;">
                    <td style="width: 192px;">
                        <div class="hosName">医院</div>
                        <div class="patientName">医生姓名</div>
                        <div class="patientIntr">医生介绍 / 标签 医生介绍 / 标签 医生介绍 / 标签</div>
                        <div class="depat">
                        <img src="../../img/科室.png" style="vertical-align:text-top;">
                        <span style="margin-left: 4px;">科室</span>
                        </div>
                        <div class="pro" >
                            <img src="../../img/职称.png" style="vertical-align:text-top;" /></span><span style="margin-left: 10px;">职称</span>
                        </div>
                    </td>
                    <td style="width: 156px;">
                        <img src="../../img/医生默认头像.png" alt="..." class="img-circle">

                    </td>
                </tr>
                <tr style="background: #F7F7F7; height: 46px;">
                    <td style="width:168px;">
                        <form>
                            <input disabled="disabled" value="4.5" type="number" class="rating" min=0 max=5 step=0.1 data-size="xxs" >
                        </form>


                    </td>
                    <td>
                        <input type="button" class="btn-kp"  value="小按钮" style="margin-left: 25px;" />
                        <input type="button" class="btn-kp"  value="小按钮" />
                    </td>
                </tr>
            </table>
        </div>

css内容

.yskp{
    width: 350px;
    height: 216px;
    background-color: #FFFFFF ;
    border: 1px solid #E6E6E6;
    font-family: MicrosoftYaHei;

    color: #73879C;
    letter-spacing: 0;
}
.btn-kp{
    margin-left: 10px;
    width:48px ;height: 22px;
    background: #00BC9C;
    border: 1px solid #00AD91;
    border-radius: 4px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0;
}
.hosName{
    margin-left: 10px;
    margin-top: 8px;

    font-size: 16px;

}
.patientName{
    margin-left: 20px;
    margin-top: 14px;

    font-size: 18px;

}
.patientIntr{
    margin-left: 20px;
    margin-top: 6px;
    font-size: 12px;
    width: 173px;
    height: 32px;
}
.depat{
    margin-top: 16px;
    margin-left: 20px;
}
.pro{
    margin-left: 20px;
    margin-top: 2px;
}

使用star-rating实现星星评分项，其中对其js和css文件进行修改达到自己想要的效果，如下是引用文件：

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" href="../../css/star/star-rating.css" />

  <script type="text/javascript" src="../../js/star-rating./script>




----->
其中所遇问题
 1. icon寻找：[icon网址](http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.1.2d672ab2oDwpkc)
 2.文字与图片不能在同一水平线上：vertical-align:text-top;
---


pt>>

1. 星星评分在经过doT.js数据渲染之后无法显示，最后另择他法