最近有些小伙伴咨询博主说前端布局好难&＃xff0c;其实都是熟能生巧&＃xff01;

模仿C站动态发红包界面&＃xff0c;css&＃43;div实现布局&＃xff0c;纯Javascript实现交互效果

目录

1、界面效果

2、界面分析

2.1、整体结构

2.2、标题

2.3、表单

2.4、按钮

3、代码实现

3.1、标题区域布局

3.2、表单区域

3.2.1、祝福语

3.2.2、红包数量

3.2.3、红包总金额

3.2.4、余额支付

3.3、确认按钮区域

4、完整代码

5、基础知识点

1、界面效果

• 完成效果

• C站发红包界面 

2、界面分析

2.1、整体结构

上部分为标题、中间为表单、底部为确定按钮

2.2、标题

底部背景、标题文本、右上角关闭按钮

2.3、表单

祝福语文本、红包数量文本、红包总金额、当前余额文本显示、以及前往充值按钮

2.4、按钮

左边为需支付金额显示&＃xff0c;右边为取消和确定按钮

3、代码实现

3.1、标题区域布局

1&＃xff09;背景图片

图片宽度380px像素&＃xff0c;高度56px像素

2&＃xff09;背景图片自动填充

布局一个div&＃xff0c;宽度为400px像素&＃xff0c;高度为56px像素&＃xff0c;然后再设置背景图片样式&＃xff0c;由于图片本身宽度小于div宽度&＃xff0c;div会多出20px像素&＃xff0c;图片会自动填充&＃xff0c;默认效果如下

 3&＃xff09;图片百分比显示

再给div设置背景百分比缩放显示&＃xff0c;效果如下

background-size: 100%;

 4&＃xff09;文本

布局一个span标签&＃xff0c;显示"添加红包"文本&＃xff0c;白色黑体&＃xff0c;18号字体&＃xff0c;加粗&＃xff0c;左对齐&＃xff0c;且左边距20px像素。并设置div标签56px像素垂直居中样式&＃xff0c;效果如下

5&＃xff09;关闭按钮

在右上角添加一个关闭按钮&＃xff0c;一般可以设置一个svg标签图标&＃xff0c;设置高28px&＃xff0c;宽36px

• base64编码图标

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

• 错位布局

设置相对定位position样式&＃xff0c;位于右上角。它所在的父级就要设置绝对定位relative。这样关闭按钮图标就会以它所在的父级定位&＃xff0c;否则可能会布局错位&＃xff0c;比如下面错位效果

•  正确布局

• 样式代码


添加红包



3.2、表单区域

3.2.1、祝福语

1&＃xff09;组成元素

红色星号、文本、输入文本框、刷新文本按钮

2&＃xff09;calc函数

它属于css3的功能&＃xff0c;calc() 函数用于动态计算长度值。对于布局非常有作用。

需要特别注意&＃xff0c;函数内的参数值前后都需要保留一个空格&＃xff0c;例如&＃xff1a;width: calc(100% - 40px)&＃xff1b;

3&＃xff09;刷新小图标

样式设置16x16高宽度

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

4&＃xff09;文本框默认高亮

input输入文本框默认点击选中会有一个高亮的效果&＃xff0c;可以设置样式去掉

outline:none;

5&＃xff09;随机文本

设置随机祝福语文本值&＃xff0c;可设置js全局数组参数变量保存。

并且给右边的刷新按钮绑定点击事件&＃xff0c;然后在事件内使用随机函数进行随机显示

• 交互代码

• 效果如下

• 布局代码

*
祝福语

3.2.2、红包数量

布局和祝福语一样&＃xff0c;刷新按钮换成了单位文本

• 布局效果

• 布局代码

3.2.3、红包总金额

布局和前面一样&＃xff0c;这就是前端布局的魅力&＃xff0c;有很多可以重用的东西

• 布局效果

• 布局代码 

3.2.4、余额支付

这里的布局和前面稍微多点东西&＃xff0c;布局差不多。

这里只做读取展示用&＃xff0c;也可以用input输入文本框&＃xff0c;设置默认只读即可

• 布局效果

• 布局代码 

3.3、确认按钮区域

1&＃xff09;支付额文本

这里布局左定位&＃xff0c;金额数字加红色字体

2&＃xff09;取消和确认按钮

取消按钮鼠标移动上去边框变深&＃xff0c;直接使用css的hover属性即可完成。

确认按钮的效果使用同样的方式

3&＃xff09;布局效果

 4&＃xff09;布局代码

5&＃xff09;交互代码

// 红包个数
var txtCount &＃61; 0;
var txtPrice &＃61; 0;
$("#txtCount").keyup(function () {
txtCount &＃61; $(this).val();
$("#priceSpan").html(txtCount * txtPrice);
});
// 红包总金额
$("#txtPrice").keyup(function () {
txtPrice &＃61; $(this).val();
$("#priceSpan").html(txtPrice);
});

4、完整代码

红包数量和红包金额那里还有几个交互和逻辑判断&＃xff0c;有兴趣的小伙伴可以自己实现下&＃xff0c;有疑问的可咨询了解











添加红包

*
祝福语

*
红包数量

个

*
红包总金额

元

*
余额支付

当前余额&＃xff1a;51.25 元
前往充值 >

需支付&＃xff1a;
0.00
元

取消

确定






5、基础知识点

calc()函数	可用于高宽度精准布局&＃xff0c;更加合理布局
position和relative	相对和绝对定位&＃xff0c;同样有助于合理定位和布局
Math.random()	随机函数&＃xff0c;随机产生0~1的值

总结&＃xff1a;前端布局&＃xff0c;要玩出花样和效果&＃xff0c;还是需要点艺术天赋。总之&＃xff0c;挺有趣的&＃xff0c;刚入门可能会觉得比较难&＃xff0c;当你熟练之后&＃xff0c;还是挺有趣的&＃xff01;