前端菜菜阿海-优快云博客

原创 JavaScript和CSS在HTML文档中不同位置的区别

JavaScript在HTML文档中不同位置的区别前言一、浏览器是如何渲染HTML的？总结前言JS在HTML中放在不同位置的地方会有什么问题呢？我将在这篇文章按照自己的理解为大家介绍一下JS的运行机制。一、浏览器是如何渲染HTML的？首先一个HTML文件是长这样的：我们一般在body里面编写HTML元素，在head里面编写CSS样式，但是CSS的样式有三种写法：1.行内式、2.嵌入式（我在文章里面用的比较多，主要是代码方便上传）、3.链接式（标准方法，建议大家多用这种）。CSS嵌入式放在HT

2021-07-12 17:06:23 521

原创 CSS实现DIV垂直水平居中

CSS实现DIV垂直水平居中在页面设计中，很多地方都需要这的方法方法一： <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; top: 50%; left: 50%; trans

2021-07-15 22:55:55 1706

原创 JS中for循环中使用同一变量的方法及案例

JS中for循环中使用同一变量的方法方法案例方法方法一（使用较简单）：使用let定义变量，let用来声明它的作用域的变量。 for (let i = 0; i < 10; i++) { div[i].onmouseout = function () { div[i].style.backgroundColor = 'pink'; } }方法二：分离作用域，再调用 f

2021-07-14 22:22:11 1271

原创 JS实现轮播图点击切换、按钮切换功能

JS实现轮播图点击切换、按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典，写法也非常多，我在写一个自己用的比较多的写法，帮助大家理解，在网页的设计中，可以直接拿去用（记得换图片路径哦！），仅供参考学习。轮播图案例代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>

2021-07-13 17:33:09 16788 13

原创 JS实现漂浮广告功能

JS实现漂浮广告功能前言一、漂浮广告案例前言漂浮广告非常简单也是老案例了，在网页的设计中可直接拿去用，原理都是我之前文章所讲到的，如果有什么不明白的可以看看我之前的文章，仅供参考学习。一、漂浮广告案例我在这个案例里面加了一些其他的操作，例如：移入时广告静止，移出时广告漂浮，点击一次跳转到另一个页面，点击俩次广告消失。代码如下（示例）： <style type="text/css"> #div1 { width: 300px;

2021-07-11 17:24:06 7372 2

原创 JS实现验证码倒计时验证案例

JS实现验证码倒计时验证案例前言验证案例1.代码2.代码功能解析1.验证码2.验证3.倒计时总结前言这是一个将验证和倒计时综合起来的案例，案例也不难理解，在页面的设计中，需要这样的代码时可直接套用，仅供参考学习。验证案例1.代码代码如下（示例）： <style> #a { position: absolute; left: 260px; border-radius: 15px;

2021-07-10 17:28:28 1513

原创 JS全选反选及节点操作实现收件箱案例

