js效果 - 随笔分类(第3页) - 伊人怎会持宠而骄

固定导航栏、吸顶效果

摘要：<!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 伊人怎会持宠而骄阅读(779) 评论(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 伊人怎会持宠而骄阅读(1779) 评论(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 伊人怎会持宠而骄阅读(1531) 评论(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)

日历

摘要：<!doctype html> <html> <head> <meta charset='utf-8'> <link rel='stylesheet' href='外部的css文件路径' /> <title>demo</title> <style> /* 整体设置 */ *{margin:0px;p 阅读全文

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

纪录片列表展示

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜狐视频记录片列表展示</title> <style> html, body, div, h2, ul, li, p { padding: 0; margin: 阅读全文

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

上下移动（鼠标在上半部分往上走，反之相反）

摘要：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } .xiaomi{ width:512px; height:400px; o 阅读全文

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

鼠标滑过、图片对应的文字高亮

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> li{ list-style: none; float: left; text-align: center; } </style> 阅读全文

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

QQ聊天字体选择

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义字体形状</title> <style> html, body { margin: 0; padding: 0; } #wrap { background 阅读全文

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

字母打字练习

摘要：<html> <head> <meta charset="utf-8"> <title>打字游戏</title>  <link rel="stylesheet" href="animate.css"> <style> body{ margin: 0; / 阅读全文

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

基础样式设置

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS基础热身课练习</title> <style> * { margin: 0; padding: 0; } body { position: relativ 阅读全文

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

switch嵌套--猜拳游戏

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> /* 设计一个猜拳游戏：假设： 1代表石头 2代表剪刀 3代表布计算机每次随阅读全文

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

克隆应用

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border = "1" id="tab"> <tr> <td> <input type="checkbox"/> < 阅读全文

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

三次机会猜数字

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="请猜数" id="oBtn" /> </body> </html> <scr 阅读全文

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

聊天对话框（ctrl+enter发送）

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>聊天对话框</title> <style type="text/css"> *{font-size: 14px; padding:0; margin:0;} .main{ po 阅读全文

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

加油问题

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> /* 一个加油站为了鼓励车主多加油，所以加的多有优惠。（嵌套） 92 号汽油，每升阅读全文

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

勾股定理

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" value="" id="num1"/> <span>+</span> <input type 阅读全文

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

随笔分类 - js效果