好咖啡要和朋友一起品尝，好“模板”也要和同样喜欢它的人一起分享。 网站首页CSS3|Html5
flex环境下文本溢出显示省略号的实现
发布时间：2020-06-15 22:09:39作者：雪饮
一般的我们实现css的文本溢出显示省略号做法如下text-overflow:ellipsis文本溢出显示省略号： div{ text-overflow:ellipsis; overflow:hidden; white-space: nowrap; }当
详细信息>>flex布局justify-content:space-between与flex-flow:row wrap换行问题
发布时间：2020-02-04 19:50:25作者：雪饮
我们知道css3中的flex布局中使用justify-content:space-between;属性可实现块级别元素的两端对齐并且多个块元素之间自动有间距，如下图所示：然而该仅仅是该特性想要实现多行
详细信息>>flex布局学习笔记
发布时间：2018-04-10 17:23:59作者：雪饮
flex布局学习笔记之orderflex布局学习笔记之flex-growflex布局学习笔记之flex-shrink与flex-basisflex布局学习笔记之flexflex布局学习笔记之align-self对齐方式与交叉轴
详细信息>>flex布局学习笔记之align-self对齐方式与交叉轴
发布时间：2018-04-10 17:16:48作者：雪饮
flex布局中align-self对齐方式受影响于交叉轴.并且不同的交叉轴下不同的对齐方式要相应对高或宽做下调整,否则效果不明显会导致自己以为某个对齐方式不生效.交叉轴默认是正
详细信息>>flex布局学习笔记之flex
发布时间：2018-04-10 17:16:07作者：雪饮
使用flex布局的每个容器项还可以直接用flex属性,flex属性是flex-grow、flex-shrink、flex-basis这三个属性的一个综合表示法,属性值有三个,分别对应这三个属性.<!doctype h
详细信息>>flex布局学习笔记之flex-shrink与flex-basis
发布时间：2018-04-10 17:14:52作者：雪饮
(1)在使用flex布局中,若父级元素内容不足以容下所有子元素,那么每个子元素就会默认进行缩小,而flex-shrink可以为每个子元素定义缩小权重。flex-shrink默认值为1.如果没有
详细信息>>flex布局学习笔记之flex-grow
发布时间：2018-04-10 17:14:14作者：雪饮
在flex布局中,可以设置每个容器的flex-grow属性,该属性可使得容器在父级容器有空余空间的时候自动放大,该属性值默认为0表示不放大。如下3个div默认情况下应该都是全部浮动
详细信息>>flex布局学习笔记之order
发布时间：2018-04-10 17:12:35作者：雪饮
flex布局中若给容器项目使用order则可以调节容器的排序,order数值越小越靠前,默认为0.如下3个div,默认情况下应该是按照div在html语法中的顺序摆放的,但是由于这3个div使用
详细信息>>设置table中的单元格td或表头th的内容强制不换行
发布时间：2018-03-08 17:49:42作者：雪饮
table,th,td{border:1px solid pink;word-break: keep-all;white-space:nowrap;}
详细信息>>css-英文或数字溢出自动换行
发布时间：2017-03-05 19:29:26作者：雪饮
在IE和FF中都会撑大容器，不会自动换行并且当数字或者英文中带有汉字时，会从汉字处换行，而纯汉字却可以自动换行,针对这个问题，本文给出了详细的解决方法，感兴趣的朋友可不要错过
详细信息>>原生ajax与html5实现文件上传（带进度条）
发布时间：2016-08-21 12:45:54作者：雪饮
本demo使用了原生的ajax与html5的上传监控事件，该事件可以在控制台consle.log函数中查看对象属性等信息。前端：<!doctype html><html><head><meta charset="utf-8"><title>无
详细信息>>原生Ajax方式实现图片预览及上传（html5特性）
发布时间：2016-08-14 16:40:59作者：雪饮
今天雪饮给大家分享的是带预览图的文件上传。主要利用了html5的FormData属性、原生ajax，html5的fileapi。demo环境：phpstudy-php5.3前端：<!doctype html><html><head><meta ch
详细信息>>利用html5的api实现非iframe的ajax文件上传
发布时间：2016-06-11 20:23:04作者：雪饮
ajax也可以不用iframe模拟式上传文件了。html：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
禁用iphone浏览器自动为电话号码添加link样式
发布时间：2015-09-30 16:56:10作者：雪饮
Phone手机上的浏览器（如Safari），在解析网页的时候会自动给 像是电话号码的数字 加上link样式。可以添加下面的meta禁用掉这个功能。<meta name="format-detection" content="t
详细信息>>css3的翻转属性（倒影）reflect
发布时间：2015-06-21 17:21:52作者：雪饮
实例一<!doctype html><html> <head> <style> img{ margin:400px; /*-webkit-box-reflect:above;设置倒影在盒子的上方*/ -webkit-box-reflect:below;/*设置倒
详细信息>>css3彩色边框,彩虹边框
发布时间：2015-06-21 15:36:32作者：雪饮
不用多个div的嵌套也可以实现多重的彩色边框，css3的box-shadow就拥有这样的功能，如下案例：<!doctype html><HTML> <head> <meta charset="utf-8" /> <style> .multiple{
详细信息>>css3盒子阴影box-shadow的应用
发布时间：2015-06-21 15:02:22作者：雪饮
box-shadow 属性向框添加一个或多个阴影。下面是box-shadow实例。<!doctype html><html> <head> <meta charset="UTF-8" /> <style> div{ margin:100px; width:2
详细信息>>css3边框属性-repeat,slice,outset
发布时间：2015-06-21 09:14:54作者：雪饮
repeat-repeat<!doctype html><html> <head> <meta charset="UTF-8" /> <style> div{ width:300px; height:300px; background:url(shuaige.jpg) no-repeat c
详细信息>>css3边框属性-裁剪原理
发布时间：2015-06-20 11:18:14作者：雪饮
案例源代码如下：<!doctype html><html> <head> <meta charset="UTF-8" /> <style> div{ width:300px; height:300px; background:url(./shuaige.jpg) center n
详细信息>>css3的颜色模式
发布时间：2015-06-17 19:27:23作者：雪饮
色轮模式（hsl）<!doctype html><html> <head> <style> body{background:HSL(0,100%,50%)} /* 色轮的三个参数： H：0-360（为了区别不同的颜色） S:饱和度，同一个区域一个颜
详细信息>>css3中的文本属性-溢出,文本流,阴影,描边与填充,tab长度,边界
发布时间：2015-06-17 07:33:30作者：雪饮
text-overflow（文本溢出处理-省略号）<!doctype html><html> <head> <style> p{width:100px; overflow:hidden; /*溢出隐藏（这里则是按宽度溢出）*/ white-space:nowrap;
详细信息>>css选择器实例-文件类型及隔行换色
发布时间：2015-06-16 17:01:27作者：雪饮
仿百度文库搜索结果页 <!doctype html><html> <head> <style> a[href$="html"]::before{content:url(images/web.jpg)} a[href$="txt"]::before{content:url(images/tx
详细信息>>css3的UI状态伪类选择器,属性选择器与伪对象选择器
发布时间：2015-06-16 10:59:53作者：雪饮
UI状态伪类选择器<!DOCTYPE html><html> <head> <style> input:disabled{background:yellow;color:green} input:enabled{background:pink;color:red} input:check
详细信息>>css3的兄弟选择器与结构伪类选择器
发布时间：2015-06-15 09:15:28作者：雪饮
兄弟选择器<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>兄弟选择符 (E~F)</title> <style> h4~p{color:#f00;} /*选择p标签的所有兄弟标签p，并使这些被
详细信息>>html5在线画板以及canvas的图片加载
发布时间：2015-06-10 20:10:11作者：雪饮
html5在线画板的所有功能都实现了，只是只是在功能与功能之间有逻辑交错，如果真有心将它做到完美，只需要处理下逻辑即可。还有就是对于三角形的绘制时会在画笔笔触变粗时有下面
详细信息>>