CSS
文章平均质量分 64
陈田田
专注前端
展开
-
CSS设置透明度
div{ filter: alpha(opacity=50); -moz-opacity: .5; opacity: .5;}下面是我用到的一个例子,最终效果为:这里底部的小条就是透明的,其样式为: .ck-slideBox { position: absolute; bottom: 0; left: 0;原创 2016-11-08 16:35:13 · 2067 阅读 · 0 评论 -
微信小程序教程:文字超出显示区域后隐藏并显示省略号
单行文字超出后隐藏首先容器需要有固定的宽高,其次加入以下代码即可。view { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行文字超出后隐藏容器不需要有固定的宽高,只需加入以下代码即可。无需指定高度,只需指定最多显示几行,属性 -webkit-line-clamp。本示例中最多显示3行...原创 2018-11-27 12:46:00 · 1727 阅读 · 0 评论 -
CSS和网络性能
CSS和网络性能CSS对于呈现页面至关重要 - 在找到、下载和解析所有CSS之前,浏览器不会开始呈现 - 因此我们必须尽可能快地将其放到用户的设备上。关键路径上的任何延迟都会影响我们的“开始渲染”,并让用户看到空白屏幕。什么是大问题?从广义上讲,这就是CSS对性能至关重要的原因:浏览器在构建渲染树之前无法渲染页面;渲染树是DOM和CSS组合结果;DOM是HTML加上需要对其进行操作的...原创 2018-11-23 15:38:29 · 380 阅读 · 0 评论 -
CSS清除浮动方法大全
一、浮动产生的原因 子元素使用了 CSS 的 float 属性后,脱离了文档流,导致其父元素高度无法被撑开,从而引起父元素的某些 CSS 属性无法正常显示,同时导致后续元素的显示位置出现错位。示例代码:页面效果:我们可以看到:①父元素 out-box 没有被撑开;②父元素 out-box 后面的 p 元素也收到了影响。二、解决方法 方法1:为父元素设置高度 .out-box { height原创 2017-11-23 18:35:39 · 331 阅读 · 0 评论 -
使用CSS3实现加载中动画
在以往的网页制作中,通常会使用一个GIF图片来表达loading效果。但随着CSS3的兴起与发展,越来越多的加载中特效可以通过动画效果来实现。这样做得好处是: 1.较少http请求, 2.解决GIF图片失真的问题, 3.便于大小以及颜色的调整。以下为博主新制作的一个loading效果图: 部分代码截图如下: 下载源文件,可进入 QQ 前端交流群 580256837,下载【CSS3实原创 2017-07-04 15:20:18 · 1258 阅读 · 0 评论 -
box-sizing属性值和作用
兼容问题 首先,box-sizing属性在FireFox中存在兼容问题,所以需要使用-moz-box-sizing做一下兼容。属性值box-sizing:content-boxbox-sizing:border-boxbox-sizing:inheritcontent-box这是box-sizing的默认属性值是CSS2.1中规定的宽度高度的显示行为在CSS中定义的宽度和高度就对应到原创 2017-01-20 17:45:18 · 11484 阅读 · 0 评论 -
清除浮动常用方法
为什么要清除浮动 浮动会使当前标签产生向上浮的效果,导致不同浏览器在计算父级元素高度,或者显示前后标签位置的时候产生意想不到的问题。清除浮动的方法为父元素定义height设置父元素浮动,同时为其设置高度在浮动元素的后面添加一个空的div标签,并为新添加的标签设置clear:both在浮动元素的后面添加一个空的br标签,并为新添加的标签设置clear:both为父元素设置overflow:原创 2017-01-20 12:47:31 · 555 阅读 · 0 评论 -
鼠标划上之cursor
用户在使用浏览器查看页面时,许多鼠标划上的操作可以提升用户体验度。 比如在默认的文字上显示的是光标,在可点击的链接处显示的是手型,可以说这两种使我们最为常用的显示方式。但除了这些之外,还有许多的鼠标划上显示方式,如下如: 对应于cursor可以使用的值都在上面的表格中,这里是一段示例代码,大家可以复制感受一下。<!DOCTYPE html><html><head> <title>c原创 2017-01-18 19:00:16 · 490 阅读 · 0 评论 -
使用jQuery实现鼠标滑过图片移动特效
在网页应用中,鼠标操作是最为常见和频繁的操作,在用户移动鼠标浏览页面的时候,一些交互特效的提醒会增强用户体验度,也可让用户感觉页面在和他“交流”,从而增加用户在页面的逗留时间,以及增加深层次访问的可能性。今天tity带大家做一个简单的示例,当鼠标移动到图片上的时候图片会向上动一下,等到鼠标离开后,图片又返回到原来的位置。首先,我们先来做如下图所示的页面布局: 页面布局部分:<ul> <li原创 2016-12-08 12:06:06 · 3067 阅读 · 0 评论 -
使用CSS3实现加载中动画
在用户访问页面的过程中,可能需要请求数据,进行响应。 但是如果在等待数据的过程中不给用户任何提示,用户的感觉是迷茫的,所以我们经常会看到在请求数据的过程中添加一个loading的gif图片。随着技术的发展,我们希望用简单的代码就能实现这个功能,同时解决由于GIF图片带来的锯齿的问题。最近tity在做日本换乘APP内嵌h5页面的时候就遇到了这样的问题。 最终实现在请求数据时的效果:<!DOCTYP原创 2016-11-25 12:16:22 · 2697 阅读 · 0 评论 -
Canvas时钟
canvas可以用极少的代码实现酷炫的功能。 今天tity带大家实现一个简单的时钟效果,先铺代码:<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>时钟</title> <style type="text/css"> canvas { di原创 2016-11-23 10:28:52 · 822 阅读 · 0 评论 -
CSS设置选中网页文字时的背景和颜色
CSS设置选中网页文字时的背景和颜色在网页中,选中某段文字,默认的显示效果为:可以看到,选中后文字颜色为白色,背景为蓝色。现我们想设置,选中后文字为红色,背景为黄色。需要用到CSS伪类 ::selection。IE9+、Opera、Google、Chrome、Safari都支持 ::selection 选择器。Firefox 通过其私有属性 :: moz-selection 支持。设...原创 2018-12-06 14:38:35 · 4495 阅读 · 0 评论