JS全选反选及节点操作实现收件箱案例前言一、全选反选之商品选择二、节点操作之留言板（添加、删除）三、综合案例1.收件箱2.文本上下移动添加及删除功能总结前言JavaScript中的节点操作是一处重要的知识点，在很多的地方都有它的身影，我按照自己之前的学习，整理了一些节点操作的案例，用于加强学习和理解，仅供参考学习。一、全选反选之商品选择代码如下（示例）： <style> * { padding: 0; margi

2021-07-09 16:56:47 339

原创 JS定时器原理及案例

JavaScript精选案例这个系列是在阿海前端学习中遇到的一些经典案例，具有很大的学习意义！JS定时器原理及案例JavaScript精选案例前言一、定时器二、定时器的使用1.定时器2.清除定时器三、案例1.倒计时2.使用和清除定时器3.发送短信总结前言JS中定时器并不算难点，但是我还是拿出来讲，过于经典的案例往往是最为基础的知识点，仅供参考学习。一、定时器setTimeout(code,millisec)：只执行 code 一次。setInterval(code,millisec)

2021-07-08 16:27:36 1479

原创 HTML中input文本框与label属性的关系

HTML中input文本框与label属性的关系前言一、label属性是什么？二、label属性的使用方法一方法二总结前言这篇文章的目的是为了解释我在JS常用事件里面的问题：为什么input文本框需要label属性。也可以作为HTML页面设计的一个知识点作为学习和理解，仅供参考学习。一、label属性是什么？label 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是

2021-07-07 21:27:07 10890

原创 JS实现放大镜功能

JavaScript精选案例这个系列是在阿海前端学习中遇到的一些经典案例，具有很大的学习意义！JS实现放大镜功能JavaScript精选案例前言一、放大镜案例方法一方法二总结前言js制作放大镜是非常经典的案例，在很多地方也非常常见，例如商品的查看，我也整理了一些自己以前使用过的方法，仅供参考学习。一、放大镜案例方法一第一种方法较为常见，也更容易理解代码如下（示例）： <style> .box { position: rela

2021-07-06 17:07:07 1022

原创 JS中常用的事件操作

JavaScript精选案例这个系列是在阿海前端学习中遇到的一些经典案例，具有很大的学习意义！JS中常用的事件操作JavaScript精选案例前言一、点击事件（导航栏切换）二、移入移出事件（导航栏菜单下拉功能）三、失去焦点事件四、鼠标事件五、键盘事件总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、点击事件（导航栏切换）

2021-07-05 20:47:41 591

原创 CSS动画学习实现轮播图及3D骰子

CSS动画学习实现轮播图及3D骰子前言一、CSS动画元素认识1.animation属性2.transition属性二、案例1.轮播图2.3D骰子总结前言CSS功能非常强大，可以通过纯CSS实现轮播图功能和3D骰子，在此之前需要先了解CSS是如何实现动画功能的，所以我整理了CSS动画的知识点，帮助大家理解，仅供参考学习。一、CSS动画元素认识1.animation属性代码如下（示例）： <style> div { width: 100

2021-07-04 16:58:11 470

原创 CSS浮动+伪类实现导航栏下拉功能

CSS浮动+伪类实现导航栏下拉功能前言一、浮动二、伪类三、导航栏下拉案例总结前言在前端的学习中，浮动和伪类算是使用的较为频繁的属性，我在这篇文章中，将为大家简单介绍一下，并用一个导航栏案例加深学习的印象，仅供参考学习。一、浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 <style> div { /*设置左浮动*/

2021-07-03 21:46:05 1663 2

原创 HTML设计表格

HTML设计表格前言一、HTML中表格元素的认识二、表格案例1.案例代码及效果图2.案例代码分析总结前言前端的学习中HTML中的表格相信大家也了解了，这是一块简单而又易乱的知识点，所以我为大家简单的梳理了一下知识点，仅供参考学习。一、HTML中表格元素的认识二、表格案例1.案例代码及效果图代码如下（示例）：<table border="1"> <caption>我的课表</caption> <thead> <t

2021-07-02 17:28:35 1744

原创 HTML使用iframe元素实现页面内容的跳转功能

HTML使用iframe元素实现页面内容的跳转功能前言一、iframe是什么？二、iframe的使用1.主页面内容代码2.内容页面代码总结前言在前端的学习中，不免有一些页面的跳转功能的实现，而身为初学者的我们没有过快的接触JavaScript，无法实现动态的页面跳转，所以我在这里使用了一种HTML的元素实现页面元素跳转功能，仅供参考学习。一、iframe是什么？irame是 HTML5 中的新增加的属性，所以在HTML5之前的版本是不支持的，作用是文档中的文档，或者浮动的框架。iframe元素会

2021-07-01 17:41:21 4785

原创 CSS中绝对定位和相对定位的区别及作用

CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一、绝对定位二、相对定位三、绝对定位与相对定位的区别四、绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些方法css的学习中，开篇就是相对定位和绝对定位的使用，大家在学习的过程中不免被其绕晕，所以我按照自己的理解对其进行了整理及分析，仅供参考学习。未进行定位，用以下面俩种定位的区别一、绝对定位可以将绝对定位理解为以浏览器为父节点来定位自己代码如下（示例）： <style>

2021-06-30 19:07:04 16895 2

原创 HTML+CSS实现背景图片铺满页面的方法

HTML+CSS实现背景图片铺满页面的方法针对页面背景图片我整理了几种方法仅供参考一、DIV中添加背景背景图片二、img中设置背景图片三、Body中设置背景图片结语针对页面背景图片我整理了几种方法仅供参考在前端页面设计的时候大家总会遇到要添加背景图片的情况去美化自己的页面，我在之前的前端学习中也逐渐了解到一些方法和问题的解决方式，在下面我为大家的整理好了，仅供参考学习。一、DIV中添加背景背景图片代码如下（示例）：<head> <meta charset="UTF-8

2021-06-12 16:50:49 36437 3

zxh996的博客