2017年10月17日
打字效果动画实现方法
摘要： 方法一(纯css实现)： html代码： css样式： 缺点：只能实现一行式的打字效果，无法打出一段落文字 方法二（jquery）: html代码： jquery代码： 方法三（jquery-typed插件）: html代码： 引入Typed.js，Typed.js内容如下 调用Typed.js 方 阅读全文
posted @ 2017-10-17 17:19 HelloShadow 阅读(1247) 评论(0) 推荐(1) 编辑
2017年9月25日
wow.js+animate.css——有趣的页面滚动动画
摘要： 今天偶然间发现了一个使用特别简单的页面动画效果，还挺不错的，玩了一个上午，现在介绍一下这个滚动动画： 一、使用方法： 1.下载animate.css 2.下载wow.js 3.引用文件，像这样： 4.初始化wow.js 或者 属性解释： 5.在想要加入动画的地方加上wow 样式，加上一个animat 阅读全文
posted @ 2017-09-25 18:18 HelloShadow 阅读(1613) 评论(0) 推荐(0) 编辑
2017年9月11日
css中伪类/伪元素详解
摘要： 一、伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分，区别在于， 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的(如:hover/:active)。 而伪元素则用于创建一些不在文档树中的元素，并为其添加样式(如:before/:after)。 二、 阅读全文
posted @ 2017-09-11 17:59 HelloShadow 阅读(817) 评论(1) 推荐(0) 编辑
2017年8月29日
web常见几种处理图标方法
摘要： 方法一： 用background制作小图标 像这样，拿到设计稿后把所有的图标放在一张图片上，利用background-position、width、height来控制图标的位置及大小。 代码： 引用时： 优点： 图片作为背景来显示图标，图标的效果好，不容易出现锯齿 缺点： 图标大小及颜色难以控制，特 阅读全文
posted @ 2017-08-29 11:04 HelloShadow 阅读(2223) 评论(0) 推荐(0) 编辑
2017年8月24日
<meta>标签详解
摘要： 一、<meta>标签的定义和用法 <meta> 元素可提供有关页面的元信息（meta-information），位于文档的头部<head>和</head>之间，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 二、<meta>标签的属性 1.必要属性 2.可选属性 conte 阅读全文
posted @ 2017-08-24 10:58 HelloShadow 阅读(395) 评论(0) 推荐(0) 编辑
2017年8月23日
css样式优先级问题
摘要： 官方表述的CSS样式优先级如下： 那么，我们来举个例子： html代码： 引入一个style.css样式： 在style.css样式中写入 打开html可以发现 图1 ↑ 可见内联式的样式权重要高于外部引用，那么我们把内联的style样式去掉，图片显示大小如图2： 图2↑ 图3↑ 图4↑ 同样是外部 阅读全文
posted @ 2017-08-23 16:02 HelloShadow 阅读(26373) 评论(1) 推荐(0) 编辑
2017年8月21日
常见浏览器兼容性问题及解决方案
摘要： 问题一：背景颜色透明（设置background的rgba属性在ie下的兼容性问题） 解决方案： 问题二：圆角、阴影 解决方案： 1.ie-css.htc 2.调用ie-css3.htc脚本 问题三：min-width/min-height/max-width/max-height 解决方案： *注： 阅读全文
posted @ 2017-08-21 15:20 HelloShadow 阅读(872) 评论(0) 推荐(1) 编辑
2017年8月18日
去除inline-block间隙的几种方法
摘要： 为什么会产生间隙？ 由于编写代码时的美观和可读性，在代码中添加回车或空格而产生的间隙。 html代码： 方法一： 调整html代码，缺点降低了可读性，如下 或者 方法二： 去掉闭合标签： 方法三： font-size:0 方法四： margin设为负值,*注：margin的值通常为font-size 阅读全文
posted @ 2017-08-18 13:35 HelloShadow 阅读(320) 评论(0) 推荐(0) 编辑
清除浮动的几种方式
摘要： 不清除浮动会怎样？ （1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示 （4）：下方内容往上移盖住浮动区域的内容 html代码： 方式一： 在.container下，最后再加一个div如下： 方式二： 给父元素.container添加样式： 方式三： 伪类清除浮动： 阅读全文
posted @ 2017-08-18 12:55 HelloShadow 阅读(585) 评论(0) 推荐(0) 编辑
2017年8月17日
css 居中问题总结
摘要： html代码： css样式： 一、水平居中 *一般用于文字以及inline-block/inline水平居中 ，设置该值表示box-item内文字居中对齐 *一般用于类似div的block水平居中，表示box-item整个div在box内水平居中对齐 二、垂直居中 高度等于行高，适合单行文字居中对齐 阅读全文
posted @ 2017-08-17 16:41 HelloShadow 阅读(259) 评论(0) 推荐(0) 编辑