完成一个小卡片

来源：互联网发布：mac os x10.8 iso下载编辑：程序博客网时间：2024/04/28 09:01

结果图
主页面代码

<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>>

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

阅读全文

0 0