【每日一练】订单提交页面
生活随笔
收集整理的這篇文章主要介紹了
【每日一练】订单提交页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天我們實現這個效果：
?結構如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../lib/iconfont/iconfont.css"><link rel="stylesheet" href="../css/normalize.css"><link rel="stylesheet" href="../css/base.css"><link rel="stylesheet" href="../css/orders.css"> </head><body><!-- 主體模塊開始 --><div class="main"><!-- 個人信息 --><div><div class="user_massage"><div class="location"><i class="iconfont icon-location"></i></div><div class="user"><div class="top"><h5>謝豪杰</h5><p>15871016096</p></div><div class="bottom">北京市 海淀區 中關村軟件園 信息科技大廈1號 樓410# </div></div><a href="#" class="more iconfont icon-more"></a></div></div><!-- 個人信息結束 --><!-- 商品模塊開始 --><div class="goods"><div class="pic"><img src="./pic.png" alt=""></div><div class="info"><h4>康爾貝 非接觸式紅外體溫儀</h4><p class="youhui">領券立減30元 嬰兒級材質 測溫…</p><p class="pink">粉色 紅外體溫計</p><div class="price"><span class="red">￥<i>266 </i></span><span>￥299</span></div></div><div class="count"><i class="iconfont icon-x"></i><span>1</span></div></div><!-- 商品模塊結束 --><!-- 物流配送開始 --><div class="rest"><div><h5>配送方式</h5><p>順豐快遞</p></div><div><h5 class="min">買家備注</h5><p>希望可以盡快發貨，謝謝~</p></div><div><h5>支付方式</h5><p>支付寶<i class="iconfont iconfont icon-more"></i></p></div></div><!-- 物流配送結束 --><!-- 收費價格開始 --><div class="sale"><div><h5>商品總價</h5><p>￥299.00</p></div><div><h5>運費</h5><p>￥0.00</p></div><div><h5>折扣</h5><p>-￥30.00</p></div></div><!-- 收費價格結束 --></div><!-- 主體模塊結束 --><!-- 底部模塊開始 --><footer class="pay"><div class="left">合計：<span class="red">￥<i>266.00</i></span></div><div class="right"><a href="#">去支付</a></div></footer><!-- 底部模塊結束 --> </body></html>樣式如下：
/* 主體模塊開始 */body {background-color: #f8f8f8; }/* 主體模塊開始 */.main {padding: 12px 11px 80px; }.main>div {margin-bottom: 10px;background-color: rgb(255, 255, 255);border-radius: 20px; }/* .main div:nth-child(1) {height: 85px; } *//* .main div:nth-child(2) {height: 108px; }.main div:nth-child(3) {height: 125px; }.main div:nth-child(4) {height: 125px; } *//* 個人信息 */.user_massage {display: flex;padding: 15px 0px 14px 11px; }.user_massage .location {width: 30px;height: 30px;margin-right: 10px;background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);border-radius: 15px;text-align: center;line-height: 30px;color: rgb(255, 255, 255); }.user_massage .user {flex: 1;color: rgb(0, 0, 0);font-size: 15px; }.user_massage .more {width: 44px;height: 44px;background-color: rgb(255, 255, 255);line-height: 44px;text-align: center;color: rgb(0, 0, 0); }.user .top {display: flex; }.user .top h5 {padding-right: 23px;font-size: 15px;font-weight: 400; }.user .top p {font-size: 13px; }.user .bottom {margin-top: 13px;font-size: 13px; }/* 個人信息結束 *//* 商品模塊開始 */.goods {display: flex;padding: 11px 0px 11px 11px; }.goods .pic {width: 85px;height: 85px;margin-right: 12px;border-radius: 2px; }.goods .info {flex: 1;font-size: 13px;color: rgb(0, 0, 0); }.goods .count {width: 44px;height: 44px;text-align: center;line-height: 44px; }.info h4 {font-size: 13px;font-weight: 400;color: #262626; }.info .youhui {font-size: 13px;margin: 5px 0; }.info .pink {display: inline-block;background-color: #f7f7f8;padding: 3px 4px;font-size: 11px;border-radius: 2px;color: #888888; }.info .price {margin-top: 10px;font-size: 12px; }.info .price .red {color: #cf4444; }.info .price i {font-size: 16px; }.price span:nth-child(2) {margin-left: 14px;color: #999;text-decoration: line-through; }/* 商品模塊結束 *//* 物流配送開始 */.rest {padding: 15px; }.rest>div {display: flex;margin-bottom: 30px; }.rest div:last-child {margin-bottom: 0; }.rest div:nth-child(odd) {justify-content: space-between; }.rest h5, .rest p {font-size: 13px;color: #262626;font-weight: 400; }.rest div:nth-child(2) p {margin-left: 20px;font-size: 12px;color: #989898; }.rest i {font-size: 9px;color: #808080; }/* .min {} *//* 物流配送結束 *//* 收費價格開始 */.sale {padding: 15px; }.sale>div {display: flex;margin-bottom: 30px; }.sale div:last-child {margin-bottom: 0; }.sale div {justify-content: space-between; }.sale h5, .sale p {font-size: 13px;color: #262626;font-weight: 400; }/* 收費價格結束 *//* 主體模塊結束 *//* 底部模塊開始 */.pay {position: fixed;left: 0px;bottom: 0px;width: 100%;height: 80px;background-color: #fff;border-top: 1px solid #ededed;display: flex;justify-content: space-between;align-items: center;padding-left: 9px;padding-right: 11px; }.left .red {color: #cf4444;font-size: 11px; }.left i {font-size: 20px; }.right a {display: block;width: 90px;height: 35px;background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);color: rgb(255, 255, 255);font-size: 13px;text-align: center;line-height: 35px;border-radius: 3px; }/* 底部模塊結束 */總結
以上是生活随笔為你收集整理的【每日一练】订单提交页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一起学英语第三期，things chan
- 下一篇： java调用oracle过程,JAVA调