摘要: 先来看w3c的background-size的几个值: background-size:cover; 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 background-size:contain; 把图像图像扩展至最大尺寸,以使其宽度和高度完 阅读全文
posted @ 2017-06-20 16:16 木西梧 阅读(3283) 评论(0) 推荐(1) 编辑
摘要: 项目中要用到旋转木马效果,一共5张图片轮播,并且点击对应的索引按钮能切换到对应的图片。本效果实在jquery.carousel.js插件的基础上做了一些改进,以实现上述需求。 效果图如下: 代码: HTML: CSS: jquery.carousel.js: 阅读全文
posted @ 2017-05-11 11:54 木西梧 阅读(2530) 评论(0) 推荐(1) 编辑
摘要: 最近做项目,用到类似的效果。 效果图如下: 直接上代码: HTML: CSS: Js: 阅读全文
posted @ 2017-05-06 12:58 木西梧 阅读(346) 评论(0) 推荐(1) 编辑
摘要: 众所周知,ie6、7的hack直接用*即可,但是ie8的话就比较麻烦,在做半透明背景的时候,为了兼容ie6、7,可以为其设置纯色,但是ie8也同样不支持半透明,需要单独为它设置纯色背景。下面的兼容代码,经测试可用。 阅读全文
posted @ 2017-05-06 12:36 木西梧 阅读(624) 评论(0) 推荐(0) 编辑
摘要: 最近做项目,banner要实现立体的翻转效果,通过搜索,发现了jQuery的一款插件,能够很好的实现该效果,这里就记录一下。 效果图如下: 使用方法: 1. 在html中引入必要的js和css文件: 2. css: 3. js jquery.slicebox.js文件可以在这里下载: http:// 阅读全文
posted @ 2017-04-01 14:57 木西梧 阅读(1357) 评论(0) 推荐(0) 编辑
摘要: 最近在项目中遇到不固定宽高的图片要水平垂直居中的情况,发现垂直居中存在兼容性问题,下面收集了一些方法,可根据需要权衡使用。 1. 背景法(兼容性好,简单,但不利于动态导入的图片) html: css: 2. 图片外面用个p标签,通过设置line-height使图片垂直居中(兼容性较好) html: 阅读全文
posted @ 2017-01-18 10:50 木西梧 阅读(4679) 评论(0) 推荐(0) 编辑
摘要: 阅读张鑫旭的文章才明白: 浮动的本来只是让文字环绕图片显示,其他所有用浮动实现的效果其实都不应是浮动应该做的事情,所以网页布局方面慎用float。具体前因后果我就不多说了,有兴趣的可以前往其博客: http://www.zhangxinxu.com/wordpress/2010/01/css-flo 阅读全文
posted @ 2016-12-22 16:33 木西梧 阅读(329) 评论(0) 推荐(0) 编辑
摘要: 需要用到jCanvas插件和jQuery。 jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.min.js 代码如下: 效果大概如下: 阅读全文
posted @ 2016-12-20 15:38 木西梧 阅读(13035) 评论(4) 推荐(1) 编辑
摘要: 写移动端项目时,总是会纠结是用css3 media query 还是用rem。移动端框架挺多,但是因为项目都比较小,不考虑使用。 无意在网上找到一个移动端rem布局的解决方案,经个人实践,目前未出现什么大问题,收藏备用。 阅读全文
posted @ 2016-12-15 17:36 木西梧 阅读(562) 评论(0) 推荐(0) 编辑
摘要: 项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置。于是就在jQuery的一款插件jquery.carousel.js的基础上进行了一些改进,不足的是,固定就 阅读全文
posted @ 2016-12-12 11:12 木西梧 阅读(3146) 评论(1) 推荐(0) 编辑