Css
vue中的css作用域、vue中的scoped坑点
一、css作用域 之前一直很困扰css的作用域问题，即使是模块化编程下，在对应的模块的js中importcss进来，这个css仍然是全局的。导致在css中需要加上对应模块的html的id/class使用css选择器保证css的作用域不会变成全局而被其它模块的css污染。 在vue中引入了scoped这个概念，sco...
webpack配置：图片处理、css分离和路径问题
一、CSS中的图片处理： 1、首先在网上随便找一张图片，在src下新建images文件夹，将图片放在文件夹内 2、在index.html中写入代码：<divid="pic"></div>来放置图片 3、设置图片的css#pic{background-image:url(../images/...
CSS实现四种loading动画效果
四种loading加载效果：<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>四种加载效果</title><style>/*第一种*/.demo1{widt...
css Table布局：基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTMLTable（<table>标签）和CSSTable（display:table 等相关属性）。 HTMLTable是指使用原生的<table>标签，而CSSTable是指用CSS属性模仿HTML表格的模型。 在W3...
纯CSS实现多行文字垂直居中几种方法解析
场景：父元素高度固定，如何使其中的文字垂直居中？1、table布局： 利用display:table+display:table-cell的方法<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><t...
纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的，主要用于产品列表页面，用于产品图片下面，显示产品的名称。 想要实现的效果为： 未知文字长度，当文字长度小于盒子宽度，也就是一行时，文字居中。 当文字长度大于盒子的宽度，会自动换行，成为多行文字，此时文字左对齐。1、利用行内元素： 我首先想到了这个思路，思路如下： 让P...
CSS 的优先级机制总结
一、样式优先级： 多重样式（MultipleStyles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使用多重样式的情况。 一般情况下，大家都认为优先级是：内联样式>内部样式>外联样式，实际上不是如此，内部样式和外联样式优先级一样（看谁在先后的问题）：如果外部样式放在内部样式的后面，则外...
一个常见下拉菜单的样式：一体化小三角（纯css手写解决）
类似下拉菜单2个一体化小三角，习惯上用字体图标加jQuery处理，比较方便，但是下面纯css手写解决方式，效果也还不错，对CSS知识也是一个比较好的孔固。 小三角用了2种不同处理方式：1、利用border属性；2、利用正方形旋转45度。<!DOCTYPEhtml><html>&...
CSS深入了解border：利用border画三角形等图形
三角形实际上是border的产物我们正常使用的border都是四边一个颜色，当我们把四边换上不同颜色那么你就会发现，三角来了~！<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>c...
CSS中英文字符两端对齐实现
两端对齐实现 一般加上下面2行就可实现display:inline-block;text-align:justify; 但是对于中英文混杂的情况，中英文难一起实现对齐，原因在下面有分析，需要如下js来控制varppp=document.getElementById("ppp");ppp.innerHTML=ppp....
CSS写的提示框（兼容火狐IE等各大浏览器）
项目上使用jQuery的Tooltip组件，在谷歌上正常，在火狐和IE下没有效果，所以根据谷歌的提示框单独用CSS写了个提示框，比较好的兼容了火狐和IE，且效果一样原Tooltip代码：$('#dd').tooltip({position:'right',content:'<span><s:textn...
CSS3实现各种表情
CSS3实现各种表情 效果图： 代码如下，复制即可使用：<!DOCTYPEhtml><html><head><title></title><styletype="text/css">body{text-a...
CSS3实现图片木桶布局
CSS3实现图片木桶布局 效果图： 代码如下，复制即可使用：<!DOCTYPEhtml><script>window.navigator.appVersion.indexOf('Trident')!=-1&&alert('请用谷歌或火狐...
css实现导航切换
css实现导航切换 效果图： 代码如下，复制即可使用：<!DOCTYPEhtml><html><head><title>css实现导航切换</title><styletype="text/css">.clothes{...
CSS3实现文字折纸效果
CSS3实现文字折纸效果 效果图： 代码如下，复制即可使用：<!DOCTYPEhtml><html><head><title></title><styletype="text/css">html{heig...
