目錄

1、界面效果

2、界面分析

2.1、整體結(jié)構(gòu)

2.2、標(biāo)題

2.3、表單

2.4、按鈕

3、代碼實(shí)現(xiàn)

3.1、標(biāo)題區(qū)域布局

3.2、表單區(qū)域

3.2.1、祝福語(yǔ)

3.2.2、紅包數(shù)量

3.2.3、紅包總金額

3.2.4、余額支付

3.3、確認(rèn)按鈕區(qū)域

4、完整代碼

5、基礎(chǔ)知識(shí)點(diǎn)

---

1、界面效果

• 完成效果

• C站發(fā)紅包界面 

2、界面分析

2.1、整體結(jié)構(gòu)

上部分為標(biāo)題、中間為表單、底部為確定按鈕

2.2、標(biāo)題

底部背景、標(biāo)題文本、右上角關(guān)閉按鈕

2.3、表單

祝福語(yǔ)文本、紅包數(shù)量文本、紅包總金額、當(dāng)前余額文本顯示、以及前往充值按鈕

2.4、按鈕

左邊為需支付金額顯示，右邊為取消和確定按鈕

3、代碼實(shí)現(xiàn)

3.1、標(biāo)題區(qū)域布局

1）背景圖片

圖片寬度380px像素，高度56px像素

2）背景圖片自動(dòng)填充

布局一個(gè)div，寬度為400px像素，高度為56px像素，然后再設(shè)置背景圖片樣式，由于圖片本身寬度小于div寬度，div會(huì)多出20px像素，圖片會(huì)自動(dòng)填充，默認(rèn)效果如下

    


        


            


            

        

        


            

                <div style="width:400px;height:56px;background:url(/1674461966454.jpg);background-size: 100%;">
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

 

 3）圖片百分比顯示

再給div設(shè)置背景百分比縮放顯示，效果如下

background-size: 100%;

 4）文本

布局一個(gè)span標(biāo)簽，顯示"添加紅包"文本，白色黑體，18號(hào)字體，加粗，左對(duì)齊，且左邊距20px像素。并設(shè)置div標(biāo)簽56px像素垂直居中樣式，效果如下

5）關(guān)閉按鈕

在右上角添加一個(gè)關(guān)閉按鈕，一般可以設(shè)置一個(gè)svg標(biāo)簽圖標(biāo)，設(shè)置高28px，寬36px

• base64編碼圖標(biāo)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC

• 錯(cuò)位布局

設(shè)置相對(duì)定位position樣式，位于右上角。它所在的父級(jí)就要設(shè)置絕對(duì)定位relative。這樣關(guān)閉按鈕圖標(biāo)就會(huì)以它所在的父級(jí)定位，否則可能會(huì)布局錯(cuò)位，比如下面錯(cuò)位效果

•  正確布局

• 樣式代碼

    


        


            


            

        

        


            

                <style type="text/css">
            

        

    

    


        


            


            

        

        


            

                 .title { width: 400px; height: 56px; background: url(/1674461966454.jpg); background-size: 100%; line-height: 56px;position:relative; }
            

        

    

    


        


            


            

        

        


            

                 .title-text { font-size: 18px; font-weight: bold; color: #fff; font-family: 黑體; margin-left: 20px; }
            

        

    

    


        


            


            

        

        


            

                 .close { position: absolute; top: 0px; right: 0px; width: 36px; height: 28px; }
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <div class="title">
            

        

    

    


        


            


            

        

        


            

                 <span class="title-text">添加紅包</span>
            

        

    

    


        


            


            

        

        


            

                 <img class="close" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC" alt="">
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2、表單區(qū)域

3.2.1、祝福語(yǔ)

1）組成元素

紅色星號(hào)、文本、輸入文本框、刷新文本按鈕

2）calc函數(shù)

它屬于css3的功能，calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。對(duì)于布局非常有作用。

需要特別注意，函數(shù)內(nèi)的參數(shù)值前后都需要保留一個(gè)空格，例如：width: calc(100% - 40px)；

3）刷新小圖標(biāo)

樣式設(shè)置16x16高寬度

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=

4）文本框默認(rèn)高亮

input輸入文本框默認(rèn)點(diǎn)擊選中會(huì)有一個(gè)高亮的效果，可以設(shè)置樣式去掉

outline:none;

5）隨機(jī)文本

設(shè)置隨機(jī)祝福語(yǔ)文本值，可設(shè)置js全局?jǐn)?shù)組參數(shù)變量保存。

