调整留言板样式

Ainaphp/Tpl/Home/Default/Page_contact.html

@@ -9,19 +9,24 @@
 				
 				<div class="form animateTop">
 					<div class="input">
-						<input type="text" placeholder="姓名" id="input_name">
+						<span>姓名</span>
+						<input type="text" placeholder="请输入" id="input_name">
 					</div>
 					<div class="input">
-						<input type="text" placeholder="电话" id="input_mobile">
+						<span>电话</span>
+						<input type="text" placeholder="请输入" id="input_mobile">
 					</div>
 					<div class="input">
-						<input type="text" placeholder="邮箱" id="input_email">
+						<span>邮箱</span>
+						<input type="text" placeholder="请输入" id="input_email">
 					</div>
 					<div class="input">
-						<input type="text" placeholder="地址" id="input_address">
+						<span>地址</span>
+						<input type="text" placeholder="请输入" id="input_address">
 					</div>
 					<div class="input">
-						<textarea name="" placeholder="留言内容" id="input_content"></textarea>
+						<span>留言</span>
+						<textarea name="" placeholder="请输入" id="input_content"></textarea>
 					</div>
 				</div>
 				

css/styles.css

@@ -71,7 +71,7 @@ a:active{blr:expression(this.onFocus=this.blur());}
 .header .tel span {line-height: 14px; font-size: 14px; padding-left: 5px;}
 
 @media (min-width: 1400px) and (max-width: 1600px) {
-	.header .nav li {padding: 0 18px;}
+	.header .nav li {padding: 0 16px;}
 }
 @media (min-width: 0px) and (max-width: 1399px) {
 	.header .nav li {padding: 0 16px;}
@@ -104,10 +104,11 @@ a:active{blr:expression(this.onFocus=this.blur());}
 .page_banner_mask .btn a {display: inline-block; width: 200px; height: 46px; line-height: 46px; font-size: 18px; color: #333; border: 1px solid #fff; border-radius: 5px; background: #fff; cursor: pointer;}
 .page_banner_mask .btn a:hover {color: #fff; background: none;}
 .page_banner_mask .text {font-size: 14px; color: #fff; line-height: 20px; letter-spacing: 2px; padding-top: 165px; font-family: arial;}
-.page_banner_mask .form {width: 500px; display: inline-block;}
-.page_banner_mask .form .input {margin-top: 15px;}
-.page_banner_mask .form input {width: 100%; height: 36px; border: 1px solid #fff; border-radius: 5px; padding: 0 10px; background: none; color: #fff;}
-.page_banner_mask .form textarea {width: 100%; height: 100px; border: 1px solid #fff; border-radius: 5px; padding: 4px 10px; background: none; color: #fff;}
+.page_banner_mask .form {width: 500px; display: inline-block; margin-left: -38px;}
+.page_banner_mask .form .input {margin-top: 15px; display: flex;}
+.page_banner_mask .form span {color: #fff; flex-shrink: 0; line-height: 38px; margin-right: 10px; font-size: 14px;}
+.page_banner_mask .form input {width: 100%; height: 36px; border: 1px solid #fff; border-radius: 5px; padding: 0 10px; background: none; color: #fff; font-size: 14px;}
+.page_banner_mask .form textarea {width: 100%; height: 100px; border: 1px solid #fff; border-radius: 5px; padding: 8px 10px; background: none; color: #fff; font-size: 14px;}
 
 .in_service {height: 666px;}
 .in_service_left {width: 49.5%; height: 666px; transition: all 0.4s;}