第十天——web页面的样式(基于公司项目)

最新推荐文章于 2025-07-13 08:00:00 发布

原创最新推荐文章于 2025-07-13 08:00:00 发布 · 492 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了三种表单元素的样式设计实例：下拉框、行内输入框及按钮。通过具体的HTML代码片段，详细介绍了各元素的样式设置，包括类名、属性及样式规则等。

1，下拉框样式

</pre><pre name="code" class="html">

<div class="item" >
                                <label class="lab">
                                    <span class="required">*</span>开户银行省份：</label>
                                    <div class="jqtransform jqtransform-select3 select_type">
                                        <select name="regionId" regionId id="regionId" first="$!personUser.regionId">
                                            <option value="">选择省份</option>
                                            #foreach($region in $regions)	
                                                <option value="$!region.id"  #if($region.name==$!personUser.regionId)selected="true"#end >$!region.name</option>
                                            #end
                                        </select>
                                    </div>
                            </div>

2，行样式

 <div class="item-box fn-clear" style="position:relative;z-index:106;">
                            <div class="item">
                                <label class="lab">
                                    <span class="required">*</span>银行开户名：</label>
                                    <input id="bankAccount" name="bankAccount" value="$!personUser.bankAccount" type="text" maxlength="" readonly #if($!personUser.certifyStatus == 'A'  )disabled #end class="ipt w190 z-dis"/>
                            </div>
                            <div class="item">
                                <label class="lab">
                                    <span class="required">*</span>银行卡号：</label>
                                    <input type="text" name="bankCardNo" maxLength="20" id="bankCardNo" bankCardNo value="$!personUser.bankCardNo"  class="ipt w190"/>
                            </div>
                        </div>

3，按钮样式

<div class="bottom-c" style="align:center">
                            <a href="javascript:;" class="u-btn u-btn-green mr10" id="systemAccount">#if($!userInfo.userId != "")确定#else保存#end</a>
                                <a href="javascript:;" class="u-btn u-btn-red" id="return_back">返回</a>
                        </div>