并且給右邊的刷新按鈕綁定點(diǎn)擊事件，然后在事件內(nèi)使用隨機(jī)函數(shù)進(jìn)行隨機(jī)顯示

• 交互代碼

    


        


            


            

        

        


            

                <script type="text/javascript">
            

        

    

    


        


            


            

        

        


            

                 $(function () {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                  // 祝福語(yǔ)
            

        

    

    


        


            


            

        

        


            

                  var labelText = ['成就一億技術(shù)人!', '節(jié)日快樂(lè)', 'Hello World', '新春大吉!', '大吉大利', 'Bug Free'];
            

        

    

    


        


            


            

        

        


            

                  $('.cl-input img').click(function () {
            

        

    

    


        


            


            

        

        


            

                  // Math.random() - 隨機(jī)函數(shù)會(huì)產(chǎn)生0~1之間的值
            

        

    

    


        


            


            

        

        


            

                  var index = parseInt(Math.random() * labelText.length);
            

        

    

    


        


            


            

        

        


            

                  var text = labelText[index];
            

        

    

    


        


            


            

        

        


            

                  $('.cl-input input').val(text);
            

        

    

    


        


            


            

        

        


            

                  });
            

        

    

    


        


            


            

        

        


            

                 });
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

• 效果如下

• 布局代碼

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>祝福語(yǔ)</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <input placeholder="請(qǐng)?zhí)顚懠t包祝福語(yǔ)或標(biāo)題" value="成就一億技術(shù)人!" />
            

        

    

    


        


            


            

        

        


            

                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=" alt="">
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2.2、紅包數(shù)量

布局和祝福語(yǔ)一樣，刷新按鈕換成了單位文本。

這里文本框有個(gè)離開(kāi)焦點(diǎn)事件，如果判斷沒(méi)有輸入值，那么提示”請(qǐng)輸入數(shù)量"，并且紅包數(shù)量只能是正整數(shù)，文本框也變?yōu)榧t色邊框，默認(rèn)則為藍(lán)色邊框

• 布局效果

• 布局代碼

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>紅包數(shù)量</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <input placeholder="請(qǐng)?zhí)顚懠t包數(shù)量" value="" />
            

        

    

    


        


            


            

        

        


            

                  <span>個(gè)</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

•  交互效果

