之前为了让Html中的文字实现首行缩进，我都是前面用好几个空格（或者 ）来凑的，这样显得很不优雅，而且具体多少个空格还不一致。 原来css里有专门的属性，可以实现这个功能，那就是 text-indent 说明 用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。 默认值： not specified 继承性： yes 版本： CSS1 JavaScript 语法： object.style.textIndent="50px" 可能的…
如题，使用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>…
开发过程中，有时候需要两行文字左右（两端）都对齐，例如以下： 用户名 密码 我们预期是这样： 用户名 密 码 需要对齐，这个时候可以在『密码』中间加空格，但是有个问题，有时候空格的宽度不是我们所预期的那样，导致还是不能两端对齐 所以这里我用了个特殊的空白符，比较特殊是因为他的宽度就是和普通文字一样的宽度，而且是?看不见的~ 下面列出来，需要的话，到两个箭头中间去复制，就可以啦： 以下两个箭头中间的，默认先试试第一组箭头里面的就可以了 --> <-- --> <--
页面排版的时候，会遇到一个需要将div或者其他元素垂直居中到容器的问题，实现的示例效果如图所示： 先说下传统做法，在知道父容器高度的情况下，使用 <!doctype html> <html> <head> <style> .parent { background: blue; width: 400px; height: 400px; } .child { width: 100px; height: 100px; background: green; /* 水平居中 …
如图，用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 …
发现项目中一个小问题，多行文本显示在网页上，右侧没有对齐，导致不是很美观，如图所示： 解决办法很简单，只要加一个text-align: justify;就可以了 .class-name { text-align: justify; /*其他省略*/ } 来看下效果：
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") …
Input输入框中默认的placehoder是灰色的（如下“请填写”的提示语），可能企划会调整它的颜色。 <input class="cust-input" type="text" placeholder="请填写"> 我们可以使用CSS的::placeholder来实现 如下： /* 给PlaceHoder更换颜色#9B6624 */ .cust-input ::placeholder { color: #9B6624; opacity: 1; /* Firefox 中可能需要加这个*/ } /* 为…
发现一个问题，input输入框在有些浏览器（例如Chrome浏览器）里，在获得焦点的时候，自动弹出自动完成提示框，有时候自动完成会比较方便用户输入之前的数据，但是有时候却不是我们想要的，反而影响用户正常的使用，例如这个输入框是输入验证码的，自动完成就没有必要，有时候我们会在input输入框自定义弹出一个例如日期选择框，这个时候自动完成框会覆盖掉我们的日期选择的div。 解决方法很简单，只要在input加一个就可以了， 完整的如下： <input autocomplete="off" name="address…
