自用html form代码,用于以后复制粘贴
ul{
padding: 0;
margin: 0;
list-style: none;
}
#toubu_meru{
list-style: none;
margin-top: -13px;
font-size: 13px;
width: 261px;
height: 44px;
border-bottom: 1px solid #DDDDDD;
padding: 0;
}
#toubu_meru>li{
float: left;
margin-right: 5px;
margin-top: 13px;
font-family: "微软雅黑";
font-weight: 500;
}
#xiaoyao_form>div>input[type="text"]{
width: 258px;
height: 26px;
margin-top: 12px;
margin-left:16px;
border:1px solid #DDDDDD;
}
#xiaoyao_form>div>input[type="radio"]{
margin-top: 22px;
}
#xiaoyao_form>div{
float: left;
width: 100%;
margin-left: 14%;
}
#xiaoyao_form>div>p{
text-align: right;
width: 100px;
color: #747474;
margin-bottom: 0px;
}
#xiaoyao_form>div>*{
float: left;
font-family: "微软雅黑";
}
#xiaoyao_form>div>textarea{
resize: none;
margin-left:16px;
margin-top: 16px;
width: 600px;
height: 150px;
border-color: #DDDDDD;
font-size: 16px;
}
#xiaoyao_form>div>button{
margin-left: 116px;
margin-top: 20px;
width: 90px;
height: 40px;
border: 1px solid #00caa9;
border-radius: 4px;
background-color: #00CAA9;
font-size: 16px;
color: white;
/*box-shadow添加泛光效果*/
box-shadow: 0 0 2px #00CAA9;
}
#xiaoyao_form>div>label{
margin-left: 117px;
margin-top: 5px;
color: #747474;
}
#fankui_file_img_ul>li{
float: left;
padding: 5px 10px;
background-color: #00CAA9;
border: 1px solid #00CAA9;
border-radius: 4px;
margin-top: 12px;
margin-right: 10px;
color: white;
}
#fankui_file_img_ul>li>span{
margin-left: 10px;
}
#fankui_file_img_ul>li>img{
position: absolute;
width: 250px;
height: 125px;
display: none;
}
<body>
<div align="" style="margin-left: 3.3%;margin-top: 16px;">
<ul id="toubu_meru" >
<li style="color: #01CAAA;font-size: 20px;"><b>问题反馈</b></li>
<li style="color: #747474;margin-left: 5px; margin-top: 16px;">(The problem of feedback)</li>
</ul>
</div>
<form id="xiaoyao_form">
<div>
<p>
反馈人:
</p>
<input type="text"/>
</div>
<div>
<p>
联系方式:
</p>
<input type="text"/>
<p style="width: 260px;color: #999999;">(电话号码、QQ、电子邮箱均可)</p>
</div>
<div id="xiaoyao_form_radio">
<p>
分类:
</p>
<input style="margin-left: 16px;" type="radio" name="fenlei" /><p style="width: 70px;">问题反馈</p>
<input type="radio" name="fenlei" /><p style="width: 70px;">建言献策</p>
<input type="radio" name="fenlei" /><p style="width: 70px;">咨询投诉</p>
</div>
<div>
<p>
标题:
</p>
<input type="text"/>
</div>
<div>
<p>
内容:
</p>
<textarea name="txt" placeholder="最多输入两百个字符" maxlength="200" rows="5" warp="virtual"></textarea>
</div>
<div>
<label for="fankui_file">
<div>
<img style="position: relative;top: 2px;" src="../public/img/fankui_fileIMG.png"/>
<font>图片</font>
<img style="position: relative;top: -2px;" src="../public/img/filetable_sanjiao.png"/>
</div>
<input multiple="multiple" type="file" id="fankui_file" style="display: none;"/>
</label>
<div style="width: 100%;">
<ul id="fankui_file_img_ul" style="margin-left: 115px;">
<li><font>111</font><span>x</span><img src="../jquery-easyui-1.5.5.4/demo-mobile/images/login1.jpg" ></li>
<li><font>111</font><span>x</span><img src="../jquery-easyui-1.5.5.4/demo-mobile/images/login1.jpg" ></li>
<li><font>111</font><span>x</span></li>
</ul>
</div>
</div>
<div>
<p>
验证问题:
</p>
<input type="text"/>
</div>
<div>
<button>提交</button>
</div>
</form>
</body>