Skip to content

Instantly share code, notes, and snippets.

View wplnancy's full-sized avatar

wplnancy wplnancy

27 followers · 60 following
View GitHub Profile
@wplnancy
wplnancy / index.html
Created March 19, 2017 15:04
百度下拉框，vue实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
@wplnancy
wplnancy / index.html
Created March 19, 2017 15:03
vue实现的留言板(自创版)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
@wplnancy
wplnancy / index.html
Created January 29, 2017 05:29
vue.js实现留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery-1.7.2.js"></script>
@wplnancy
wplnancy / index.html
Created January 29, 2017 05:28
vue.js实现百度搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度搜索</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.gray {
@wplnancy
wplnancy / index.html
Created January 13, 2017 14:59
会翻转的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:8rem "微软雅黑"; padding: 200px;}
.zhi{margin:0.2rem;color:#369; position: relative;}
.zhi:before,.zhi:after{
@wplnancy
wplnancy / index.html
Created January 13, 2017 14:56
css3按钮的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
#box{width: 400px; height: 200px; background-color: #ccf; margin: 100px auto; /* border-radius: 200px/100px; */ border-radius: 50%;
box-shadow:
0 -15px 15px #88f inset,
@wplnancy
wplnancy / index.html
Created January 13, 2017 13:42
扇形导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扇形展开</title>
<style type="text/css">
*{margin: 0; padding: 0}
@font-face{
font-family: 'icon';
src: url("font/icons.eot"),url("font/icons.svg"),url("font/icons.ttf"),url("font/icons.woff");
@wplnancy
wplnancy / index.html
Created January 13, 2017 13:31
一个雪花的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: #000000;
}
@wplnancy
wplnancy / index.html
Created January 13, 2017 11:51
翻转的导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
@wplnancy
wplnancy / index.html
Created January 13, 2017 09:44
类似qq客服右侧停靠
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类似QQ客服始终悬浮在网页右侧并可依次展开的菜单导航</title>
<link href="css/css.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
var timer = null;