自用表单框架 用于复制粘贴

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

猜你喜欢

转载自blog.csdn.net/qq_42018777/article/details/81435158
今日推荐