css+html响应式表单

最新推荐文章于 2023-02-09 01:21:41 发布

hexu_blog

最新推荐文章于 2023-02-09 01:21:41 发布

阅读量550

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hexu_blog/article/details/108872348

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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

第一步：先看效果

第二步：直接上代码,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;
}

hexu_blog

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
css+html响应式表单

用到flex布局，不懂的可先去看flex如何布局的第一步：先看效果第二步：直接上代码,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" />..
复制链接

扫一扫