HTML .CSS实现立即购买页面（purchase）
HTML .CSS实现立即购买页面（purchase）
·
一、知识点
1、form表单
2、flex弹性布局 display: flex
行内元素 display：inline-flex
webkit内核的浏览器 -webkit
二、立即购买页面
.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>立即购买页面</title>
<link href="css/common.css" rel="stylesheet"/>
<link href="css/purchase.css" rel="stylesheet"/>
</head>
<body>
<form class="order-container" id="form1">
<div class="login-box" style="cursor: pointer;">
<span class="iconfont iconfont-tips" onclick="DoWinLogin()"></span>
<span class="login-tips" onclick="DoWinLogin">未注册可在此页面直接下单，已有账号</span>
<span class="login-a">请登录></span>
</div>
<div class="order-item" style="position: relative;margin-top: 24px;">
<h3 class="order-item-hd">收货人信息</h3>
<div class="order-item-content">
<div class="order-item-li">
<label class="order-item-title">收货人</label>
<input class="order-item-input" placeholder="请输入收货人姓名" type="text"/>
</div>
<div class="order-item-li">
<label class="order-item-title">手机号码</label>
<input class="order-item-input" placeholder="请输入收货人手机号码" type="text"/>
</div>
<div class="order-item-li">
<label class="order-item-title">所在地区</label>
<select class="order-item-select">
<option value="">河南省</option>
<option value="">河北省</option>
<option value="">江苏省</option>
<option value="">湖南省</option>
</select>
<select class="order-item-select">
<option value="">郑州市</option>
<option value="">南京市</option>
<option value="">杭州市</option>
<option value="">长沙市</option>
</select>
<select class="order-item-select" style="width: 142px;">
<option value="">金水区</option>
<option value="">回族区</option>
<option value="">哈哈区</option>
<option value="">天齐区</option>
</select>
<!-- <span class="order-item-wrong"></span> -->
</div>
<div class="order-item-li">
<label class="order-item-title">详细地址</label>
<div class="order-item-input-box">
<span class="order-item-addr-header">河南省郑州市金水区</span>
<input placeholder="请输入收货人详细地址" type="text" style="padding-left: 124px;width: 222px;"/>
</div>
</div>
</div>
</div>
<div class="order-item">
<h3 class="order-item-hd">订购人信息</h3>
<div class="order-item-content">
<div class="order-item-li">
<label class="order-item-title">订购人姓名</label>
<input class="order-item-input" placeholder="请输入订购人姓名"/>
</div>
<div class="order-item-content-hastel" style="display: block;">
<div class="order-item-li">
<label class="order-item-title">订购人手机</label>
<input class="order-item-input" placeholder="请输入订购人手机号码"/>
</div>
</div>
</div>
</div>
<div class="order-item">
<h3 class="order-item-hd">送达日期</h3>
<div class="order-item-content">
<div class="order-item-li">
<label class="order-item-title">送达日期</label>
<input class="order-item-input" placeholder="请输入送达日期"/>
</div>
</div>
</div>
<div class="order-item">
<div class="order-item-hd">
<h5>贺卡留言</h5>
</div>
<div class="order-item-box">
<div class="order-item-left">
<textarea class="order-item-left-textarea"
placeholder="贺卡留言：最多30字，生日牌：最多8个字，请在“贺卡留言”中标明."></textarea>
</div>
<div class="order-item-right"></div>
</div>
</div>
<div class="order-item order-item-border-bottom order-item-line">
<h3 class="order-item-hd">核对购物清单</h3>
<div class="order-item-product-list">
<div class="order-item-product-li">
<a href="#" target="_blank"
style="display: inline-block; width: 100%; height: 100%;">
<div class="order-item-product-pic">
<img src="img/cake1.jpg" alt="提拉米苏(约2磅)"/>
</div>
<div class="order-item-product-info">
<p class="order-item-product-name">提拉米苏(约2磅)</p>
</div>
<span class="order-item-product-iprice"data-itemcode="5602003">198</span>
<span class="order-item-product-count">x1</span>
</div>
</div>
</a>
</div>
<div class="order-item-footer">
<div class="order-item-footer-left">
<div class="order-item-footer-send">
<span class="send-title">配送至:</span>
</div>
<div class="order-item-footer-receiver">
<span class="receiver-name">张三</span>
<span id="receiver_tel">15919173982</span>
</div>
</div>
<div class="order-item-footer-right">
<div class="order-item-footer-price">
共<span id="pro_count" class="pro-count">1</span>件商品，总商品金额:
<span id="pro_price" class="pro-price">198</span>
</div>
<div class="order-item-footer-pay">
应付:<span class="pay-price">198</span>
<button class="pay-btn">提交订单</button>
</div>
</div>
</div>
</form>
</body>
</html>.css
.order-main{
background:#f3f5f7;
padding-top: 78px;
padding-bottom: 100px;
border-top: 1px solid #E9ECF0;
}
.order-main .order-container{
background: #ffffff;
border-radius: 8px;
margin: 0 auto;
padding-bottom: 20px;
width: 1200px;
overflow: hidden;
}
.order-container .login-box{
height: 36px;
line-height: 36px;
padding-left: 40px;
background: #fff0ec;
border-radius: 2px;
color: #ff734c;
}
.order-container .order-item{
position: relative;
margin-top: 24px;
padding: 0 40px 19px;
border-bottom: 1px solid #e9ecf0;
overflow: hidden;
}
.order-container .order-item-hd{
font-size: 17px;
letter-spacing: 0.5px;
font-weight: 600;
}
.order-container .order-item-li{
margin-top: 14px;
font-size: 0;
}
.order-container .order-item-title{
display: inline-block;
width: 109px;
font-size: 14px;
font-weight: 400;
}
.order-container .order-item-input{
width: 324px;
height: 22px;
border-radius: 2px;
border: 1px solid #d2d2d2;
padding: 6px 12px;
font-size: 14px;
letter-spacing: 0.5px;
}
.order-container .order-item-title{
display: inline-block;
width: 109px;
font-size: 14px;
font-weight: 400;
}
.order-container .order-item-title::before{
content: '*';
color: #ff734c;
font-size: 13px;
margin-right: 3px;
}
.order-container .order-item-select{
width: 96px;
height: 32px;
border: 1px solid #d2d2d2;
padding: 6px 0 6px 12px;
margin-right: 8px;
font-size: 13px;
}
.order-container .order-item-input-box{
display: inline-block;
width: 324px;
height: 32px;
border-radius: 2px;
font-size: 0;
position: relative;
}
.order-container .order-item-input-box span{
font-size: 12px;
position: absolute;
top: 8px;
left: 0;
padding-left: 12px;
color: #71797f;
}
.order-container .order-item-input-box input{
width: 100%;
height: 100%;
letter-spacing: 0.5px;
font-size: 12px;
}
.order-container .order-item-date{
display: inline-block;
height: 32px;
line-height: 32px;
position: relative;
}
.order-container .order-item-input{
vertical-align: top;
width: 200px;
height: 100%;
padding-left: 12px;
font-size: 14px;
}
.order-container .order-item-left{
display: inline-block;
vertical-align: top;
width: 424px;
position: relative;
}
.order-container .order-item-left-textarea{
width: 100%;
height: 160px;
padding: 16px;
border-radius: 2px;
border: 1px solid #d2d2d2;
font-size: 13px;
line-height: 20px;
resize: none;
}
/* -- */
.order-container .order-item .order-item-line{
margin-top: 21px;
padding-top: 19px;
border-top: 1px solid #E9ECF0;
}
.order-container .order-item .order-item-border-bottom{
border-bottom: none;
padding-bottom: 0;
margin-top: 10px;
}
.order-container .order-item{
margin-top: 20px;
padding: 0 40px 19px;
border-bottom: 1px solid #E9ECF0;
overflow: hidden;
}
.order-container .order-item-product-list{
width: 100%;
background: #f7f9fa;
margin-top: 16px;
padding: 8px;
}
.order-container .order-item-product-li{
margin-bottom: 14px;
}
.order-container .order-item-product-pic{
display: inline-block;
vertical-align: middle;
}
.order-container .order-item-product-pic img{
width: 66px;
height: 72px;
}
.order-container .order-item-product-lifo{
display: inline-block;
margin-left: 16px;
vertical-align: middle;
}
.order-container .order-item-product-name{
font-size: 12px;
margin-bottom: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-container .order-item-product-price{
font-size: 15px;
font-size: 600px;
}
.order-container .order-item-product-count{
margin-left: 32px;
font-size: 15px;
letter-spacing: 0.5px;
}
.order-container .order-item-footer{
margin-top: 16px;
padding: 0 8px;
font-size: 0;
}
.order-container .order-item-footer-left{
display: inline-block;
vertical-align: middle;
width: 50%;
text-align: left;
font-size: 13px;
}
.order-container .order-item-footer-send{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-container .order-item-footer-receiver{
margin-top: 8px;
padding-left: 56px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-container .order-item-footer-receiver .receiver-name{
margin-right: 8px;
}
.order-container .order-item-footer-right{
display: inline-block;
vertical-align: middle;
width: 100%;
text-align: right;
font-size: 13px;
}
.order-container .order-item-footer-price{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-container .order-item-footer-price .pro-count{
color: #ff734c;
font-weight: 600;
}
.order-container .order-item-footer-price .pro-price{
font-weight: 600;
}
.order-container .order-item-footer-pay{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 12px;
font-size: 15px;
}
.order-container .order-item-footer-pay .pay-price{
font-size: 21px;
letter-spacing: 0.5px;
font-weight: 600;
color: #ff734c;
}
.pay-btn{
margin-left: 32px;
width: 200px;
height: 44px;
text-align: center;
background: #ff734c;
/* border-radius: 27px; */
font-size: 15px;
color: #ffffff;
border: none;
outline: none;
cursor: pointer;
}
.order-item-product-name{
/* float: left; */
color: #ff734c;
}
.order-item-product-pic{
float: left;
}
.order-item-product-iprice{
margin: 50px 100px;
padding: 0.5px;
}三、实现效果
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
2
0- 0
已为社区贡献4条内容
所有评论(0)