CSS下让DIV进行缩放，最常用的是使用zoom，不过发现一个问题，在Firefox下zoom并没有起作用 用如下方式，可以解决： .zoom-div { zoom: 0.66; -ms-zoom: 0.66; -moz-transform: scale(0.66, 0.66); -moz-transform-origin: left top; } 代码中0.66是相对于1的缩放大小，所以0.66就是缩小成原来的66%, 可以根据自己的事情情况调整。
CSS下让DIV进行缩放，最常用的是使用zoom，不过发现一个问题，在Firefox下zoom并没有起作用 用如下方式，可以解决： .zoom-div { zoom: 0.66; -ms-zoom: 0.66; -moz-transform: scale(0.66, 0.66); -moz-transform-origin: left top; } 代码中0.66是相对于1的缩放大小，所以0.66就是缩小成原来的66%, 可以根据自己的事情情况调整。
默认的CSS设置背景图，我们是这样写的： background: url("images/bg.png") no-repeat; 此时背景图片no-repeat表示不重复，位置会默认在div的左上角。 如果想要让背景图居中的话，可以这样写： background: url("images/bg.png") center center no-repeat; 第一个center表示水平居中，第二个center表示垂直居中。 所以如果想要让背景图水平居中，但是垂直方向上靠上，可以： background: url("im…
项目中经常要用到的给某个DIV增加阴影效果，效果如图： 利用box-shadow只要一行css就可以搞定了 /* 阴影1 */ .yy1 { box-shadow: 0 1px 1px 0 rgb(0 0 0 / 20%); } /* 阴影2 */ .yy2 { /*4个边都有阴影*/ box-shadow: rgb(0 0 0 / 30%) 0px 0px 10px; /* 这是颜色较深的（黑色） */ /* box-shadow: black 0px 0px 10px; */ } 示例代码如下： <htm…
之前为了让Html中的文字实现首行缩进，我都是前面用好几个空格（或者 ）来凑的，这样显得很不优雅，而且具体多少个空格还不一致。 原来css里有专门的属性，可以实现这个功能，那就是 text-indent 说明 用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。 默认值： not specified 继承性： yes 版本： CSS1 JavaScript 语法： object.style.textIndent="50px" 可能的…
之前的文章介绍 [CSS]控制文本长度多出来用省略号(单行或者多行适用)，不过可以做的更完善一些，就是如果用户把鼠标一到文字上，需要显示全部内容，可以在标签上加title='全部内容'。经过测试div span等等都是可以加title的 示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Untitled</title> <style>…
如题，使用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; /*其他省略*/ } 来看下效果：
Input输入框中默认的placehoder是灰色的（如下“请填写”的提示语），可能企划会调整它的颜色。 <input class="cust-input" type="text" placeholder="请填写"> 我们可以使用CSS的::placeholder来实现 如下： /* 给PlaceHoder更换颜色#9B6624 */ .cust-input ::placeholder { color: #9B6624; opacity: 1; /* Firefox 中可能需要加这个*/ } /* 为…