<script src="js/jquery-latest.pack.js" type="text/javascript"></script> <!-- 封装好的评分js插件 -->
<script src="js/grade.js" type="text/javascript"></script> <!-- 初始化评分内容的js文件 -->
<body>
<div id="box">
<h4>我的评分</h4>
<div class="content">
<div id="myPoint">
<span><big>5</big><small>.0</small></span>
<div>
<img src="statics/star5.gif" />
<em>(一般)</em>
</div>
</div>
<div id="doPoint">
<p>请点击以下星级进行评分：我的评分=(故事+更新+文笔)/3</p>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<th>故事：</th>
<td><span class="star5" id="item1" v="5"><small>1</small><small>2</small><small>3</small><small>4</small><small>5</small><small>6</small><small>7</small><small>8</small><small>9</small><small>10</small></span></td>
<td><strong>5</strong> <em>(一般)</em></td>
</tr>
<tr>
<th>更新：</th>
<td><span class="star5" id="item2" v="5"><small>1</small><small>2</small><small>3</small><small>4</small><small>5</small><small>6</small><small>7</small><small>8</small><small>9</small><small>10</small></span></td>
<td><strong>5</strong> <em>(一般)</em></td>
</tr>
<tr>
<th>文笔：</th>
<td><span class="star5" id="item3" v="5"><small>1</small><small>2</small><small>3</small><small>4</small><small>5</small><small>6</small><small>7</small><small>8</small><small>9</small><small>10</small></span></td>
<td><strong>5</strong> <em>(一般)</em></td>
</tr>
</tbody>
</table>
</div>
<form id="form1" name="form1" action="" method="get">
<input id="pointV1" type="hidden" value="5" name="pointV1" />
<input id="pointV2" type="hidden" value="5" name="pointV2" />
<input id="pointV3" type="hidden" value="5" name="pointV3" />
<label>评论内容：<textarea id="content" name="content" rows="5" cols="50"></textarea></label>
<button type="submit">提交</button>
</form>
</div>
</div>
</body>
css代码：
BODY {
padding-right:0px;padding-left:0px;font-size:12px;background:#333;padding-bottom:40px;margin:0px;line-height:14px;padding-top:40px
}
FORM {
padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
UL {
padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
OL {
padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
H1 {
padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
H2 {
padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
H3 {
padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
H4 {
padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
H5 {
padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
H6 {
padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
P {
padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px
}
INPUT {
font-size:12px
}
textAREA {
font-size:12px
}
SELECT {
font-size:12px
}
BUTTON {
font-size:12px
}
IMG {
border-top-style:none;border-right-style:none;border-left-style:none;border-bottom-style:none
}
a{
color:#999;text-decoration:underline
}
#box {
border-right:#666 5px solid;border-top:#666 5px solid;background:#ccc;margin:0px auto;border-left:#666 5px solid;width:400px;border-bottom:#666 5px solid
}
#box H4 {
padding-right:10px;padding-left:10px;font-size:14px;background:#999;padding-bottom:0px;color:#fff;padding-top:8px;height:22px
}
#box .content {
padding-right:20px;padding-left:20px;padding-bottom:20px;padding-top:20px
}
ADDRESS {
display:block;margin:20px auto 0px;width:400px
}
#myPoint {
padding-right:0px;padding-left:0px;padding-bottom:15px;overflow:hidden;padding-top:0px;border-bottom:#ddd 1px solid;height:50px
}
#myPoint SPAN {
float:left;line-height:64px;font-family:Tahoma
}
#myPoint SPAN BIG {
font-weight:bold;font-size:60px
}
#myPoint SPAN SMALL {
font-size:30px
}
#myPoint DIV {
font-size:14px;float:left;margin:10px 0px 0px 10px;height:40px
}
#myPoint DIV IMG {
vertical-align:middle;margin-right:5px
}
#doPoint P {
padding-right:0px;padding-left:0px;padding-bottom:10px;padding-top:10px
}
#doPoint TR TD {
padding-right:5px;padding-left:5px;padding-bottom:3px;padding-top:3px
}
#doPoint TR TD IMG {
margin-top:5px
}
#doPoint TR TD STRONG {
font-size:14px;color:#f00
}
#doPoint SPAN {
display:block;background:url(../images/star_small.gif) no-repeat 2px 0px;width:120px;height:20px
}
#doPoint SPAN SMALL {
font-size:0px;float:left;overflow:hidden;width:12px;cursor:pointer;padding-top:20px;height:0px
}
#doPoint .star10 {
background:url(../images/star_small.gif) no-repeat 2px 0px
}
#doPoint .star9 {
background:url(../images/star_small.gif) no-repeat 2px -20px
}
#doPoint .star8 {
background:url(../images/star_small.gif) no-repeat 2px -40px
}
#doPoint .star7 {
background:url(../images/star_small.gif) no-repeat 2px -60px
}
#doPoint .star6 {
background:url(../images/star_small.gif) no-repeat 2px -80px
}
#doPoint .star5 {
background:url(../images/star_small.gif) no-repeat 2px -100px
}
#doPoint .star4 {
background:url(../images/star_small.gif) no-repeat 2px -120px
}
#doPoint .star3 {
background:url(../images/star_small.gif) no-repeat 2px -140px
}
#doPoint .star2 {
background:url(../images/star_small.gif) no-repeat 2px -160px
}
#doPoint .star1 {
background:url(../images/star_small.gif) no-repeat 2px -180px
}
FORM {
margin:15px 0px 0px
}
FORM LABEL {
display:block;margin:5px 0px
}
FORM textAREA {
width:350px
}
35.02 KB, 下载次数: 37
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |
