css实现三角箭头
像下面的向右三角箭头，只有纯css不需要图片就可以实现了。width:0px;height:0px;border-width:0px 16px 20px 16px; border-style:solid;border-color: transparent transparent #FFF tran...
8款超酷体验的jQuery/CSS3应用插件
1、jQuery/CSS3实现Android Dock菜单效果这是一款基于jQuery和CSS3的Android Dock菜单效果，点击底部的按钮即可让应用图标浮动上来，并且按钮也出现3D的翻转效果。jQuery是一款应用十分广泛的javascript类库，很多前端开发者都十分青睐jQuery框架。...
css3- border
css3-border1.border-color2.border-image3.border-radius ( none | <length>{1,4} [ / <length>{1,4} ]? )第一个值是水平半径。如果第二个值省略，则它等于第一个值，这时这个角就是一个...
关于css3的rgba
在rgba之前，我们应该知道rgb。它就是红色R+绿色G+蓝色B。那rgba是什么？简单的说就是在rgb的基础之上加上一个通道alpha。他的语法如下：r 红色值。正整数(0~255) | 百分数g 绿色值。正整数 (0~255)| 百分数b 蓝色值。正整数 (0~255)| 百分数a...
css新笔记
这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。border-radius很多开发者估计都没有正确认识这个border-radius，因为基本上很多人都是这么用的：.box { border-radius: 4px;}稍微高端一点的是这样的：.box { bord...
非常有用的css使用总结
积小流以成江海，很多东西你不总结就不是你的东西常用css总结：/*设置字体*/ @font-face { font-family: 'myFont'; src: url('../font/myFont.eot'); src: url('../font/...
css实现超出部分用...代替
如果是一行的话css为white-space: nowrap； 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。overflow: hidden； 隐藏超出单元格的部分。text-overflow: ellipsis； 将被隐藏的那部分用省略号代替。若是想要超出指定的行数再显示......
深入理解CSS绝对定位absolute
前面的话前面已经介绍了定位的偏移和层叠，例子中大量的应用了绝对定位。因为相较于相对定位和固定定位，绝对定位在实际中应用频率更高、应用场景更广泛。本文将介绍使用绝对定位时的具体细节定义当元素绝对定位时，会从文档流中完全删除。元素位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置...
找出html中的图片、包括css中的图片，读出图片数据转换为base64数据
<?phpecho ">> 图片的地址，css里面的要打单引号\r\n";echo ">> 相同的图片，使用css实现图片地址只出现一次，有助于减小文件体积\r\n";echo ">> 因为凡是出现图片地址的地方，都会被转换成base64字符串\r\n";$...
前端学习 -- Css -- 行间距
在CSS并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接的设置行间距，行高越大行间距越大。使用line-height来设置行高 。行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示。...
CSS高度坍塌问题的原因以及解决办法
原因:在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。<!DOCT...
CSS------如何让ul中的li分为两列甚至多列
转载：http://blog.sina.com.cn/s/blog_7f13f92a0100rkfg.html只需要复制ul和li中的style样式即可如果需要自定义多少列，只需要修改li中的with属性即可<ul style="overflow:hidden;zoom:" >@fore...
前端学习——css实用技术
一，css控制文本样式文本相关的css属性有很多，包括：color;font-size;font-weight;text-transform(大小写uppercase等);text-decoration(下划线等)；letter-spacing;word-spacing;text-shadow(cs...
前端学习 -- Css -- 盒子模式
框模型：CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。一个盒子我们会分成几个部分：– 内容区(content)上图的elem...
前端学习---css基本知识
css基本知识我们先看一个小例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&...
探索PostCSS：打造定制化、前瞻性的现代CSS开发工作流
PostCSS，作为一个高度可扩展的CSS处理器，以其强大的插件系统和对CSS未来特性的前瞻支持，已经成为现代前端开发中的重要工具。本篇文章将深入探讨PostCSS的核心概念、工作原理、主要优势，以及如何利用它来提升CSS开发效率与代码质量。 一、什么是PostCSS？ PostCSS是一种用Jav...
CSS之旅——第二站 如何更深入的理解各种选择器
上篇我们说了为什么要使用css，这篇我们就从选择器说起，大家都知道浏览器会把远端过来的html解析成dom模型，有了dom模型，html就变成了xml格式，否则的话就是一堆“杂乱无章”的string，这样的话没人知道是什么鸟东西，js也无法什么各种getElementById，所以当浏览器解析成do...
CSS的语法规则——基础选择器
用法： 在style内使用 .名称 来定义，不可以使用数字做开头，只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值 特点： 可以让多个标签来使用同一个class，也可以让同一个标签使用不同的类 举例： <!DOCTYPE html>&l...
Less2css error 终极解决方案
使用sublime Text3 的时候，安装less2Css后，和很多人一样以为大功告成，开始要运行编译less文件，结果开始发现于是乎开始搜索问题和解决方案，然后就有了下面的解决方案1方案1：通过window path + less.js-windows 的方式（网上可以快速找到这种解决的方式）注...
CSS进阶之模拟Bootstrap网格布局
目前暂时实现效果，容后面整理心得，先贴上源代码。源码<!DOCTYPE html><html><head> <title>demo bootstrap</title> <link rel="stylesheet" type...