- 博客(45)
- 收藏
- 关注
原创 放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css">
2018-12-26 16:33:20 165
原创 自定义滚动条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义滚动条</title> <style> *{ margin:0;
2018-12-25 16:15:44 177
原创 内容实现拖拽放大缩小
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽放大缩小事件委托</title> <style> *{ margi
2018-12-07 17:21:25 647
原创 拖拽事件回放
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽事件回放</title> <style> *{ margin:0;
2018-12-07 14:34:57 189
原创 简单的弹出框拖拽关闭事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹出框拖拽关闭事件</title> <style> *{ margin
2018-12-07 09:50:05 830
原创 摇色子效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>摇色子</title> <style> #div1{ width:10
2018-11-19 11:32:45 1068
原创 两种写三角形的方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .first{ width
2018-11-08 11:15:29 171
原创 js实现轮播效果(二)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;padding:0;lis
2018-11-08 10:05:49 124
原创 图片或者元素模块碎片化降落
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:2
2018-11-07 14:43:05 234
原创 点击元素依次下落,在点击依次上升
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body&am
2018-11-07 10:07:00 217
原创 星星评分效果
<!doctype html><html><head><meta charset="utf-8"><title></title><link href="style.css" rel="stylesheet" type="text/css"
2018-11-05 10:41:13 210
原创 css3实现幻灯片效果
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { width:
2018-11-02 16:23:44 1103
原创 css3 filter 滤镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div{ width:100%;
2018-10-31 14:09:46 141
原创 js实现轮播效果(一)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> *{ margin:0;
2018-10-12 16:49:16 833
原创 js留言功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>留言板</title> <style> * { padding: 0;
2018-10-12 13:46:09 691
原创 纯js实现动态时间显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;
2018-10-12 10:34:59 618
原创 用css伪类实现文字左右两边有横线的效果
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=&
2018-10-11 15:48:46 967
原创 鼠标移动到标题时,出现从中心向两边水平扩展的下划线
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=&
2018-10-11 15:35:41 516
原创 鼠标移动显示图片一块一块的显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;
2018-10-10 15:32:33 266
原创 商品加减,总计
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><ul id=&q
2018-10-10 14:42:32 191
转载 鼠标滚动一次就是一屏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style type="text/css&
2018-09-17 15:16:04 3546 4
原创 JQuery简单实现锚点链接的平滑滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;p
2018-09-17 14:49:13 816
原创 输入样式,内容随之变化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> #box{ width:100px;
2018-09-17 09:45:34 125
原创 鼠标划过旋转180度并且切换图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .test { width
2018-09-12 10:46:12 1712
原创 纯css实现二级导航
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>企业搜索页面</title> <style> *{ margin:0;
2018-09-11 09:55:12 299
原创 解决手机1像素问题
<div class="tab"> <div class="tab-item"> <router-link to="/">商品</router-link> </div> <div class="tab-item"> <router-link to="/ratings">评价</router-link> </div>
2017-10-17 15:35:02 970
原创 无缝滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .btn{ margin:20px auto 0; text-align:cent
2017-10-13 11:22:58 184
原创 仿qq信息延时提示框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ float:left; margin:10px; font-size:14px; color:#fff; } #div1{
2017-10-06 14:46:46 705
原创 数码时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ color:#fff; background: #171717; font-size:50px; text-align:center;
2017-10-06 14:09:14 241
原创 Cookie, LocalStorage 与 SessionStorage
Cookie Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 localStorage localStorage 是 HTML5 标准中新
2017-10-05 15:06:11 813
原创 react.js 显示隐藏效果
constructor(props) { super(props); // 设置 initial state this.state = { style: {display:"block",color:"red"}, actionTitle:false, }; } sh
2017-10-05 14:56:34 10432
原创 日历备忘录
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } .box{ width:250px; height:350px; backgr
2017-09-30 14:01:09 1632
原创 简洁风格的Tab
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width:100%; height:auto; border-bottom:1px #e2e2e2 solid; box-shadow
2017-09-29 11:06:49 326
原创 卡片风格的Tab
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width:100%; height:auto; border:1px #e2e2e2 solid; box-shadow:0 2px
2017-09-29 10:29:03 245
原创 table 隔行变色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload = function () { var oTab = document.getElementById('tab'); var oTr = oTa
2017-09-23 16:36:10 272
原创 table 搜索内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload=function(){ var oBtn=document.getElementById('btn'); var oName=document.
2017-09-23 14:25:17 409
原创 table排序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload = function () { var oBtn = document.getElementById('btn'); var oTab = do
2017-09-23 13:35:10 355
原创 table 删除内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload=function(){ var oTab=document.getElementById('tab'); var oName=document.
2017-09-23 11:28:04 395
原创 table添加内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload=function(){ var oTab=document.getElementById('tab'); var oName=document.
2017-09-23 10:36:04 383
原创 flex布局(3)
三、悬挂式布局html代码如下:<div class="box"> <img src="icon.jpeg" class="box-figure" width="60px" height="60px" /> <div class="box-body"> <div>标题</div> <p>内容部内容部内容部内容部分内容部内容部内容部内容部内容部内容部内容部</p> </di
2017-09-22 15:29:29 198
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人