倒计时5，4，3，2，1css实现(count down from 5 to 1 using css)
count down from 5 to 1, a useful animation. show the code to you:
<!DOCTYPE html>
<html>
<style>
#contain {
wid...[2018/10/29]
弹性盒
引自Flex 布局教程：语法篇
作者： 阮一峰
日期： 2015年7月10日
链接：http: www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[2018/10/29]
【HTML&CSS】搜狐页面代码编写
<!DOCTYPE html>
<!--[if lt IE 7]> <html cla ="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> &l...[2018/10/29]
CSS回顾（基础知识，元素，选择器，盒子，颜色）
元素分类：
1.行级元素：内联元素 inline
特征：内容决定元素所占位置，不可以通过CSS改变宽高
span strong em a del
2.块级元素：block特征：独占一行，可以通过CSS...[2018/10/29]
纯css实现Material Design中的水滴动画按钮_CSS教程_CSS纯css实现Material Design中的水滴动画按钮_CSS教程_CSS
前言
大家平时应该经常见到这种特效，很炫酷不是吗
这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和c ，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些js库就显得有些过于庞大了，同时...[2018/10/29]
css中grid属性的使用详解_CSS教程_CSScss中grid属性的使用详解_CSS教程_CSS
grid布局
加在父元素上的属性
grid-template-column grid-template-rows
定义元素的行或列的宽高
如果父元素被等分成了9等分，则，不管有多少个子元素，都显示9等分
grid-template-columns: 33%...[2018/10/29]
webpack配置sass模块的加载
webpack管理的项目，我们希望用sa 定义样式，为了正常编译，需要做如下配置。这里不讲webpack的入门，入门的文章，我推荐这篇《webpack入门》。
为了使用sa ，我们需要安装sa 的依赖包
在项目下，运行下列命令行
npm install --save-dev sa -l...[2018/10/26]
css实现垂直居中
html结构
<div cla ="box box2">
<span cla ="content content2">垂直居中</span>
</div>
默认c 样式结构
.box{
width:200px;
h...[2018/10/26]
HTML是什么与基础格式
html 又称 超文本标记语言。
网页的本质其实就是html代码，通过浏览器，将html转换翻译成用户可以看得懂的展现丰富的页面。
所以制作网站的本质，其实就是编写html代码。
HTML基础格式
<html>
<head>
<!-- 编码一定要写哦...[2018/10/26]
element-ui 的el-button组件中添加自定义颜色和图标
我使用的element-ui的版本是V1.4.13。
如上图所示，如果使用el-button,加颜色是可以通过设置type属性的值，加图标就设置icon属性的值。
现在产品给了一个需求，就是自定义的很多种类别，不同的类别的按钮显示不同的颜色和图标。如下图所示：
为了方便开发，目前的解...[2018/10/26]
css布局-内容自适应屏幕
c 页面布局实现，内容部分自适应屏幕，当内容高度小于浏览器窗口高度时，页脚在浏览器窗口底部；当内容高度高于浏览器窗口高度时，页脚自动被撑到窗口底部。
c 如下：
1 <style type="text/c ">
2 ...[2018/10/26]
CSS中字距，词距，首行缩进，字体大小，排版相关问题的探讨
先说明下，这是在谷歌浏览器下字体显示等问题做个研究，火狐下有点差异，不过火狐占有率低，而且显示的没有谷歌那么合理，不管它先。IE卡的要死，半死不活，也懒得深入研究这些细节，字体排版上不是强迫症，差别也不大。
div{
border: 1p...[2018/10/26]
初探HTML5:制作一份邀请函，入门级，适用于新手。
初探HTML5:制作一份邀请函 目的：制作这个简易的邀请函，只是为了让新手入门Web开发。
在制作页面之前，我们先来看看整个邀请函的整体面貌。
一.首先编写HTML代码
1 <!DOCTYPE html>
2 <html>
3 <he...[2018/10/26]
css实现中间文字两边横线效果 _CSS教程_CSS
1. vertical-align属性实现效果：
vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
<div cla ="header">
...[2018/10/26]
使用css实现物流进度的样式的实例代码_CSS教程_CSS
效果：
c 样式：
<style type="text/c ">
ul li {
list-style: none;
}
.package-status {
...[2018/10/26]
火狐浏览器下显示页面有点大的bug火狐浏览器下显示页面有点大的bug
做页面时候，发现火狐和腾讯QQ浏览器有个问题，就是会将页面显示的比较傻大，像点了缩放比例120%似的，事实上缩放比例是100%，没有动。
甚至面对这个问题，连腾讯公司都没解决掉，也让我很困惑。
比如：
同样打开www.qq.com（任何网址都这样），发现火狐和腾讯qq浏览器显示偏大，而360...[2018/10/25]
H5调拨打电话界面H5调拨打电话界面
<a href=”tel:15771791266 ”>拨打电话</a>
切记不要用js调用 直接用a标签 苹果安卓塞班都能调起来[2018/10/25]
CSS实现文字两端对齐
最近的项目遇到了这样的需求：（要求标题部分不管文字多少，都必须两端对齐）
如下图：
当时也没有多想直接使用‘ ’进行代替，毕竟产品同学想快一点看到效果，不敢怠慢！不过到第二个页面就傻眼了。
如图：
这很明显‘ ’已...[2018/10/25]
CSS 书写规范
cla 类名的命名应该以功能为依据；
例如： .btn-danger; .btn-warning
CSS组件
一个组件==一个独立的功能模块
针对一个组件，通过功能描述样式
组件命名，功能描述：left-menu
组件中的内容 .left-menu...[2018/10/25]
css基础内容
c 基础内容
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义...[2018/10/25]
CSS基础一
什么是CSS？
CSS：层叠样式表
网页一层一层的。
而c 就可以分别为网页的各层设置样式。
CSS样式编写放在那里？
（内联样式）放在元素的style属性中。给谁设置写在那个标签里面。
也称为：内联样式，只对当前的元素中的内容起作用。
内联样式不方便复用，不推荐使用。
内联样式属于...[2018/10/25]
如何给网站头部添加视频海报如何给网站头部添加视频海报
给网站头部添加视频海报 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 &nbs...[2018/10/25]
前端基础-- CSS别来无恙-
CSS知识
CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。C 之车更丰富的文档外观，C 可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框；允许改变文字的大小，装...[2018/10/25]
css实现“加号”效果的实例代码_CSS教程_CSScss实现“加号”效果的实例代码_CSS教程_CSS
实现下图的加号效果：
若想实现这个效果， 只需一个div元素即可搞定。
需要用到c 的为了before和after， 以及border特性。
先设置一个div便签
<div cla ="add"></div>
再设...[2018/10/24]
CSS设置背景模糊的实现方法_CSS教程_CSS
在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到 filter 属性来设置他的模糊值。
html代码如下
<!DOCTYPE html>
<html>
<...[2018/10/24]
css实现中间文字，两边横线效果
1. vertical-align属性实现效果： vertical-align 属性设置元素的垂直对齐方式。 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。 中间文字，两边横线 2. c 伪类实现效果： <div cla ="...[2018/10/24]
自定义select 小三角
把select小三角换成自己的图片
效果：
c 样式：
<style>
#my_select {
display: flex;
display: -webkit-flex;
width:...[2018/10/24]
自定义scoll样式自定义scoll样式
使用伪类自定义scroll样式
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport...[2018/10/24]
vue 关于数组和对象的更新vue 关于数组和对象的更新
在日常开发中，我们用的最多的就是 绑定数据
<div v-for="item in data" :key="item.id"> <!-- 内容 --> </div>
如果你有ng的开发经验，假设 data 你要更新数据了
this.data=res.d...[2018/10/24]
js实现进度条
不多说，直接上代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Progre B...[2018/10/24]
设计之下PDF下载高清完整扫描原版
http: putpan.com/f 1yi5be1nsahuf66d4/ 本书讲了什么
本书共三部分，全面讲解了用户体验设计的流程和方法。
作者什么来头
搜狐新闻客户端UED团队，隶属于搜狐新媒体中心，成立于2012年，专门负责搜狐新闻客户端产品的体验设计，包括视觉体验、交互设计、渠道运营、...[2018/10/24]
css设置背景模糊
使用filter属性来设置模糊值
效果：
c 样式：
<style type="text/c ">
.cover {
width: 600px;
height: 300px;
...[2018/10/23]
frameset 在 Google Chrome 中无法隐藏左边栏解决方法！
使用Frameset 框架，发现在IE下，
<frameset name="mainDefine" cols="200,10,*" frameborder="NO" border="0" framespacing="0" rows="*">
<frame nam...[2018/10/23]
团队合作前端书写习惯总结
CSS 规范
CSS 书写规范
cla 类： 小写字母,''-''分割；
图片: 小写字母，‘-’或者‘_’ 分割;
避免选择器嵌套层级过多，少于3级;
不要随意使用id，id应该按需使用，而不能滥用;
使用CSS缩写属性 ，比如padding:0 10px 5px 5px等等，这样精简代码同时...[2018/10/23]
css的一些基础（一）
定位
定位相关属性用于设置目标组件的位置，常用的定位相关属性如下。
属性说明值
position
设置定位方法
static、relative、absolute、fixed
left
right
为定位元素设置偏移量
长度、百分比、...[2018/10/23]
使用rem编写自适应屏幕网页造成div被span撑高的解决办法
原始代码：
<html>
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta name=...[2018/10/23]
实现花瓣登陆静态页面
思路： 花瓣网 1、对页面进行分析 · 2、下载素材 3、对页面尺寸进行分析 4、实现 下载素材 将页面素材保存到本地，方法如下图 页面尺寸进行分析 只做了大概得尺寸，尺寸获取方法，使用截图得方法获...[2018/10/23]
Vue创建头部组件示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...[2018/10/23]
CSS3学习笔记CSS3学习笔记
CSS3 被划分为模块
其中最重要的 CSS3 新增实用模块包括：
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面
CSS3 边框:
用于创建圆角
border-radius: 倒角(px);
用于向方框添加阴影
...[2018/10/22]
CSS实现三列布局
三列布局指的是两边两列定宽，中间的宽度自适应。 常用三种方法： 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法，左右两栏选择绝对定位，固定于页面的两侧，中间的主体选择用margin确定位置 1 <!DOCTYPE html>&...[2018/10/22]
整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好
效果图：
我的代码示例：
<!--提示模态框-->
<div cla ="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
...[2018/10/22]
自定义checkbox样式
通过选中时添加背景图片自定义CheckBox样式
效果：
CSS样式：
<style type="text/c >
label {
width: 10%;
display: ...[2018/10/22]
html学习
什么是HTML？
HTML:超文本标记语言。
所谓超文本也就是超链接,可以让我们从一个网页跳转到另一个网页。
HTML基本格式
<html>
<head> ...[2018/10/21]
sessionStorage 基本使用
se ionStorage 是浏览器数据存储的方法之一，用于临时保存同一窗口的数据，关闭窗口后se ionStorage 的数据将会不存在，它是以 key value 键值对的形式储存。
基本用法
存值
se ionStorage.test="1212";
取值
var...[2018/10/21]
css实现修改默认滚动条样式
<!DOCTYPE HTML PUBLIC "- W3C DTD HTML 4.0 Transitional EN"> <html> <head> <title>scroll </title> ...[2018/10/21]
标签设置为inline-block后，如何消除标签之间的间隔。
标签设置为inline-block后，如何消除标签之间的间隔。
例如：
<div>
<ul> <li><a href="#">学习</a></li> <l...[2018/10/21]
CSS实现元素居中原理解析_CSS教程_CSSCSS实现元素居中原理解析_CSS教程_CSS
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的，在实践中，它往往难住了很多人。
让元素水平居中相对比较简单：如果它是一个行内元素，就对它的父元素应用 text-align: center；如果它是一个块级元素，就对它自身应用 mar...[2018/10/20]
值得收藏的CSS命名规范(规则)常用的CSS命名规则 _CSS教程_CSS
CSS命名规范(规则)常用的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局...[2018/10/20]
Bootstrap表单验证插件bootstrapValidator使用方法整理
插件下载：http: www.jq22.com/jquery-info522
插件介绍
先上一个图：
下载地址：https: github.com/nghuuphuoc/bootstrapvalidator
使用方法：http: www.cnblogs.com/huang...[2018/10/20]
html和css入门 （二）
CSS基础
什么是CSS
简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。
CSS发展历史
1996年 CSS 1.0 规范面世，其中加入了字体、样色等相关属性。
1998年 CSS 2.0 规范推出，这个版本的 CSS 也是最广为人知的一...[2018/10/20]
经验首页