随笔 - 381
文章 - 0
评论 - 11
阅读 -
57万
随笔分类 - css
css document
较完整的轮播图特效
摘要：js代码： /** * Created by Administrator on 16-7-18. */ $(function(){ //主图区域轮播代码 var linum = $('.slider-item').length; var sitemW = $('.slider-item').widt
阅读全文
一种新的隐藏-显示模式诞生——css3的scale(0)到scale(1)
摘要：.dropdown-menu { background: rgba(255, 255, 255, 0.98) none repeat scroll 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); left: 50%; padding: 20px; pos
阅读全文
你所不知的 CSS ::before 和 ::after 伪元素用法
摘要：CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，
阅读全文
scale等比缩放才能做到看上去能让线条以中心点展开
摘要：.nav-menu>ul>li>a::before { background: #333 none repeat scroll 0 0; bottom: -2px; content: ""; height: 2px; position: absolute;//注意a一定得是relation相对定位才
阅读全文
loading.io一个可以直接生成loading gif图标的站点
摘要：官网是：http://loading.io/ 进去后，可以拖动左图大小，然后点右边的make gif就可以自动生成所选大小的gif图标了，生成后会弹出一个download窗，点download下载即可。 还可以生成svg图和css代码，其生成和下载方式与gif一样。
阅读全文
按住ctrl键可以在新窗口打开图片
摘要：用firebug查看网页时，img标签(或background属性里面的url地址源)里面的图片源按住ctrl键可以弹出新窗口显示，并可右键另存为到本地目录
阅读全文
背景图片等比缩放的写法background-size简写法
摘要：1、背景图片或图标也可像img一样给其宽高就能指定其缩放大小了。 比如一个实际宽高36*28的图标，要缩小一半引用进来的写法就是： background:rgba(0, 0, 0, 0) url("../images/report_icon@2x.png") no-repeat scroll lef
阅读全文
一个a::before的写法
摘要：#key_table table tr td a::before{//这是个a前面的蓝色小圆点 background: #48A7D9; content: "";//这是before元素中的内容 border-radius: 50%; display: inline-block;//这个属性很重要，
阅读全文
创业类网站建设日志1——搭建服务器svn以及前端开发环境
摘要：1、需要在linux环境的服务器下搭建node和npm还有Grunt,所以先需要一个叫putty的工具连接服务器命令行终端 2、双击putty工具，在HostName一栏输入项目服务器地址：172.168.1.101(端口默认22即可)，输入完后点open即可弹出一个终端界面 3、输入用户名andi
阅读全文
Grunt构建工具插件篇——之less工具3和watch配合自动化编译
摘要：grunt less转换成css速度慢 而且页面会全部刷新？ grunt less转换成css速度慢 而且页面会全部刷新？ 最近遇到了个问题，grunt里用less，当修改完.less里面的样式，对应 的.css文件会好几秒才修改，然后浏览器上显示也会耗时好几秒，有时候很慢，要不停保存啊刷新啊或者删
阅读全文
Grunt构建工具插件篇——之less工具2
摘要：Grunt任务分为两部分，一部分是任务，即Grunt要执行的代码，找到对应功能的插件就成。所以等会要下载grunt-contrib- less包，这个插件便是把less文件编译成能直接使用的css。另一部分是配置，即传给grunt.initConfig方法的对象。 关于如何安装Grunt，创建Gru
阅读全文
Grunt构建工具插件篇——之less工具
摘要：Grunt--Less 摘要： 之前介绍了自动构建工具Grunt，其中有一个模块是"grunt-contrib-less"，下面是配置Grunt自动编译less文件。 安装： Grunt是基于node，功能模块化。你可以将grunt-contrib-less配置在package.json中然后npm
阅读全文
input框的默认bug解决办法
摘要：input框的默认bug是在没干掉边框的情况下是不能设置背景颜色的，否则边框会变成内边框(黑色)效果，很难看。 解决办法是： none掉input框的边框：border:none; 再设置其背景色为任何颜色就没问题了。 但是，此时你要是想给这个input框一个看上去的边框怎么办，因为none掉了，所
阅读全文
段落p元素内的响应式文本布局就靠rem单位实现
摘要：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>设置字体为rem单位，文本会不会响应式变化</title></head><body><p style="font-size: 2rem;">就对啦客观上看就按悲伤的
阅读全文
图片自适应浏览器窗口宽度——就是响应式图片等比缩放效果
摘要：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>图片宽度自适应</title> <style type="text/css"> img{ max-width: 100%;//一个max-width解决图片响应式
阅读全文
iconfont.cn阿里巴巴矢量图下载字体图标实战
摘要：1、阿里巴巴矢量图网址：www.iconfont.cn 2、然后用新浪微博账号登录 3、输入要查找的图标相应的关键字，回车 4、滑过要找的图标，点击购物车，让图标存储到暂存架中 5、点击暂存架，存储为新的项目 6、输入项目名，就会跳转到项目管理界面 7、然后点击下载到本地就会生成一个iconfont
阅读全文
layer.layui.com 一个不错的弹窗层js插件库
摘要：http://layer.layui.com/
阅读全文
自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
摘要：前段时间，到网上找素材时，看到了一个很个性的滚动条式，打开Chrome的调试工具看了一下，发现不是用JavaScript来模拟实现的，觉得 有必要折腾一下。于是在各大浏览器中对比了一下，发现只用Chrome适用，也就是说这个用的是Chrome的私有CSS属性。便百之谷之后，发现原来不 仅仅只用Chr
阅读全文
css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版
摘要：1、html： <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="./css/reset.css"/> <link rel="stylesheet" href="./cs
阅读全文
css3实战版的点击列表项产生水波纹动画
摘要：1、html+js： <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="./css/reset.css"/> <link rel="stylesheet" href=".
阅读全文
