- 博客(19)
- 收藏
- 关注
RSS订阅原创 Form表单（ajax）
html中的form表单就是用于采集用户信息，并通过form的提交操作，把信息提交到服务端进行处理 1*<form></form>叫表单标签 2input*叫表单域 3表单按钮 <form>标签的属性
2022-02-18 18:04:23
639
原创 ajax基于bootstrap获取并渲染图书列表的数据（还有添加图书信息和删除图书信息）
只写了部分代码，样式代码没有给出，大家有兴趣的可以自己去敲一下嘻嘻 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
2022-02-13 16:39:57
608
原创 拖动模态框
基础的样式不写，写的主要是 ‘拖动’ 这个效果的代码 案例分析： 点击弹出层，模态框和遮挡层就会显示出来display:block; 点击关闭按钮，模态框和遮挡层就会关闭出来display:none; 在液面中拖拽的原理: 鼠标按下并且移动之后，松开鼠标。 触发事件是鼠标按下mousedown，鼠标移动mousemove, 鼠标松开mouseup。 在脱液过程中鼠标获得最新的值给模态框的Top值和left值。这样模态框就可以跟着鼠标走。 用鼠标的坐标减去鼠标在盒子内部的坐标。才是模态框真正的位置。 第1步.
2022-01-22 15:35:55
579
原创 发送短信案例
老样子，只是部分核心代码，其他样式需要大家自己摸索一下 <body> <script> 手机号码：<input type = "number"><botton>发送</botton> //按钮点击之后，disable会显示为true。 //同时按钮里面的内容会发生变化，通过innerHtml改变里面的内容。 //里面的秒数是有变化的，所以需要用到定时器。 //定义一个变量在定时器里,不断递减。 //如果变量为0说明时间到了，
2022-01-20 20:53:19
484
原创 倒计时的制作（只写sccript部分，不写css样式部分）
倒计时的制作 script的代码部分相关逻辑： 要用的函数就是setInterval这个函数，这个函数可以重复一直调用 <script> var hour = document.querySelector('.hour'); var minute = document.querySelector('.minute'); var second = document.querySelector('.second'); var inputTime = +new Date('2022-1
2022-01-20 17:00:11
711
原创 鼠标跟随事件实践案例
具体情况：一个图像代替鼠标，类似于QQ农场的铲子，去铲除菜，去播种时，被替代的鼠标 首先，设置图片的样式 <style> img{ position: absolute; top:2px;//很重要 left:2px;//很重要 } </style> 接着，先放逻辑：要用mousemove这个事件，鼠标移动一个像素都会产生一个事件，然后获得x,y的坐标 <img src=???> <script> var pic = document.q
2022-01-19 14:17:47
510
原创 前端中的注册事件（绑定事件）的两种方式
传统注册事件 var lis = document.querySelector('li'); lis[0].onclick = function(){ alert('hi'); } lis[0].onclick = function(){ alert('how a u'); } //只能显示下面那个,具有唯一性 lis[1].addEventListener('click',function(){ alert(22);} ) lis
2022-01-16 22:33:42
403
原创 创建和添加节点
这个东西的用途就是用来写留言和评论的 首先要创建节点元素； <script> var li = document.creatElement('li'); </script> 然后就是添加节点； //添加节点，node.appendChild(child) node 是父级，child是子级 var ul = document.querySelector('ul'); ul appendChild(li); 添加节点，法2 //
2022-01-15 23:03:40
517
原创 下拉菜单的制作
如上图的b站鼠标放在上面，会有下拉菜单出现 只写个script的大概，样式啥的还得你们慢慢来 每一个都用li来放，li里面用a标签来放链接，下面放一个ul下拉菜单 具体如下图 //这里还有很多其他的东西没写 .nav>li>a:hover{background-color:#eee;} .nav ul{ display:none; } <ul class ="nav"> <li> <a herf="#">登录</a> &..
2022-01-15 21:23:46
331
原创 tab栏切换（重点案例）
tab栏如下图 具体情况如上 先分好结构 代码部分： <style> .item { display :none;} .tabtop li{ float:left; height:39px; padding:0 20px; text-align:center; cursor:pointer; } .item_info{ padding:20px 0 0 20px; } .item{ display:none; } .tabtop .cur
2022-01-15 16:32:51
633
原创 背景皮肤更换效果
如上图所示，下面那个点点，会滑动，然后那个图片会自动切换 我们可以简易的搞一个类似的，原理都一样 那些点点可以用ul框起来，用li来表示，每个li里面装一个img, <style> body{ background: url(地址)no-repeat center top; } li{ list-style:none;} .pifu{overflow: hidden; margin:100px auto; bakground-color:#fff; width:410px; .
2022-01-14 17:57:57
171
原创 CSS的背景属性
背景颜色 background-color 颜色可以设置transparent透明的 背景图片 background-image background-image: none||url(“地址”) 很容易控制位置 页面既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色 背景平铺 background-repeat四个取值（ repeat | no-repeat | repeat-x | repeat-y ） 背景图片位置 background-position：x 和 y 改变图片位置
2022-01-12 15:11:42
174
原创 Css的元素显示模式
什么叫元素显示模式？ 就是该元素（标签）以什么方式显示，<div>标签自己占一行，一行可以放多个<span>标签 HTML一般分为行内元素和块元素两种类型 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 其中<div>是最经典的块元素 ps: 文字类元素内部不能使用块级元素 比如<p>内部不能再使用块级元素，尤其是<div> &l
2022-01-11 22:06:52
171
原创 前端中的复合选择器
后代选择器（重要） 如果你的css样式里面只有li,你就会把ul和ol里的li都改了 这个时候，后代选择器的作用就出来了 ol li{ color: black; } ul li { color: yellow; } 元素1 元素2 { 样式说明； } 元素1和元素2之间要用空格隔开 不止可以是元素1，元素2，还可以有元素3，3可以是元素2的子代 子元素选择题 选最近的元素，就是亲儿子元素 只会选第一个a,不会选择第二个a, 元素1 > 元素2 { } 并集选择器（重
2022-01-11 15:05:25
182
1
原创 Emmet 语法
Emmet语法前身是Zen coding，来提高html和css的编写速度，vscode内部已经集成该语法了 1、快速生成html结构语法 生成标签： 直接输入标签名，再按TAB键，such as 你打个 div 再按tab，就会直接生成 (这里打不出来） 如果要生成3个标签， 就后面加 3，比如 div3,按tab就行了。 如果有父子级关系，比如，ul>li, 有兄弟关系就 div + p , 直接在代码行输入 ！ 感叹号，按一下 tab 键就行了 . + 名
2022-01-10 23:44:56
276
原创 前端中的Chrome调试工具
这个工具是用来调试我们的html结构和css样式 Chrome调试工具非常重要！！！ 在前端中，它是用来调试，排错，测试的 如何打开Chrome调试工具 打开chrome浏览器，直接按F12，或者右单击空白区域处——检查，就可以直接打开。 注意这里的elements,是元素的意思，才能看到你想看的东西 左边的是html结构，右边的是css样式 使用方法 elements旁边的箭头十分重要，可以点击一下，然后放在你想要的的元素上面，点击它，html结构那边就会直接选中，css那边就会出现相应的样式，可以直
2022-01-10 20:32:04
353
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人