随笔分类 -  css

1 2 下一页
鼠标悬停图片移动的效果
摘要：当前很多购物网站，像京东，蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移，下移，左移或者右移效果， 实现代码很简单，就用css3的transform便可实现。 下列代码实现的是鼠标悬停，div向上移动30px，鼠标拿开div恢复原始位置。 css： html: 就是这么简单，哈哈哈、、、、 阅读全文
posted @ 2017-07-07 22:24 iriliguo 阅读(1763) 评论(0) 推荐(0)
鼠标悬停向上滑出遮罩效果
摘要：效果如图： Title this is text If we encounter a man of rare intellect, we should ask him what books he reads. ... 阅读全文
posted @ 2017-07-05 22:30 iriliguo 阅读(2426) 评论(0) 推荐(0)
改变单选或者复选框的样式
摘要：原理是通过定位把以前的样式覆盖掉，就酱... 代码如下： 阅读全文
posted @ 2017-06-26 20:32 iriliguo 阅读(183) 评论(0) 推荐(0)
前端小知识集锦
摘要：持续更新中............ 1.cookies sessionlStorage和localStroage的区别 同点：都是保存在浏览器端，且同源的 区别： cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和 阅读全文
posted @ 2017-06-22 10:59 iriliguo 阅读(218) 评论(0) 推荐(0)
鼠标点击实现划掉文字效果
摘要：如图，是基于mui进行编码的，代码如下： 阅读全文
posted @ 2017-06-19 13:51 iriliguo 阅读(1404) 评论(0) 推荐(0)
select下拉框的样式在浏览器上的兼容问题
摘要：最近项目中遇到了自定义下拉框的默认样式在谷歌，火狐，IE上显示不同的问题。 左侧图片就是重写的样式，下拉框的右侧三角是选用的bootstrap里面的图片，通过绝对定位放过去的。 css: html: 阅读全文
posted @ 2017-06-17 21:17 iriliguo 阅读(5720) 评论(0) 推荐(0)
改变form里面input,textarea.select等的默认样式
摘要：因为在项目中有时候需要照顾到整体的色调问题，所以不得不对表单默认的样式进行更改，以下只是对input里的文本颜色做了更改。 阅读全文
posted @ 2017-06-17 20:46 iriliguo 阅读(1932) 评论(0) 推荐(0)
纯css实现互动清单
摘要：如图，点击每条信息可以实现删除这条信息的效果。 阅读全文
posted @ 2017-05-04 15:59 iriliguo 阅读(296) 评论(0) 推荐(0)
less学习笔记
摘要：1.koala可以用来编译less; 2.less注释： //不会被编译 /*此注释会编译到css里*/ 3.定义变量： less: @test_width:300px; .box { width:@test_width;//编译在css为width:300px; height:@test_widt 阅读全文
posted @ 2017-05-02 14:11 iriliguo 阅读(152) 评论(0) 推荐(0)
竖直手风琴导航菜单栏
摘要：之前有用原生js实现了菜单栏的展开收缩效果，今天用jquery实现这个效果， 并增加了鼠标点击箭头方向改变的效果。 阅读全文
posted @ 2017-04-20 16:57 iriliguo 阅读(1433) 评论(0) 推荐(0)
带三角的面包屑导航栏（方法二）
摘要：先给一个对象画三角，然后把颜色改变至对应颜色，接着复制多个模块，修饰下头尾即大功告成。 阅读全文
posted @ 2017-04-18 14:57 iriliguo 阅读(314) 评论(0) 推荐(0)
网易云音乐首页导航样式的实现
摘要：实现效果图： 背景图片： 注意：background:url("img/sprite.gif") no-repeat scroll left top中的left后面的值不可缺少，可以为top、0、-9999px、999px等； background-repeat:repeat-x;放在ul或者li均 阅读全文
posted @ 2017-04-18 13:44 iriliguo 阅读(2590) 评论(0) 推荐(0)
带三角的面包屑导航栏（新增递增数字）
摘要：Title home goods order more 阅读全文
posted @ 2017-04-10 16:39 iriliguo 阅读(229) 评论(0) 推荐(0)
带三角的面包屑导航栏
摘要：Title home goods order more 阅读全文
posted @ 2017-04-10 16:20 iriliguo 阅读(258) 评论(0) 推荐(0)
文字两边的横线实现
摘要：横线用到了伪类进行实现。 css: html: 阅读全文
posted @ 2017-03-16 19:46 iriliguo 阅读(621) 评论(0) 推荐(0)
鼠标滑动背景不动内容动
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #back { position: relative; w 阅读全文
posted @ 2017-03-10 15:07 iriliguo 阅读(516) 评论(0) 推荐(0)
鼠标hover时改变图片透明度和颜色（方法二）
摘要：this ia s monster 阅读全文
posted @ 2017-03-01 10:33 iriliguo 阅读(1428) 评论(0) 推荐(0)
让背景带上颜色
摘要：设置透明感的背景色，用rgba就能实现。 阅读全文
posted @ 2017-02-28 18:40 iriliguo 阅读(150) 评论(0) 推荐(0)
右侧固定导航栏
摘要：实现效果：固定导航栏的高度为整个屏幕高度； 实现二级导航在鼠标放在相应文字板块，从右往左出现， 鼠标移开，子导航从左往右消失（把导航栏固定在左侧，不用改js代码，也是从左往右出现，从右往左消失）。 阅读全文
posted @ 2017-02-28 16:53 iriliguo 阅读(3508) 评论(0) 推荐(0)
鼠标hover时改变图片透明度和颜色
摘要：鼠标hover时改变图片透明度和颜色 + 阅读全文
posted @ 2017-02-28 09:38 iriliguo 阅读(2697) 评论(0) 推荐(0)

1 2 下一页