随笔分类 - CSS
摘要：1、先看效果 就是点击之后反转成蓝色的过程，不知道用什么软件能录制个gif（如果你有什么好的录制gif软件可以告诉我，哈哈），就将就着看吧。 上代码，html版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
阅读全文
摘要：1、单行文本过多时展示小点点.... .ellipsis { overflow: hidden; //超出隐藏 white-space: nowrap; //不换行 text-overflow: ellipsis; //变成小点点 } 2、多文本换行指定第几行出现小点点 .name { font-s
阅读全文
摘要：多个div放在一起，边框如何去重 先看一下效果 在看一下改进后的效果 是不是舒服多了。 上代码 <ul class="firstul"> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> </ul> CSS u
阅读全文
摘要：我们在开发一些前端页面的时候，会考虑到一些设备屏幕的兼容性问题，这个时候需要根据屏幕的分辨率以及缩放比例来进行实时的宽高设定，所以我总结了用JavaScript方法进行获取用户电脑屏幕的分辨率和缩放比例的数据： 获取屏幕缩放比例 //获取屏幕缩放比例 function getRatio() { va
阅读全文
摘要：当我使用像笔记本电脑这样的设备时，它被放大了，当我缩小到 90% 时，它看起来好多了。 我使用了缩放：90%；首先，但这不适用于 Firefox 或 safari。通过一些研究，我发现 transform:scale (0.9); 是要走的路。 Zoom IE适用。 但是，当我这样做时 html 或
阅读全文
摘要：一篇介绍flex属性，很不错的文章 https://yoksel.github.io/flex-cheatsheet/#section-display
阅读全文
摘要：CSS 添加背景图片，图片靠右，距离右边10px .backgroundbg { background: url("/Content/images/icon2.png") no-repeat; background-position: right 10px center; }
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：test-overflow属性可以定义文本溢出知容器时如何显示，具体用法道如下： text-overflow 属性规定当文本溢出包含元素时发生的事情。 默认值：clip 语法：text-overflow: clip|ellipsis|string; 允许的值： clip：修剪文本。 ellipsis
阅读全文
摘要：鼠标放在一个div上，另一个div展示出来。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>鼠标悬停图片上显示文字 在线演示 www.divcss5.com</title> <style> img{border:0}/*
阅读全文
摘要：使用 onmouseover 和 onmouseout 代替 hover 动态加载 :hover无效，只能使用方法
阅读全文
摘要：利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-H
阅读全文
