悦轩饼家-立即购买样式

立即购买页面也没有太难的技术，就是一个大型的form表单。

效果图：

         页面信息比较多，在写之前要做好布局规划，脑海中有一个大概构思图，想好大概会用到哪些标签。写样式时注意细节，尽量将页面写的美观一些，代码简洁一些。

下面是悦轩饼家立即购买代码：

html：

<div id="containter">
			<div>
				<p id="shang">未注册可在此页面直接下单，已有帐户 请登录></p>
			</div>

			<form action="denglu.html" method="">


				<b>收货人信息</b><br /><br />
				<span class="cheng">*</span>
				<p class="tiel">收货人</p>

				<input style="width: 230px;
			margin-left: 50px;" type="text" placeholder="请输入收货人姓名" id="shrname" onblur="huqu()" /><br /><br />
				<span class="cheng">*</span>
				<p class="tiel">手机号码</p>
				<input style="width: 230px;
			margin-left: 35px;" type="tel" placeholder="请输入手机号码" id="shrtel" onblur="huqu()" /><br /><br />
				<span class="cheng">*</span>
				<p class="tiel">所在地区</p>
				<select style="margin-left: 35px;" id="shen" onblur="huqu()">
					<option value="河南省">河南省</option>
					<option value="云南省">云南省</option>
					<option value="山东省">山东省</option>
					<option value="河北省">河北省</option>
				</select>
				<select id="shi" onblur="huqu()">
					<option value="郑州市">郑州市</option>
					<option value="濮阳市">濮阳市</option>
					<option value="安阳市">安阳市</option>
					<option value="漯河市">漯河市</option>
				</select>
				<select id="qu" onblur="huqu()">
					<option value="金水区">金水区</option>
					<option value="二七区">二七区</option>
					<option value="管城回族区">管城回族区</option>
					<option value="惠济区">惠济区</option>
				</select>
				<br /><br />
				<span class="cheng">*</span>
				<p class="tiel">详细地址</p>
				<input style="width: 230px;margin-left: 35px;" type="text" placeholder="河南省郑州市金水区 请输入地区" id="xiangxi"
					onblur="huqu()" />
				<br /><br />
				<b>订购人信息</b>
				<br /><br />

				<span class="cheng">*</span>
				<p class="tiel">订购人姓名</p>

				<input style="width: 230px;margin-left: 25px;" type="text" placeholder="请输入订购人姓名" />
				<br /><br />
				<span class="cheng">*</span>
				<p class="tiel">订购人手机</p>
				<input style="width: 230px;margin-left: 25px;" type="text" placeholder="请输入订购人手机号码" />
				<br /><br />
				<b>送达日期</b>
				<br /><br />
				<span class="cheng">*</span>
				<p class="tiel">送达日期</p>
				<input style="width: 230px;margin-left: 35px;" type="text" class="order-item-input Wdate"
					placeholder="请输入送达日期" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})">
				<!-- <input  placeholder="请输入送达日期" /> -->
				<br /><br />
				<b>贺卡留言</b>


				<br /><br />
				<textarea placeholder="贺卡留言：最多三十个字，生日牌：最多8个字，请在“贺卡留言”中注明" style="width: 250px;
						height: 100px;
						"></textarea>

				<br />
				<b>核对购物清单</b><br />
				<br />
				<img src="img/cake4.webp" style="width: 100px;height: 100px;
					border-radius: 5px;
					float: left;">
				<div id="you" style="width: 1100px;height: 100px;">
					<p style="
					color: #A9A9A9;
					font-size: 14px;
					margin-left: 120px;
					margin-top: 20px;">草莓蛋糕（约2磅）</p>
					<span style="
					color: #A9A9A9;
					font-size: 22px;
					margin-left: 15px;">￥198</span>
					<span style="
					color: #A9A9A9;
					font-size: 14px;
					margin-left: 15px;">×1</span>
				</div>
				<div id="xiaa">
					<p style="float: left;
					width: 1100px;
					font-size: 14px;">配送至：</p>
					<p style="float: left;
					margin-left: 60px;
					width: 1000px;
					font-size: 14px;" id="xinxintext">
						张三 15912341234
					</p>
					<p style="float: right;
						
						font-size: 14px;">共<span style="color: #FF4500;">1</span>件商品，总金额：<span style="font-weight: bold;">198</span></p>
					</p>
				</div>

				<div class="zuih" style="width: 1100px;margin-top: 60px;">
					<p style="
						margin-top: 3px;
						margin-left: 760px;
							float: left;
							font-size: 14px;">应付：<span style="font-size: 20px;
							color: #FF4500;
							font-weight: bold;">￥198</span>
					</p>
					<a href="denglu.html">
						<button style="width: 150px;
						
						font-size: 15px;
						font-weight: bold;
						height: 30px;
						
						color: #EBEBEB;
						border: #FF4500 1px solid;
						background-color: #FF4500;">提交订单</button>
					</a>
				</div>
			</form>
		</div>

css：

#containter {
	width: 1000px;
	margin: 0px auto 30px;
}

#shang {

	width: 1000px;
	background-color: #fff0ec;
	height: 30px;
	color: #FF4500;
	line-height: 30px;
	font-size: 12px;
}

#containter form .cheng {
	color: #FF4500;
	float: left;
}

#containter form .tiel {
	font-size: 14px;
	color: #808080;
	float: left;
	margin: 3px 0px 0px 0px;
}

.zi {
	font-size: 12px;
	color: grey
}

js： 

function huqu() {
				// 获取姓名
				var name = document.getElementById('shrname').value;
				// 获取电话
				var tel = document.getElementById('shrtel').value;
				// 获取省份
				var shen = document.getElementById('shen').value;
				// 获取市级
				var shi = document.getElementById('shi').value;
				// 获取区县
				var qu = document.getElementById('qu').value;
				// 获取详细地址
				var xiangxi = document.getElementById('xiangxi').value;

				// 赋值给配送至
				document.getElementById('xinxintext').innerText = `收货人：` + name + `，电话：` + tel + `，收货地址：` + shen + shi + qu +
					xiangxi;

				// p，h1，div等标签里的文字用innerText获取或赋值
				// input，select等标签里的文字用value获取或赋值

			}

js可能写的比较少，后续会补全。

感谢各位的支持！！！