如题,使用css纯代码实现了的适用于手机版的菜单点击效果(带过渡动画),本代码使用hover鼠标划过来模拟点击,可以稍加修改实现点击事件。 效果如图: Html/CSS代码实现如下,vue下点击后实现相同的功能的代码详见:https://blog.terrynow.com/2021/09/05/vue-css-animated-menu-toggle-effect-code-implement/ <!doctype html> <html> <head> <style>…

2021-09-16 0条评论 581点热度 0人点赞 admin 阅读全文

开发过程中,有时候需要两行文字左右(两端)都对齐,例如以下: 用户名 密码 我们预期是这样: 用户名 密 码 需要对齐,这个时候可以在『密码』中间加空格,但是有个问题,有时候空格的宽度不是我们所预期的那样,导致还是不能两端对齐 所以这里我用了个特殊的空白符,比较特殊是因为他的宽度就是和普通文字一样的宽度,而且是?看不见的~ 下面列出来,需要的话,到两个箭头中间去复制,就可以啦: 以下两个箭头中间的,默认先试试第一组箭头里面的就可以了 --> <-- --> <--    

2021-09-01 0条评论 287点热度 0人点赞 admin 阅读全文

页面排版的时候,会遇到一个需要将div或者其他元素垂直居中到容器的问题,实现的示例效果如图所示: 先说下传统做法,在知道父容器高度的情况下,使用 <!doctype html> <html> <head> <style> .parent { background: blue; width: 400px; height: 400px; } .child { width: 100px; height: 100px; background: green; /* 水平居中 …

2021-08-13 0条评论 354点热度 0人点赞 admin 阅读全文

如图,用HTML画了一个表格,给表格加上了border,却发现每个td之间总有一点点间隙,影响美观 HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> <style> body { font-size: 14px; } * { margin: 0; padding: 0; } .mytable …

2021-08-12 0条评论 495点热度 0人点赞 admin 阅读全文

发现项目中一个小问题,多行文本显示在网页上,右侧没有对齐,导致不是很美观,如图所示: 解决办法很简单,只要加一个text-align: justify;就可以了 .class-name { text-align: justify; /*其他省略*/ } 来看下效果:

2021-08-11 0条评论 336点热度 0人点赞 admin 阅读全文

iView下表格(Table)组件里columns的render写法,对应普通HTML组件的写法整理如下: return h('Tag', { slot: 'list', // class: 'my-class my-class2', class: { 'show':true, 'iscolor':true }, props: { type: 'primary' }, style: { marginRight: '10px' }, attrs: { src: require("@/assets/xxx.png") …

2021-06-18 0条评论 1238点热度 0人点赞 admin 阅读全文

Input输入框中默认的placehoder是灰色的(如下“请填写”的提示语),可能企划会调整它的颜色。 <input class="cust-input" type="text" placeholder="请填写"> 我们可以使用CSS的::placeholder来实现 如下: /* 给PlaceHoder更换颜色#9B6624 */ .cust-input ::placeholder { color: #9B6624; opacity: 1; /* Firefox 中可能需要加这个*/ } /* 为…

2021-06-07 0条评论 452点热度 0人点赞 admin 阅读全文

发现一个问题,input输入框在有些浏览器(例如Chrome浏览器)里,在获得焦点的时候,自动弹出自动完成提示框,有时候自动完成会比较方便用户输入之前的数据,但是有时候却不是我们想要的,反而影响用户正常的使用,例如这个输入框是输入验证码的,自动完成就没有必要,有时候我们会在input输入框自定义弹出一个例如日期选择框,这个时候自动完成框会覆盖掉我们的日期选择的div。 解决方法很简单,只要在input加一个就可以了, 完整的如下: <input autocomplete="off" name="address…

2021-04-30 0条评论 1285点热度 0人点赞 admin 阅读全文
12