08 2020 档案
摘要:<div class> <input style="margin-top: 5px;" type="checkbox" name=""/> <label class="check-all"></label> </div> label{ display: inline-block; padding-l
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹出层制作</ti
阅读全文
摘要:<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi
阅读全文
摘要:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet
阅读全文
摘要:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
阅读全文
摘要:<!-- <audio src="media/snow.mp3" controls="controls"></audio> --> <audio controls="controls"> <source src="media/snow.mp3" type="audio/mpeg" /> <sourc
阅读全文
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { /*我们用css 边框可以模拟三角效果*/ width: 0; height: 0; border-t
阅读全文
摘要:<title>溢出的文字省略号显示</title> <style> div { width: 150px; height: 25px; border: 1px solid pink; /*当文字显示不开的时候,自动换行*/ /*white-space: normal;*/ /*1. 要文字强制一行内
阅读全文
摘要:.one { /*默认的是基线对齐*/ vertical-align: baseline; } .two { /*让图片的中线 对齐 文字的中线 垂直居中*/ vertical-align: middle; } .three { /*让图片的顶线 对齐 文字的顶线 顶部对齐*/ vertical-a
阅读全文
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>防止拖拽文本域</title> <style> textarea { width: 500px; height: 249px; /*取消轮廓线*/ outline:
阅读全文
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米案例练习</title> <style> /*清除元素默认内外边距样式*/ * { margin: 0; padding: 0; } /*清除列表样式 前面的小
阅读全文
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米案例练习</title> <style> /*清除元素默认内外边距样式*/ * { margin: 0; padding: 0; } /*清除列表样式 前面的小
阅读全文
摘要:width: 200px; height: 200px; background-color: pink; margin: 50px auto; /*box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;*/ box-shadow: 0 15px 30
阅读全文
摘要:width: 200px; height: 200px; /*边框的宽度 实际开发中都是跟 px 单位*/ /*border-width: 5px;*/ /*实线的*/ /*border-style: solid;*/ /*虚线的 dashed 大师的 说话都很虚*/ /*border-style:
阅读全文
摘要:/*div { color: red; }*/ /*标签选择器 权重 0,0,0,1 小组长*/ div { color: pink!important; } /*类选择器 权重 0,0,1,0 班长*/ .one { color: blue; } /*id 选择器 权重 0,1,0,0 班主任*/
阅读全文
摘要:/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/ background-image: url(images/l.jpg); } /*默认的是平铺图 repeat*/ /*background-repeat: repeat;*/ /*背景图片不平铺*/ /*backgroun
阅读全文
摘要:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
阅读全文
摘要:<div class="container-fluid"> 我是流体容器 100%占满全部 </div> <div class="container"> 我是固定容器 居中 </div>
阅读全文
摘要:<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery 练习</title> <link rel="stylesheet" href="index.css"> <style> .todo-main li
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window.onload与$(document).ready()</title> </head> <body> <h1>测试window.onload与$(d
阅读全文
摘要:<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script src="js/myLib.js" type="text/javascript"></script> <script
阅读全文
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 扩展插件</title> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width
阅读全文
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>焦点轮播图</title> <style type="text/css"> /*去除内边距,没有链接下划线*/ * { margin: 0; padding: 0; text-de
阅读全文
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 自定义动画</title> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; widt
阅读全文
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淡入淡出</title> </head> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute
阅读全文
摘要:<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 事件委托</title> </head> <body> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li>
阅读全文
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 事件绑定与解绑</title> </head> <style type="text/css"> * { margin: 0px; } .out { position: absol
阅读全文
摘要:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" c
阅读全文
摘要:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text
阅读全文
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档_增删改</title> </head> <style type="text/css"> * { margin: 0px; } .div1 { position: absolu
阅读全文
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>筛选_查找孩子-父母-兄弟标签</title> </head> <body> <div id="div1" class="box" title="one">class为box的di
阅读全文
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>回到顶部</title> <style> #to_top { width: 30px; height: 40px; font: 14px/20px arial; text-alig
阅读全文
筛选_过滤 1. first() 2. last() 3. eq(index|-index) 4. filter(selector) 5. not(selector) 6. has(selector)
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>筛选_过滤</title> </head> <body> <ul> <li>AAAAA</li> <li title="hello" class="box2">BBBBB</li>
阅读全文
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素尺寸</title> </head> <style> div { width: 100px; height: 150px; background: red; padding:
阅读全文
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>13_元素滚动</title> </head> <body style="height: 2000px;"> <div class="test" style="border:1px
阅读全文
摘要:<style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 20px; left: 10px; background: blue; } .div2 {
阅读全文
摘要:<p style="color: blue;">Eric的后裔</p> <p style="color: green;">太阳的后裔</p> /* 1. 得到第一个p标签的颜色 2. 设置所有p标签的文本颜色为pink 3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px
阅读全文
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多Tab点击切换</title> <script src="jquery-1.10.1.js"></script> <style> * { margin: 0; p
阅读全文
摘要:<div id="div1" class="box" title="one">class为box的div1</div> <div id="div2" class="box" title="two">class为box的div2</div> <div id="div3">div3</div> <spa
阅读全文
摘要:<!-- 1. $.each(): 遍历数组或对象中的数据 2. $.trim(): 去除字符串两边的空格 3. $.type(obj): 得到数据的类型 4. $.isArray(obj): 判断是否是数组 5. $.isFunction(obj): 判断是否是函数 6. $.parseJSON(
阅读全文
摘要:基本选择器 <div id="div1" class="box">div1(class="box")</div> <div id="div2" class="box">div2(class="box")</div> <div id="div3">div3</div> <span class="box
阅读全文
摘要:$(function () { $('#btn').click(function(){ // alert(this.innerHTML) alert($(this).html()) // 创建input $('<input type="text" name="msg2"/>').appendTo('
阅读全文
摘要:<script type="text/javascript"> //加载完成的回调函数 window.onload = function () { var btn1 = document.getElementById('btn1'); btn1.onclick = function () { ale
阅读全文

浙公网安备 33010602011771号