html/css
文章平均质量分 87
H小志
有事心不乱,无事心不空。大事心不畏,小事心不慢。
展开
-
marquee标签实现跑马灯效果--无缝滚动
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果。但无意中发现了一个html标签——可以实现多种滚动效果,无需js控制。使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等,而且使用起来方便快捷,真的为我节省了不少时间。 marquee标签不是HTML3.2的一部分,并且只支持MSI原创 2016-07-29 16:05:01 · 57125 阅读 · 2 评论 -
如何让图片按比例响应式缩放并自动裁剪的css技巧(同时也适用于一些轮播父容器响应式缩放)
响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果想要图片按比例缩放, 最简单的就是把img宽度设为100%, 不设置高度,高度就会自动跟着高度缩放但是如果要达到的效果是,要让图片的宽高要按一定的比例显示,如1:1 、4:3 等, 然而图片尺寸不是这个比例,又不想让图片拉伸变形,自动裁剪掉两边多余部分、这该如何解决呢?首先,今天准备了四张宽高各不相同的素材,如下图所转载 2017-12-22 10:06:34 · 4018 阅读 · 0 评论 -
css实现多行文本溢出显示省略号(…)
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 代码如下 overflo转载 2017-12-22 09:22:03 · 669 阅读 · 0 评论 -
如何将页脚固定在页面底部
文章转载于:W3CPLUS作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚foote转载 2017-02-22 10:30:25 · 692 阅读 · 0 评论 -
Sass实现颜色卡的制作
效果图:实现代码:html: var list = ['red', 'orange', 'yellow', 'green', 'blue', 'purple','black']; var html = ''; for(var i = 0; i < list.length; i++){ var ul = document.createElement('ul'原创 2016-12-15 17:24:07 · 798 阅读 · 0 评论 -
CSS预处理器——SASS学习笔记(二)
Sass的控制命令1. @if@if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if 外,还可以配合 @else if 和 @else 一起使用。假设要控制一个元素隐藏或显示,我们就可以定义一个混合宏,通过 @if...@else... 来判断传进参原创 2016-12-15 17:22:33 · 1338 阅读 · 0 评论 -
CSS预处理器——SASS学习笔记(一)
什么是CSS预处理器?CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只需要使用这种语言进行编码工作。通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特原创 2016-12-15 17:21:22 · 5154 阅读 · 0 评论 -
一些CSS和浏览器之间的怪异显示及对应的解决办法
有的时候编写的CSS样式没有什么错误,但在浏览器中却会出现一些很奇怪的问题,明明没有间距的地方出现了间距,没有空隙的地方多了一条白线,或者IE、Firefox下显示的效果截然不同,这些都与使用CSS Hack的原因相同。下面列举几个在工作中经常会用到的样式属性所存在的问题及解决方案。(1)inline-block的兼容与4px空隙问题在实际工作中,我们经常会用到“inline-block”原创 2016-09-24 14:49:02 · 1472 阅读 · 0 评论 -
史上最全的CSS hack方式一览
转载来自CSDN freshlover的博客专栏《史上最全CSS Hack方式一览》做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商转载 2016-09-12 14:07:34 · 711 阅读 · 0 评论 -
使echarts图表兼容ie浏览器
echarts 在谷歌浏览器中可以所向披靡,丝毫不会出现因兼容性问题出现图像不显示的结果。而在ie中似乎却不太混得开。最近在做各种图表的展示,引入了资源echarts.js 谷歌中正常显示,而在ie中却出现了如下问题: 初始化的时候图表不显示,在F12开启的情况下 刷新页面,图表正常显示,经过调试发现 echarts.init(document.getElementById(‘firstEch原创 2018-01-08 11:40:50 · 11741 阅读 · 0 评论