div中的内容/图片img垂直居中的五种方法

div中的内容/图片img垂直居中的五种方法

一、行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; }这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距(padding)法 另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如: p { padding:20px 0; }……
js/jquery按钮控制HTML5音乐开关

js/jquery按钮控制HTML5音乐开关

HTML 建立一个HTML5页面,放置<audio>标签,设置音频文件源,设置循环播放。准备两张图片,分别表示开启和暂停背景音乐两种状态,可以点击。 <audio?id="music2"?src="music.mp3"??loop="loop">你的浏览器不支持audio标签。</audio>? <a?href="javascript:playPause();"><img?src="pause.gif"?width="48"?height="50"?id="music_btn2"?border="0"></a>?javascript 我们在点击开关……
一个简单jQuery加入购物车的动画效果

一个简单jQuery加入购物车的动画效果

分享一个简单jQuery加入购物车的动画效果,代码非常简单,懂点jQuery的就能看懂。当然,如果你需要更好看的效果,可以自己发挥货自己找这方面的插件吧。 HTML<div class="gwc-c"><img src="http://ico.ooopic.com/iconset01/symbolize-icons/gif/113031.gif"/></div> <div class="content"><img src="http://demo.lanrenzhijia.com/2015/pic0622/images/big_1.jpg" class="goods" />……
ios_iphone_移动端background-attachment:fixed兼容性[失效]

ios_iphone_移动端background-attachment:fixed兼容性[失效]

 ios系统和某些移动端background-attachment:fixed不兼容性,没有任何效果,但可以hack一下就可以了,代码如下:ps:想在哪个标签加背景,可以在它class后:before. body:before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url(path/to/image) center 0 no-repeat; background-size: cover; }
纯css带三角对话框的写法

纯css带三角对话框的写法

 今天写的这个css模拟对话框,假如你理解了,那么是很好记的,你不理解没有关系,可以把我的这篇文章收藏起来,用到的时候,可以翻出来看一下! css代码 #talkbubble { margin-left:30px; width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #talkbubble:before { content:""; ……
纯Javascript画廊代码支持移动设备触摸切换

纯Javascript画廊代码支持移动设备触摸切换

  HTML 首先加载所需的CSS和js文件 <link?rel="stylesheet"?href="css/photoswipe.css">? <link?rel="stylesheet"?href="css/default-skin/default-skin.css">? <script?src="js/photoswipe.min.js"></script>? <script?src="js/photoswipe-ui-default.min.js"></script>? 以上文件大家不要担心,月光光都打包好了,您只管下载拿去用就是。接下来,准备body里的HTML部……
Lazy Line Painter有趣的jQuery路径动画插件下载

Lazy Line Painter有趣的jQuery路径动画插件下载

  准备你的SVG数据 在你选择的矢量编辑器创建您的生产线的艺术,首先在 Illustrator 中把线条图形导出为 SVG 格式,要确保图案不填充,没有封闭路径,线条要有明显的开始和结束点,类似画板绘制的图案;  代码转换 然后把导出的 SVG 文件拖放到 Lazy Line Painter 转换器中,拷贝生成的 JavaScript 代码。最后在页面中引入 jQuery、Rapha?l & Lazylinepainter,粘贴之前拷贝的代码到 DOM Ready 方……
28个纯CSS框架Loaders.css加载动画

28个纯CSS框架Loaders.css加载动画

Loaders.css是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可实现,因此运行效率比较不错。 Loaders.css的特点基于纯CSS,不需JavaScript脚本,也不需要图片,很干净。 默认提供近30个不同的Loading动画效果,你也可以发挥自己的想象来实现不同的加载动画。 Loaders.css比较轻巧,基本没什么臃肿的文件。 免费、开源……
Buttons-CSS按钮样式库

Buttons-CSS按钮样式库

Buttons-CSS按钮样式库 Buttons 是一个基于 Sass 和 Compass 构建的CSS按钮(button)样式库,图标采用的是Font Awesome,可以和Bootstrap融合使用。支持多种形状和尺寸的按钮样式可供选择,带边框和不带边框的按钮,3D 按钮,突起样式的按钮,长阴影,光晕效果,带下拉菜单的按钮,堆叠按钮,额外的环绕效果,各种文字样式。[caption id="attachment_902" align="aligncenter" width="584"] 样式效果[/caption] ……
css3实现苹果手表applewatch开机动画特效

css3实现苹果手表applewatch开机动画特效

 html5+css3 实现一个苹果表拨号动画实例,本文我们使用keyframe动画和一些小技巧来实现苹果标表盘进度条动画,效果还是比较炫的。  HTML <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title></title><link rel="stylesheet" href="index.css" type="text/css" /></head><body><section class="demo-containe……
fieldset和legend标签的使用方法[教程]

fieldset和legend标签的使用方法[教程]

  介绍 fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。PS: 所有浏览器都基本支持 <fieldset> 标签,除了部分很老的浏览器! HTML <!DOCTYPE HTML> <html>……