石家庄手机网站建设,广东省建设协会网站,做的好看的旅游网站,seo信息查询最近有些小伙伴咨询博主说前端布局好难#xff0c;其实都是熟能生巧#xff01; 模仿C站动态发红包界面#xff0c;cssdiv实现布局#xff0c;纯javascript实现交互效果 目录
1、界面效果
2、界面分析
2.1、整体结构
2.2、标题
2.3、表单
2.4、按钮
3、代码实现
3.… 最近有些小伙伴咨询博主说前端布局好难其实都是熟能生巧 模仿C站动态发红包界面cssdiv实现布局纯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、按钮
左边为需支付金额显示右边为取消和确定按钮 3、代码实现
3.1、标题区域布局
1背景图片
图片宽度380px像素高度56px像素 2背景图片自动填充
布局一个div宽度为400px像素高度为56px像素然后再设置背景图片样式由于图片本身宽度小于div宽度div会多出20px像素图片会自动填充默认效果如下
div stylewidth:400px;height:56px;background:url(/1674461966454.jpg);background-size: 100%;/div 3图片百分比显示
再给div设置背景百分比缩放显示效果如下
background-size: 100%; 4文本
布局一个span标签显示添加红包文本白色黑体18号字体加粗左对齐且左边距20px像素。并设置div标签56px像素垂直居中样式效果如下 5关闭按钮
在右上角添加一个关闭按钮一般可以设置一个svg标签图标设置高28px宽36px
base64编码图标
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6XI3RLgFm0oaAmD3Motb2CdwREOsP61BrwQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNsxlkKvUpgab4pEDpwwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfpAD5ItKkFZ6hi/N9M6g893UOQnbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1OazVIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAytf2h/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTXsfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpClVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhfyAAAAAElFTkSuQmCC
错位布局
设置相对定位position样式位于右上角。它所在的父级就要设置绝对定位relative。这样关闭按钮图标就会以它所在的父级定位否则可能会布局错位比如下面错位效果 正确布局样式代码
style typetext/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; }
/stylediv classtitlespan classtitle-text添加红包/spanimg classclose srcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6XI3RLgFm0oaAmD3Motb2CdwREOsP61BrwQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNsxlkKvUpgab4pEDpwwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfpAD5ItKkFZ6hi/N9M6g893UOQnbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1OazVIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAytf2h/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTXsfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpClVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhfyAAAAAElFTkSuQmCC alt
/div
3.2、表单区域
3.2.1、祝福语
1组成元素
红色星号、文本、输入文本框、刷新文本按钮
2calc函数
它属于css3的功能calc() 函数用于动态计算长度值。对于布局非常有作用。
需要特别注意函数内的参数值前后都需要保留一个空格例如width: calc(100% - 40px)
3刷新小图标
样式设置16x16高宽度 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lXIVFUUx7/nPpV1N1zbzNQsXFkUoZBCqHKNhJikKid14QpsjLv3Uc/yCQpCcISotyJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvNLm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc1HawCVj76oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2lOpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgdbu4shjwH4Ubt24ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBGCJE3PNfeNlPRmqcc5J8HzdMQ9ZznxptPtMANI4oeVw79uuzAfjp3DYa9kBUjfGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQYAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvgOnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MXgVcVv1HyBYa3mVg005MtPpbJuhehlgNwlrMlXyqaftWulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII
4文本框默认高亮
input输入文本框默认点击选中会有一个高亮的效果可以设置样式去掉
outline:none;
5随机文本
设置随机祝福语文本值可设置js全局数组参数变量保存。
并且给右边的刷新按钮绑定点击事件然后在事件内使用随机函数进行随机显示
交互代码
script typetext/javascript$(function () {// 祝福语var labelText [成就一亿技术人!, 节日快乐, Hello World, 新春大吉!, 大吉大利, Bug Free];$(.cl-input img).click(function () {// Math.random() - 随机函数会产生0~1之间的值var index parseInt(Math.random() * labelText.length);var text labelText[index];$(.cl-input input).val(text);});});
/script
效果如下布局代码
div classcontent-labeldiv classcl-textspan stylecolor:#f00;*/spanspan祝福语/span/divdiv classcl-inputinput placeholder请填写红包祝福语或标题 value成就一亿技术人! /img srcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lXIVFUUx7/nPpV1N1zbzNQsXFkUoZBCqHKNhJikKid14QpsjLv3Uc/yCQpCcISotyJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvNLm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc1HawCVj76oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2lOpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgdbu4shjwH4Ubt24ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBGCJE3PNfeNlPRmqcc5J8HzdMQ9ZznxptPtMANI4oeVw79uuzAfjp3DYa9kBUjfGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQYAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvgOnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MXgVcVv1HyBYa3mVg005MtPpbJuhehlgNwlrMlXyqaftWulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII alt/div
/div
3.2.2、红包数量
布局和祝福语一样刷新按钮换成了单位文本。
这里文本框有个离开焦点事件如果判断没有输入值那么提示”请输入数量并且红包数量只能是正整数文本框也变为红色边框默认则为蓝色边框
布局效果布局代码
div classcontent-labeldiv classcl-textspan stylecolor:#f00;*/spanspan红包数量/span/divdiv classcl-inputinput placeholder请填写红包数量 value /span个/span/div
/div 交互效果交互代码
$(#txtCount).blur(function () {txtCount $(this).val();if (txtCount undefined || txtCount null || txtCount || txtCount.trim() ) {$(i, $(this).parent()).show().html(请输入数字);$(this).parent().addClass(red-border);}else {if (txtCount 0) {$(i, $(this).parent()).show().html(请输入有效数字格式);$(this).parent().addClass(red-border);}else if (!isNaN(txtCount)) {$(i, $(this).parent()).hide();$(this).parent().removeClass(red-border);}else {}}
});
3.2.3、红包总金额
布局和前面一样这就是前端布局的魅力有很多可以重用的东西
布局效果布局代码
div classcontent-labeldiv classcl-textspan stylecolor:#f00;*/spanspan红包总金额/span/divdiv classcl-inputinput placeholder请填写红包总金额 value /span元/span/div
/div 3.2.4、余额支付
这里的布局和前面稍微多点东西布局差不多。
这里只做读取展示用也可以用input输入文本框设置默认只读即可
布局效果布局代码
div classcontent-labeldiv classcl-textspan stylecolor:#f00;*/spanspan余额支付/span/divdiv classcl-inputlabel当前余额b51.25/b 元/labelspan classspan前往充值 /span/div
/div
3.2.5、文本边框交互逻辑
当点击文本框时先判断是否已经提示无效信息也就是已经有红色边框有则不显示蓝色边框没有则显示蓝色边框。当离开文本框焦点那么则移除蓝色边框
交互效果交互代码
// 文本框点击事件
$(.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、确认按钮区域
1支付额文本
这里布局左定位金额数字加红色字体
2取消和确认按钮
取消按钮鼠标移动上去边框变深直接使用css的hover属性即可完成。
确认按钮的效果使用同样的方式
3布局效果 4布局代码
!--按钮--
div classbuttondiv classpricespan需支付/spanspan idpriceSpan stylefont-size:20px;color:#f00;0.00/spanspan元/span/divdiv classbtndiv classbtnCancelspan取消/span/divdiv classbtnOk not-allowedspan确定/span/div/div
/div
5交互代码
// 红包个数
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、完整代码
红包数量和红包金额那里还有几个交互和逻辑判断有兴趣的小伙伴可以自己实现下有疑问的可咨询了解
完整代码可以查看gitCode小5聊 / Csdn Red Bag Html · GitCode 5、基础知识点
calc()函数可用于高宽度精准布局更加合理布局position和relative相对和绝对定位同样有助于合理定位和布局Math.random() 随机函数随机产生0~1的值keyup()键盘弹上事件click()元素点击事件blur()离开焦点事件总结前端布局要玩出花样和效果还是需要点艺术天赋。总之挺有趣的刚入门可能会觉得比较难当你熟练之后还是挺有趣的
