2019 年 1月 28 日随笔档案 - 伊人怎会持宠而骄

2019年1月28日

摘要： <doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery实现图片翻牌旋转特效</title> <style> *{margin:0px;paddi 阅读全文

posted @ 2019-01-28 10:02 伊人怎会持宠而骄阅读(1342) 评论(0) 推荐(0)

瀑布流之ajax

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html,body { width: 100%; h 阅读全文

posted @ 2019-01-28 09:59 伊人怎会持宠而骄阅读(118) 评论(0) 推荐(0)

楼梯效果

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #LoutiNav{ position: fixed 阅读全文

posted @ 2019-01-28 09:58 伊人怎会持宠而骄阅读(226) 评论(0) 推荐(0)

数码时钟

摘要： <!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.o 阅读全文

posted @ 2019-01-28 09:57 伊人怎会持宠而骄阅读(105) 评论(0) 推荐(0)

数字字母随机验证码

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <tr> <td align="right">验证码：</td> <td><label> <input type="text" /> 阅读全文

posted @ 2019-01-28 09:53 伊人怎会持宠而骄阅读(200) 评论(0) 推荐(0)

随机换图

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="开始" id="btns"> <input type="button" va 阅读全文

posted @ 2019-01-28 09:52 伊人怎会持宠而骄阅读(94) 评论(0) 推荐(0)

纯数字验证码

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <tr> <td align="right">验证码：</td> <td><label> <input type="text" /> 阅读全文

posted @ 2019-01-28 09:52 伊人怎会持宠而骄阅读(154) 评论(0) 推荐(0)

刷新随机改变背景色（面向对象写法）

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2019-01-28 09:51 伊人怎会持宠而骄阅读(221) 评论(0) 推荐(0)

随机抽取名字不重名

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> function rand( min,max ){ return Math.rou 阅读全文

posted @ 2019-01-28 09:50 伊人怎会持宠而骄阅读(413) 评论(0) 推荐(0)

随机乱撞的彩色圆球

摘要： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习第5天[乱撞的球]</title> <style> body { font-family: 微软雅黑; } body, h1 { margin: 阅读全文

posted @ 2019-01-28 09:50 伊人怎会持宠而骄阅读(148) 评论(0) 推荐(0)

点击DIV随机换颜色

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="改变DIV颜色" id="btn" /> <div style="width 阅读全文

posted @ 2019-01-28 09:49 伊人怎会持宠而骄阅读(633) 评论(0) 推荐(0)

小图在上选项卡

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> *{margin: 0; padding: 0; font-family: "微软雅黑";font-size 阅读全文

posted @ 2019-01-28 09:48 伊人怎会持宠而骄阅读(112) 评论(0) 推荐(0)

小图在下选项卡

摘要： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ul,ol{list-style:none;} #box { position: 阅读全文

posted @ 2019-01-28 09:48 伊人怎会持宠而骄阅读(98) 评论(0) 推荐(0)

加载等待并跳转页面

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form name=loading> <p>  <font color="#0066ff" 阅读全文

posted @ 2019-01-28 09:47 伊人怎会持宠而骄阅读(1175) 评论(0) 推荐(1)

选项卡

摘要： css部分 /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, ifr 阅读全文

posted @ 2019-01-28 09:47 伊人怎会持宠而骄阅读(106) 评论(0) 推荐(0)

飞机进度条

摘要： css部分 *{padding:0; margin:0;} .container{ margin: 0 auto; width: 60%; padding:20px; } .progress{ margin-top: 50px; padding: 10px; background: grey; bo 阅读全文

posted @ 2019-01-28 09:46 伊人怎会持宠而骄阅读(147) 评论(0) 推荐(0)

左右焦点轮播图

摘要： <!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.o 阅读全文

posted @ 2019-01-28 09:45 伊人怎会持宠而骄阅读(92) 评论(0) 推荐(0)

旋转木马轮播图

摘要： css部分 @charset "UTF-8"; /*初始化 reset*/ blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ma 阅读全文

posted @ 2019-01-28 09:44 伊人怎会持宠而骄阅读(140) 评论(0) 推荐(0)

手风琴效果

摘要： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul{list-style: none} *{margin:0; padding:0;} div{ width: 1150px 阅读全文

posted @ 2019-01-28 09:44 伊人怎会持宠而骄阅读(105) 评论(0) 推荐(0)

简单版轮播图

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style>* { margin: 0; padding: 0; } ul, ol { list-style: none; } img { display: b 阅读全文

posted @ 2019-01-28 09:42 伊人怎会持宠而骄阅读(156) 评论(0) 推荐(0)

淡入淡出轮播图

摘要： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} ul,ol{ list-style: non 阅读全文

posted @ 2019-01-28 09:42 伊人怎会持宠而骄阅读(108) 评论(0) 推荐(0)

从右到左无缝滚动轮播图

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin:0; padding:0; } div{ width:600px; height:200px; positio 阅读全文

posted @ 2019-01-28 09:41 伊人怎会持宠而骄阅读(625) 评论(0) 推荐(0)

上下滚动记录列表样式的轮播图

摘要： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equ 阅读全文

posted @ 2019-01-28 09:41 伊人怎会持宠而骄阅读(847) 评论(0) 推荐(0)

自动切换播放轮播图

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ position: relative; mar 阅读全文

posted @ 2019-01-28 09:40 伊人怎会持宠而骄阅读(274) 评论(0) 推荐(0)

无缝上下滚动轮播图

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin:0; padding:0; } #container{ height:170px; width:500px; 阅读全文

posted @ 2019-01-28 09:40 伊人怎会持宠而骄阅读(578) 评论(0) 推荐(0)

正则表单验证

摘要： <!DOCTYPE html> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Key 阅读全文

posted @ 2019-01-28 09:39 伊人怎会持宠而骄阅读(263) 评论(0) 推荐(0)

正则判断密码强弱

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ width:80px; height: 10px; display: inline-block; ba 阅读全文

posted @ 2019-01-28 09:38 伊人怎会持宠而骄阅读(369) 评论(0) 推荐(0)

简单正则验证

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="ok.html"> 用户名: <input type="text" id="t1" /><span id 阅读全文

posted @ 2019-01-28 09:37 伊人怎会持宠而骄阅读(120) 评论(0) 推荐(0)

QQ号码正则判断

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 输入qq ： <input type="text" id="qq" /> <input type="button" value="判阅读全文

posted @ 2019-01-28 09:37 伊人怎会持宠而骄阅读(969) 评论(0) 推荐(0)

计算星期几

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <tr> <td>请输入年:        &nbs 阅读全文

posted @ 2019-01-28 09:36 伊人怎会持宠而骄阅读(124) 评论(0) 推荐(0)

倒计时

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 id="h">距离倒计时结束还有xx小时xx分钟xx秒</h1> </body> </html> <script> var 阅读全文

posted @ 2019-01-28 09:35 伊人怎会持宠而骄阅读(141) 评论(0) 推荐(0)

实现这一天是这一年中的第几天

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 年：<input type="text" id="oTxtYear"/><br> 月：<input type="text" id=" 阅读全文

posted @ 2019-01-28 09:35 伊人怎会持宠而骄阅读(123) 评论(0) 推荐(0)

选项卡放大镜（淘宝购物效果）

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 350px; h 阅读全文

posted @ 2019-01-28 09:34 伊人怎会持宠而骄阅读(197) 评论(0) 推荐(0)

遮罩层放大镜

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; } #box{ 阅读全文

posted @ 2019-01-28 09:33 伊人怎会持宠而骄阅读(120) 评论(0) 推荐(0)

普通放大镜

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 350px; h 阅读全文

posted @ 2019-01-28 09:32 伊人怎会持宠而骄阅读(121) 评论(0) 推荐(0)

土豆右下角菜单悬浮效果

摘要： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{mar 阅读全文

posted @ 2019-01-28 09:31 伊人怎会持宠而骄阅读(156) 评论(0) 推荐(0)

固定导航栏、吸顶效果

摘要： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0} img{ vertical-align: top; } .top img{ hei 阅读全文

posted @ 2019-01-28 09:31 伊人怎会持宠而骄阅读(778) 评论(0) 推荐(0)

模拟select控件，css模拟下拉

摘要： <!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>模拟select控件</title> <style> html,body{height:100%; 阅读全文

posted @ 2019-01-28 09:30 伊人怎会持宠而骄阅读(305) 评论(0) 推荐(0)

筋斗云导航

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} ul {list-style:none;} body { background-color: 阅读全文

posted @ 2019-01-28 09:28 伊人怎会持宠而骄阅读(1778) 评论(0) 推荐(0)

匀速展开（侧边分享的效果）

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: 0; padding: 0; } div{ width:100px; height: 200px; back 阅读全文

posted @ 2019-01-28 09:27 伊人怎会持宠而骄阅读(138) 评论(0) 推荐(0)

返回头部的小火箭

摘要： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { width: 2000px; } .top{ position: fixed; right:50px; bott 阅读全文

posted @ 2019-01-28 09:27 伊人怎会持宠而骄阅读(131) 评论(0) 推荐(0)

圆形导航

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0} ul{list-style:none;position:relative;margin:50px;} 阅读全文

posted @ 2019-01-28 09:25 伊人怎会持宠而骄阅读(1530) 评论(0) 推荐(0)

联级菜单

摘要： <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </ 阅读全文

posted @ 2019-01-28 09:24 伊人怎会持宠而骄阅读(310) 评论(0) 推荐(0)