• 交互代碼 

    


        


            


            

        

        


            

                $("#txtCount").blur(function () {
            

        

    

    


        


            


            

        

        


            

                 txtCount = $(this).val();
            

        

    

    


        


            


            

        

        


            

                 if (txtCount == undefined || txtCount == null || txtCount == '' || txtCount.trim() == '') {
            

        

    

    


        


            


            

        

        


            

                  $("i", $(this).parent()).show().html('請(qǐng)輸入數(shù)字！');
            

        

    

    


        


            


            

        

        


            

                  $(this).parent().addClass('red-border');
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                 else {
            

        

    

    


        


            


            

        

        


            

                  if (txtCount <= 0) {
            

        

    

    


        


            


            

        

        


            

                  $("i", $(this).parent()).show().html('請(qǐng)輸入有效數(shù)字格式！');
            

        

    

    


        


            


            

        

        


            

                  $(this).parent().addClass('red-border');
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                  else if (!isNaN(txtCount)) {
            

        

    

    


        


            


            

        

        


            

                  $("i", $(this).parent()).hide();
            

        

    

    


        


            


            

        

        


            

                  $(this).parent().removeClass('red-border');
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                  else {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                });
            

        

    




    

3.2.3、紅包總金額

布局和前面一樣，這就是前端布局的魅力，有很多可以重用的東西

• 布局效果

• 布局代碼 

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>紅包總金額</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <input placeholder="請(qǐng)?zhí)顚懠t包總金額" value="" />
            

        

    

    


        


            


            

        

        


            

                  <span>元</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2.4、余額支付

這里的布局和前面稍微多點(diǎn)東西，布局差不多。

這里只做讀取展示用，也可以用input輸入文本框，設(shè)置默認(rèn)只讀即可

• 布局效果

• 布局代碼 

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>余額支付</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <label>當(dāng)前余額：<b>51.25</b> 元</label>
            

        

    

    


        


            


            

        

        


            

                  <span class="span">前往充值 > </span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2.5、文本邊框交互邏輯

當(dāng)點(diǎn)擊文本框時(shí)，先判斷是否已經(jīng)提示無(wú)效信息，也就是已經(jīng)有紅色邊框，有則不顯示藍(lán)色邊框，沒(méi)有則顯示藍(lán)色邊框。當(dāng)離開(kāi)文本框焦點(diǎn)，那么則移除藍(lán)色邊框

• 交互效果

• 交互代碼

    


        


            


            

        

        


            

                // 文本框點(diǎn)擊事件
            

        

    

    


        


            


            

        

        


            

                $('.cl-input input').click(function () {
            

        

    

    


        


            


            

        

        


            

                var className = $(this).parent().attr('class');
            

        

    

    


        


            


            

        

        


            

                if (className.indexOf('red-border') < 0) {
            

        

    

    


        


            


            

        

        


            

                $(this).parent().addClass('blue-border');
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }).blur(function () {
            

        

    

    


        


            


            

        

        


            

                $(this).parent().removeClass('blue-border');
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

3.3、確認(rèn)按鈕區(qū)域

1）支付額文本

這里布局左定位，金額數(shù)字加紅色字體

2）取消和確認(rèn)按鈕

取消按鈕鼠標(biāo)移動(dòng)上去邊框變深，直接使用css的hover屬性即可完成。

確認(rèn)按鈕的效果使用同樣的方式

3）布局效果

 

 4）布局代碼

    


        


            


            

        

        


            

                <!--按鈕-->
            

        

    

    


        


            


            

        

        


            

                <div class="button">
            

        

    

    


        


            


            

        

        


            

                 <div class="price">
            

        

    

    


        


            


            

        

        


            

                  <span>需支付：</span>
            

        

    

    


        


            


            

        

        


            

                  <span id="priceSpan" style="font-size:20px;color:#f00;">0.00</span>
            

        

    

    


        


            


            

        

        


            

                  <span>元</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="btn">
            

        

    

    


        


            


            

        

        


            

                  <div class="btnCancel">
            

        

    

    


        


            


            

        

        


            

                  <span>取消</span>
            

        

    

    


        


            


            

        

        


            

                  </div>
            

        

    

    


        


            


            

        

        


            

                  <div class="btnOk not-allowed">
            

        

    

    


        


            


            

        

        


            

                  <span>確定</span>
            

        

    

    


        


            


            

        

        


            

                  </div>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    




    

5）交互代碼

    


        


            


            

        

        


            

                // 紅包個(gè)數(shù)
            

        

    

    


        


            


            

        

        


            

                var txtCount = 0;
            

        

    

    


        


            


            

        

        


            

                var txtPrice = 0;
            

        

    

    


        


            


            

        

        


            

                $("#txtCount").keyup(function () {
            

        

    

    


        


            


            

        

        


            

                 txtCount = $(this).val();
            

        

    

    


        


            


            

        

        


            

                 $("#priceSpan").html(txtCount * txtPrice);
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 紅包總金額
            

        

    

    


        


            


            

        

        


            

                $("#txtPrice").keyup(function () {
            

        

    

    


        


            


            

        

        


            

                 txtPrice = $(this).val();
            

        

    

    


        


            


            

        

        


            

                 $("#priceSpan").html(txtPrice);
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

4、完整代碼

紅包數(shù)量和紅包金額那里還有幾個(gè)交互和邏輯判斷，有興趣的小伙伴可以自己實(shí)現(xiàn)下，有疑問(wèn)的可咨詢了解

完整代碼可以查看gitCode：小5聊 / Csdn Red Bag Html · GitCode

 

5、基礎(chǔ)知識(shí)點(diǎn)

總結(jié)：前端布局，要玩出花樣和效果，還是需要點(diǎn)藝術(shù)天賦?？傊τ腥さ模瑒?cè)腴T可能會(huì)覺(jué)得比較難，當(dāng)你熟練之后，還是挺有趣的！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司