当前位置:首页 > 帮助教程 > 内容列表

使用css修改企业网站模板中的反馈表单风格

点击次数:更新时间:2010-12-04 10:12:12【打印】【关闭】

BEES企业网站管理系统可以自定义表单,同时还可以使用CSS对表单进行美化

通过后台配置输出设置好表单后,在浏览页面的时候右键查看源代码可以找到输出的表单html

默认表单的html如下:

<form onsubmit="return check_form();" method="post" name="form_form" class="form_form" action="/plus/form.php">

<input type="hidden" value="5" name="form_id">

<p>产品反馈</p>

<table width="100%" border="0" ceillspacing="0" ceillpadding="0">

<tbody>

<tr>

<td style="width: 20%;" class="w1"><label>主题:</label></td><td style="width: 80%;"><input value="" style="width: 50%;" id="title" name="fields[title]"><span style="color: red;"></span></td>

</tr>

<tr>

<td style="width: 20%;" class="w1"><label>反馈类型:</label></td><td style="width: 80%;">< name="fields[infotype]" id="infotype"><option value="建议">建议</option><option value="咨询">咨询</option><option value="投诉">投诉</option><option value="其它">其它</option></></td>

</tr>

<tr>

<td style="width: 20%;" class="w1"><label>姓名:</label></td><td style="width: 80%;"><input value="" style="width: 50%;" id="user" name="fields[user]"><span style="color: red;"></span></td>

</tr>

<tr>

<td style="width: 20%;" class="w1"><label>联系电话:</label></td><td style="width: 80%;"><input value="" style="width: 50%;" id="tel" name="fields[tel]"></td>

</tr>

<tr>

<td style="width: 20%;" class="w1"><label>性别:</label></td><td style="width: 80%;">< name="fields[sex]" id="sex"><option value="保密">保密</option><option value="男士">男士</option><option value="女士">女士</option></></td>

</tr>

<tr>

<td style="width: 20%;" class="w1"><label>邮箱:</label></td><td style="width: 80%;"><input value="" style="width: 50%;" id="mail" name="fields[mail]"></td>

</tr>

<tr>

<td style="width: 20%;" class="w1"><label>咨询内容:</label></td><td style="width: 80%;"><textarea style="width: 50%; height: 50px;" id="content" name="fields[content]"></textarea><span style="color: red;"></span></td>

</tr>

<tr>

<td style="width: 20%;"></td><td style="width: 80%;"><input type="hidden" name="f_id" value="5"><input type="submit" value="提交" class="pt_go" name="submit"><input type="reset" value="重置" class="pt_reset" name="reset"></td>

</tr>

</tbody>

</table>

</form> 

整个表单使用table标签输出

样式如下:

表单样式/
.form_form{margin-top:5px;}
.form_form p{height:25px; line-height:25px; color:333; font-weight:bold; text-align:center}
.form_form input{padding:2px 0;}
.form_form input.pt_go,.form_form input.pt_reset{background:#FF930D;border:1px solid #D07300;height:25px;line-height:25px;padding:0 15px;}
.form_form input.pt_reset{margin-left:15px;}

可以通过样式修改表单背景、标题等

 

 

空间、网站业务联系QQ:2429256177 邮箱:beescms@163.com
客服

工作时间

周一至周日

8:00 - 18:00

在线客服

点击这里给我发消息 BUG反馈

点击这里给我发消息 网站建设

点击这里给我发消息 域名空间

点击这里给我发消息 授权服务

点击这里给我发消息 售前咨询

点击这里给我发消息 意见反馈

点击这里给我发消息 销售客服

联系手机

18288433386

powerd by BEESCMS