css+html响应式表单

野性酷女 2022-12-11 09:10 187阅读 0赞

用到flex布局，不懂的可先去看flex如何布局的

第一步：先看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 2][]

第二步：直接上代码,html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    		<meta http-equiv="pragma" content="no-cache" /> 
    		<meta http-equiv="cache-control" content="no-cache" /> 
    		<meta http-equiv="expires" content="0" />
    		<meta name="viewport" content="width=device-width,initial-scale=1">
    		<title>旧衣重量录入</title>
    	</head>
    	<link href="css/main.css" rel="stylesheet" type="text/css"  />
    	<body>
    		<div class="container">
    			<label class="lable-title">旧衣重量录入</label>
    			<div class="form">
    				<div class="query-item">
    					<input  type="text" id="expressNo" placeholder="请输入快递单号">
    					<button class="query-btn" onclick="queryOrderByExpressNo()">查询</button>
    				</div>
    			</div>
    			<div class="order" id="order">
    				<table>
    				    <tr>
    				      <td class="order-text">订单编号：</td>
    				      <td class="order-value" id="orderNo"></td>
    				    </tr>
    					<tr>
    					  <td class="order-text">邮寄人姓名：</td>
    					  <td class="order-value" id="userName"></td>
    					</tr>
    					<tr>
    					  <td class="order-text">邮寄人地址：</td>
    					  <td class="order-value" id="address"></td>
    					</tr>
    					<tr>
    					  <td class="order-text">邮寄人电话：</td>
    					  <td class="order-value" id="mobilePhoneNo"></td>
    					</tr>
    					<tr>
    					  <td class="order-text">快递公司称重：</td>
    					  <td class="order-value" id="totalWeight"></td>
    					</tr>
    					<tr>
    					  <td class="order-text">包裹送达时间：</td>
    					  <td class="order-value" id="signingTime"></td>
    					</tr>
    				</table>
    			</div>
    			<div class="form">
    				<div class="item">
    					<label class="label-text">夏衣重量：</label>
    					<input  type="text" id="summerClothWeight" >
    				</div>
    				<div class="item">
    					<label class="label-text">其他旧衣：</label>
    					<input  type="text" id="otherClothWeight">
    				</div>
    				<div class="item">
    					<label class="label-text">杂物：</label>
    					<input  type="text" id="sundries">
    				</div>
    				<div class="item">
    					<button class="submit" onclick="submitForm()">提交</button>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>

第三步：css代码

body{
    	padding: 30px;
    }
    .container{
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    }
    .lable-title{
    	font-weight: 700;
    }
    .query-item{
    	margin-top: 20px;
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    }
    .query-item .query-text{
    	font-weight: 700;
    	width: 80px;
    }
    .query-item .query-btn{
    	margin-left: 10px;
    	width: 80px;
    	color: #fff;
    	background-color: #337ab7;
    	border-color: #2e6da4;
    	padding: 8px 12px;
    	margin-bottom: 0;
    	font-size: 14px;
    	font-weight: 400;
    	line-height: 1.42857143;
    	text-align: center;
    	white-space: nowrap;
    	vertical-align: middle;
    	-ms-touch-action: manipulation;
    	touch-action: manipulation;
    	cursor: pointer;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    	background-image: none;
    	border: 1px solid transparent;
    	border-radius: 4px;
    }
    
    table{
    	font-size: 14px;
    	border-collapse: collapse;
    	width: 100%;
    	table-layout: fixed;
    	text-align: center;
    	line-height: 25px;
    	margin-top: 20px;
    	margin-bottom: 20px;
    }
    table tr {
    	border: dashed 1px #a59e9e;
    	border-left: none;
    	border-right: none;
    }
    table .order-text{
    	text-align: center;
    	height:30px;
    	font-weight: 700;
    }
    table .order-value{
    	text-align: left;
    	word-wrap: break-word;
    	word-break: break-all;
    }
    .item{
    	margin-top: 10px;
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    }
    .item .lable-title{
    	font-weight: bold;
    	margin-bottom: 30px;
    }
    .item .label-text{
    	width: 80px;
    	font-weight: 700;
    }
    input{
    	width: auto;
    	height: 26px;
    	padding: 6px 12px;
    	line-height: 1.42857143;
    	font-size: 14px;
    	color: #555;
    	background-color: #fff;
    	background-image: none;
    	border: 1px solid #ccc;
    	border-radius: 4px;
    	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
    	
    }
    .item .submit {
    	margin-top: 30px;
    	width: 100%;
    	color: #fff;
    	background-color: #337ab7;
    	border-color: #2e6da4;
    	display: inline-block;
    	padding: 6px 12px;
    	margin-bottom: 0;
    	font-size: 14px;
    	font-weight: 400;
    	line-height: 1.42857143;
    	text-align: center;
    	white-space: nowrap;
    	vertical-align: middle;
    	-ms-touch-action: manipulation;
    	touch-action: manipulation;
    	cursor: pointer;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    	background-image: none;
    	border: 1px solid transparent;
    	border-radius: 4px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70]: /images/20221123/2b73837db8504322840c20f5fb875b56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 1]: /images/20221123/61800f1b87b8458cb91e5698c7ab9a94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 2]: /images/20221123/9667c4f1600a4ad89325b171026c016e.png