<input>的style的特色,你知道多少?

 年年岁岁花相似,岁岁年年人不同,人在变,岁月何尝不是(哈哈,又文艺一把)。每天看似相似,却又有着不同,今天绝对不是昨天的重复,每天都是新的一天,有不同的感受、不同的心情,发生不同的事情。哈哈,每个周一既是精力最充沛的一天、也是最惆怅的一天......

干正事、干正事,正事才是正道,好吧,本应该上周五完成的,拖到今天,想想就觉得自己在慢性自杀,此处省略一万字......

---------------------------------------以下是正-------------------------------------------

这次我想说说关于<input>标签里的类型(主要是针对移动端的哦),总之这些在此之前我是不知道滴。

先看代码:

 

 

 

 

再看每一个输入类型,在手机上输入时 弹出的输入键盘 截图:         

 

看 到了吗,看到区别了吧!!类型若是数字(type="number"),手机键盘便自动切换为数字输入;类型若是邮箱(type=“email”),手机 键盘自动切换为字母和相应的符号,总之就是这个意思就不一一说明。从用户角度出发,提高用户体验质量,节省用户切换输入的时间,两全其美为什么不用 呢!!!!

转载于:https://www.cnblogs.com/wjh0916/p/4949673.html

以下是一个基于Vite框架的青春校园运动风格登录框架,带有动态粒子效果。你可以复制以下代码到你的项目中进行使用。 ```html <template> <div class="login-container"> <div class="particles-container"> <canvas ref="canvas"></canvas> </div> <div class="form-container"> <form class="login-form"> <h2 class="form-title">Welcome Back!</h2> <div class="form-input-container"> <input type="text" placeholder="Username" v-model="username" /> <input type="password" placeholder="Password" v-model="password" /> </div> <button type="submit" class="form-button" @click.prevent="login()">Login</button> </form> </div> </div> </template> <script setup> import Particles from 'particlesjs' const particles = new Particles('canvas', { particles: { number: { value: 80, density: { enable: true, value_area: 800 } }, color: { value: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5'] }, shape: { type: 'circle', stroke: { width: 0, color: '#000000' }, polygon: { nb_sides: 5 } }, opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } }, size: { value: 5, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false } }, line_linked: { enable: true, distance: 150, color: '#ffffff', opacity: 0.4, width: 1 }, move: { enable: true, speed: 6, direction: 'none', random: false, straight: false, out_mode: 'out', bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } } }, interactivity: { detect_on: 'canvas', events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' }, resize: true }, modes: { grab: { distance: 400, line_linked: { opacity: 1 } }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } } }, retina_detect: true }) let username = '' let password = '' function login() { // Add your login logic here } </script> <style> .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #e8e8e8; } .particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .form-container { background-color: #ffffff; padding: 32px; border-radius: 4px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); } .form-title { text-align: center; margin-bottom: 16px; color: #444444; } .form-input-container { display: flex; flex-direction: column; margin-bottom: 16px; } input[type='text'], input[type='password'] { margin-bottom: 8px; background-color: #f5f5f5; border: none; padding: 12px; border-radius: 4px; font-size: 16px; color: #444444; } .form-button { background-color: #4caf50; border: none; color: #ffffff; padding: 12px; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.2s ease-in-out; } .form-button:hover { background-color: #388e3c; } @media (max-width: 768px) { .form-container { width: 100%; max-width: 400px; } } </style> ``` 在以上代码中,我们使用了 `particles.js` 库来实现动态粒子效果,使用了 `canvas` 元素来渲染粒子。同时,我们使用了 Vite 框架的 `<script setup>` 语法来定义组件的逻辑部分,包括登录表单的数据和登录逻辑。在样式部分,我们使用了常见的样式技巧来实现青春校园运动风格,比如圆角边框、阴影效果等。 你可以根据自己的需求和喜好来调整样式和粒子效果的参数,打造出符合自己品牌特色的登录框架。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值