自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(61)
  • 收藏
  • 关注

原创 Node.js的接口跨域的问题与解决方案,使用 CORS中间件解决跨域问题

CORS 是由一系列HTTP响应头组成,由这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。浏览器的同源安全策略会阻止网页跨域获取资源,但如果接口服务器配置了CORS相关的HTTP响应头,就可以接触浏览器端的跨域访问限制。**注意:**CORS主要在服务器端进行配置,浏览器无需做额外的配置,即可请求开启了CORS的接口。CORS在浏览器中有兼容性,ie10+ 、chrome4+、firefox3.5+。...

2022-06-11 20:43:27 1207 1

原创 node笔记05——Nodejs学习之Express中间件与接口的编写,GET和POST接口的编写和案例演示。

express是基于Node.js平台的web开发框架作用和Node.js内置的http模块类似,是专门用来创建Web服务器的。本质上Express就是一个npm的第三方包提供了快速创建Web服务器的便捷方法。中文官网:expressjs.com.cn一、下载express包二、创建基本的web服务器...

2022-06-11 20:41:56 1050

原创 node笔记04——Nodejs学习之npm与包,npm包管理器的使用,安装,镜像源切换包含案例演示。

Node.js中的第三方模块又叫做包,第三方模块和包所指的是统一概念包的来源不同于Node.js中的内置模块,是有第三方或者个人或团队开发出来的,是免费开源的。为什么需要包:Node.js的内置模块只是提供了底层的API,包是通过内置模块封装出来的,通过包,可以提高开发效率。包的下载方式:搜索:www.npmjs.com是全球最大的包共享平台,目前1100万开发中开发共享了120多万个不同的包,下载:此外该公司还提供了一个地址为http://registry.npmjs.org的服务器来下载所需要的包。具体

2022-06-07 15:45:29 479

原创 node笔记03——Nodejs学习之HTTP模块、最齐全的node.js学习笔记教程,包含练习案例

HTTP模块便是Node.js官方提供的用来创建web服务器的模块,通过方法对外提供资源,从而将普通的电脑编程一台服务器服务器和电脑的区别在于服务器上安装了web服务器软件。而对于前端在Node.js中我们不需要使用IIS/Apache等第三方的web软件,只需要利用Node.js的http模块便可以实现对外提供web服务的功能一、导入http模块二、创建web服务器示例三、为服务器绑定request事件,监听客户端请求四、启动服务器只要服务器介绍到了客户端的请求,就会触发server.on()为服务器绑定

2022-06-05 17:21:33 289

原创 node笔记02——Nodejs学习之path模块、最齐全的node.js学习,包含练习案例

如果要在JavaScript中使用path模块同样也需要用如下方式进行导入常用的方法有:path.join() :将多个路径片段拼接成一个完整的路径字符串path.basename() :从路径字符串中将文件名解析出来以后在拼接路径的时候不要在使用“+”拼接路径,而使用join方法,如:二、path.basename( )该方法可以获取路径中的最后一部分,路径终点的文件名,语法如下:参数一、path,必选参数,路径的字符串参数二、[ ext ],可选参数,文件扩展名调用返回值、路径中的最后一部分代码示

2022-06-01 13:29:15 308

原创 node笔记01——Nodejs学习之fs模块、最齐全的node.js学习,包含练习案例整理

运行环境是指代码正常运行所必须的环境。一个浏览器当中,包含了JavaScript解析引擎,包含了常用的API,该浏览器便是一个运行环境。node.js是一个基于Chrome V8引擎的JavaScript运行环境node.js运行环境和浏览器一样,也由JavaScript解析引擎和内置API组成node.js作为JavaScript的运行环境,只提供了基本的功能和API,但通过不同的框架丰富了node.js的使用场景1、基于Express构建web应用 2、基于electron构建跨平台桌面应用 3、基于r

2022-06-01 13:28:08 427

原创 ES6学习笔记、async、promise、ES6箭头函数、ES6扩展运算符、原始数据类型Symbol、模板字符串

ES6: ECMAScript 6.0,泛指2015年6月后发布的JavaScript标准,目前已经到es12

2022-05-29 17:29:41 372

原创 Macbook 苹果电脑 安装搭建Vue脚手架教程m1芯片Vue脚手架初学

Macbook 苹果电脑 安装Vue脚手架教程1.首先我们进入Node.js的官网,下载安装Node.js 如果你已经安装过可以忽略网址http://nodejs.cn/2.直接点击下载,这里我下载的是18版本最新版的。3.选择macOS版本后会直接下载4.下载完成后直接点击安装即可5.Node.js安装完成后接下来我们打开电脑的终端6. 然后我们进入Vue的官网https://cn.vuejs.org/7. 在*生态系统*处找到*Vue CLI*选项点击进入8.点击‘起步’

2022-05-05 15:53:43 8579 11

原创 Vue框架学习笔记整理(pdf)第一部分

在这里插入图片描述

2022-05-01 16:31:10 547 2

原创 javascript/dom练习/实现一个用户注册协议的操作/onscroll滚动事件/判断用户协议是否滚动到底

一、效果要求:一、需要用户将《用户注册协议》阅读完毕滚动到底部才能勾选同意用户协议二、判断用户在勾选已同意协议后才能点击注册三、用到的一些方法-onscroll :该事件会在滚动条滚动时触发 -scrollHeight :返回整个可滚动区域高度-scrollTop :此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离-clientHeight :获取到元素包括内容区的高度数值(不带px)效果图演示:四、实现代码:<html> <head&

2022-04-10 15:43:15 1527

原创 通过DOM操作CSS样式/dom读取css样式与修改css样式

一、固定语法:元素.style.样式名 = "样式值";如果CSS样式名中含有’-',在JS中是不合法的需要将该种样式名修改为驼峰命名法background-color改为backgroundColor 通过style属性设置的样式都是内嵌样式 而内嵌样式具有较高的优先级,所以通过JS修改的样式往往会立即显示 如果在样式表的样式中加上"!important"则该样式会具有最高的优先级 通过style属性也可以读取到的样式,但也只能读取到内嵌样式。不能读取样式表中的样式<!

2022-04-09 16:01:13 713

原创 bom的增删改查的案例

效果演示案例实现过程:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <link rel="stylesheet" type="text/css" href="./添加删除练习.css"/> <script type="text/javascript"> //删除tr

2022-04-08 15:37:06 245

原创 javascript/BOM/DOM增删改查方法/学习笔记

一、Domdom的全称是Document Object Model,翻译为:文档对象模型。在Js中我们通过Dom来对HTML文档进行操作,通过学习Dom便能随心所欲的操作Web页面D:文档,一个html就是一个文档O:对象,表示将网页中的每一个部分都转换成一个一个对象从而进行操作M:模型,用来表示对象之间的关系,方便获取到对象二、节点1.Node(节点)Node即为节点,是指构成网页的最基本的组成部分,网页中的每一个部分都可以被称作为一个节点,但是节点的具体类型则各不相同,网页中有如下几种常

2022-04-08 13:19:21 257

原创 javaScript/正则表达式练习/生成一个随机的手机号码/去掉字符串中所有逗号

//要求:获取1000个0-9的随机整数,然后找出里面的手机号 var arr = [];//新建一个数组用于接收字符串 for(var i = 0; i <100; i++){ var tel = Math.round((Math.random()*9)); arr.push(tel); //每次循环都将字符添加到数组中 }; //将数组转换成字符串 var telNumber = arr.toString(); //去掉字符串中的所有逗号 var r.

2022-03-29 16:30:50 1287

原创 JavaScript学习笔记整理/第二阶段对象/函数/方法/数组/函数的方法

目录有了第一阶段的基础知识后我们就开始进入到第二阶段的学习了。文章目录目录前言一、对象的简介1.创建对象2.内存结构图总结前言JavaScript是一门面向对象的语言,此阶段的笔记是在面向对象章节的学习记录一、对象的简介对象Object,是一种复合类型,可以保存多个不同类型的属性。对象又被分为如下几类:1.内建对象内建对象是ES标准中定义的对象,任何ES的实现中都可以使用。2.宿主对象宿主对象使用JS的运行环境提供的对象,再我们前端开发的学习中主要指的便是浏览器所提供的BOM/

2022-03-27 23:03:33 1129

原创 JavaScript学习笔记整理/第一阶段概述/基本语法/流程控制

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、JavaScript语言是什么二、使用步骤1.JS代码的引入2.读入数据三、JS的基本语法1.JS中严格的区分大小写2.JS中的每条语句都以`;`结尾3.变量4.数据类型5.算数运算符6.字符串运算符7.关系运算符8.关系运算符中的== 和 ===9. 逻辑运算符10.一元运算符11. 自增和自减12.三元运算符以及其它注意事项流程控制1.条件判断2.条件分支3. 循环4. 其它前言这是作为前端开发学习JavaSc.

2022-03-27 18:27:55 995

原创 macOS配置安卓手机调试,adb环境变量的配置与手机调试/android studio配置adb与手机调试

首先复制工程路径,在Android studio中粘贴路径打开工程文件。1.打开控制台(终端)配置adb:打开Android Studio,在 File 中打开 Project Structure,复制sdk路径/Users/Trillion-Star/Library/Android/sdk""Trillion-Star"是你电脑的用户名,注意修改。3.然后打开终端,输入命令touch .bash_profile ,该命令的作用是创建该bash_profile文件,如果你之前配置过环境

2022-03-07 15:47:29 4075

原创 html+css/设计一个简单的账户注册表单/案例演示

代码:<!doctype html><html><head><meta charset="UTF-8"><title>注册页面</title></head> <style> *{ margin: 0; padding: 0; /*初始化内外边距*/ } .box1{ width: 1000px; height: 500px; background: #

2022-02-24 21:37:53 1669

原创 使用CSS控制表单样式/示例演示

一、具体需求与样式二、代码与注释<!doctype html><html><head><meta charset="UTF-8"><title>CSS控制表单样式</title> <style> *{ margin: 0; padding: 0; border: none; /*清除默认样式,内外边距与默认边框效果*/ } form{ width: 300px; heigh

2022-02-18 16:38:11 3464 2

原创 html5+css表单input/textarea/select的属性与使用方法/学习笔记

html5+css表单input/textarea/select的属性与使用方法/学习笔记

2022-02-12 19:09:37 3332

原创 html+css表单的认识与创建/学习笔记

一、认识表单表单的概念:表单是网页中常见的形式,如登录页面,注册页面的信息填写框。组成部分:​1.一般由提示信息、表单控件、表单域组成。2 表单域是表单的基本体现用于容纳表单控件和提示信息。​3.表单控件一般由按钮、输入框、密码框等组成。​4.提示信息用于说明表单控件的填写提示。二、创建表单表单的创建使用<form></form>双标签创建表单域。具体用法:<form action="url地址" method="提交方式" name="表单名称"&g

2022-02-12 17:55:59 451

原创 html的表格结构以及如何使用CSS控制表格的样式/学习笔记

了解表格结构标签的用法,能够使表给结构标签进行网页布局一、表格的结构表格的划分:头部:定义表格的头部,包含网页logo和导航等信息<thead></thead>主体:定义表格的主体,包含网页的主要内容<tbody></tbody>页脚:定义表格的页脚,包含网页中底部的企业、日期等信息<tfoot></tfoot>以上的标签都要写在<table>表格标签内。注意事项1、一个table表格只能定义一对&lt.

2022-02-10 21:17:38 1274

原创 利用html的表格结构标签实现对网页的布局/案例演示

一、首先新建html5文档二、建立完成后,利用前面所学习的知识使用对应的标签搭建起整体的结构代码以及对应的注释:<!doctype html><html><head><meta charset="UTF-8"><title>表格的结构</title></head><body> <table border="1" height="100px" width="980px"> &

2022-02-10 19:02:50 2152

原创 使用html在网页中制作表格/对应的标签用法与属性/<table>标签/<tr>标签/<td>标签/<th标签>/学习笔记

一、创建表格学会使用html的<table>标签在网页中插入表格基本语法格式<table> <tr> <td></td> </tr> tr标签定义行,td标签定义列</table>1.案例演示<!doctype html><html><head><meta charset="UTF-8"><title>创建表格</ti

2022-02-10 18:25:20 8310 1

原创 课程介绍专栏/html5+css/案例演示

实现效果合给出的素材,运用列表标签、超链接标签以及CSS控制列表与超链接的样式实现下图所示的课程介绍专栏效果。其中课程类别都是可以点击的链接,当鼠标移上时,其样式会发生变化。鼠标移动到对应位置上的效果代码以及注释<!doctype html><html><head><meta charset="UTF-8"><title>课程介绍专栏</title> <style> *{ margin: 0;

2022-02-10 16:00:20 6778 7

原创 h5+css/制作一个简单的网页电商团购悬浮框/案例演示

一、案例分析根据案例效果分析实现的效果,​ 1.结构:使用ul来定义整个结构,里面添加6个li。再为li添加背景图像与文字实现效果。二、开始制作1.打开Dreamweaver新建一个html5格式文件2.建立完成之后开始搭建整体的一个结构,并填入对应的文字<!doctype html><html><head><meta charset="UTF-8"><title>电商团购悬浮框</title> <link

2022-02-08 22:45:11 3526

原创 list-style-type属性、list-style-image属性、list-style-position属性、list-style复合属性的用法,背景图像定义项目符号/学习笔记

一、list-style-type属性在css中list-style-type属性可以用于控制列表项显示符号的类型/*使用该方法可以使用css来定义列表的type属性*/属性值描述属性值描述disc实心圆none不使用项目符号circle空心圆cjk-ideographic简单的表意数字square实心方块georgian传统的乔治亚编号lower-roman小写罗马数字upper-roman大写罗马数字……略具体用法&l

2022-02-08 22:10:38 13900

原创 html+css案例演示,实现一个网页二维码名片效果

一、分析效果1.结构:由效果图分析,外层由一个大div包裹总体图片内容,再嵌套两个div,每个盒子使用多图背景的方式引入三张图像。2.样式:根据样式按照将图片素材拼接起来即可。二、开始实现1.打开Dreamweaver2021新建立一个html5格式文件,并修改title为"拼图效果"然后搭建起结构2.使用嵌入的方法引入css样式。<style> *{ padding: 0; margin: 0; /*首先清除浏览器默认的边距的效果*/ } .box{ w

2022-02-05 18:22:11 2831

原创 html5+css/电商悬浮框案例制作

一、效果分析根据效果图使用html和css制作一个电商悬浮窗效果,外层使用一个大盒子<ul>定义,内部插入5个<li>列表并添加边框,最后插入图片背景。二、制作结构1.使用Dreamweaver新建一个html5文档,修改标题为“电商悬浮框”搭建结构后引入对应的文字。2.定义整个body的公共的样式,在用并集选择器清除对应标签的样式<style> ul,li,body{ margin: 0; padding: 0; list-style: non

2022-02-05 15:50:26 2895

原创 html+css/有序列表和无序列表的用法与常用的属性值/学习笔记

一、无序列表无序列表是网页中最常用的列表,各列表为并列关系,没有顺序区分基本语法格式<ul> <li>列表1</li> <li>列表2</li></ul>ul中只能嵌套li标签,嵌套文字的方式是不允许的无序列表常用的type属性值type属性值显示效果disc(默认值)实心圆circle空心圆square实心方块为了实现结构与样式分离一般使用css实现二、有序列表有

2022-02-02 14:28:54 2940

原创 动手实践,使用div盒子模型设计一个播放器效果/动手实践

题目效果执行代码<!doctype html><html><head><meta charset="UTF-8"><title>动手实践</title> <style> *{ margin: 0; padding: 0; } .box1{ width: 500px; height: 500px; background-image: linear-gradient(to

2022-01-30 20:31:30 3975 6

原创 html5+css/运用css的多图片背景进行一个网页拼图效果/案例演示

一、分析效果1.结构:由效果图分析,外层由一个大div包裹总体图片内容,再嵌套两个div,每个盒子使用多图背景的方式引入三张图像。2.样式:根据样式按照将图片素材拼接起来即可。二、开始实现1.打开Dreamweaver2021新建立一个html5格式文件,并修改title为"拼图效果"然后搭建起结构2.使用嵌入的方法引入css样式。<style> *{ padding: 0; margin: 0; /*首先清除浏览器默认的边距的效果*/ } .box{

2022-01-30 19:07:17 4564

原创 HTML5+CSS边框圆角的设置方法与多背景图像/学习笔记

一、圆角的设置方法在网页中可以使用圆角的效果来丰富页面的显示效果,属性:border-radius可以将矩形边框四角圆角化。border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径战术3 垂直半径参数4;圆角<style> div{ width: 300px; height: 300px; background: url("photo.png") center center no-repeat;

2022-01-30 18:29:53 5106

原创 html5+css搭建一个网页创意画框效果/案例演示

一、效果分析:根据示意图分析结构以及需求结构:两个div盒子嵌套,并使用css设置背景填充内容样式:在外层div盒子中设置红蓝色的线性渐变,从左到右,并设置透明度。在内层盒子中导入背景图片。二、搭建结构:1.打开Dreamweaver新建一个html5文件,并设置title2.使用html搭建整体建构,为方便区分,我们将两个盒子设置类名3.使用嵌入式css引入效果,具体代码与注释如下:<head><meta charset="UTF-8"><title&

2022-01-30 16:34:28 2315

原创 html5+css设置图像/形状的透明度/图片边框设置/设置网页元素的阴影效果/设置图形的渐变效果/径向渐变与线性渐变/学习笔记

一、CSS设置颜色与透明度1.颜色透明度的设置,可以通过引入RGBA模式和opacity属性对背景与图片设置不透明度1,RGBA模式rgba(r,g,b,alpha);div{ width: 300px; height: 300px; background: rgb(242,35,36) url("user.jpg") no-repeat; rgba(242,35,36,0.7) /*设置颜色透明度为0.7*/ }2,opacity模式opacity:0

2022-01-29 22:18:37 4257

原创 Dreamweaver2021/CSS+HTML5实现网页标题导航栏的效果/案例演示

一、效果分析根具效果图分析导航栏的效果,导航栏背景颜色为黑色,对应的7个图标有7个,可以使用<div>盒子,包裹起来二、样式1.控制大盒子div的宽度、高度、背景色、内边距、边框等、2.整体控制小盒子,需要将span转换为行内块元素,然后应用宽度、高度、以及边框样式3.对七个小盒子设置不同的背景图像三、开始实现1.首先打开Dreamweaver2021,点击新建文件,建立一个html5格式的文件2.建立完成后我们利用html搭建起整体的一个结构3.搭建完结构后把

2022-01-28 21:00:57 4976 1

原创 heml5+css网页元素的控制、元素的类型、常见的块元素、常见的行内元素、span标签的用法元素类型的转换/学习笔记

一、元素的类型1:块元素在页面中以区域块的行书出现,每个块元素通常会独自占据一行或多行,可以对齐设置宽度、高度、对齐等属性2:行内元素不占据独立的区域行内元素仅靠自身字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等常见的块元素<div>/<h1>/<p>/<li>/<ul>其中div是最典型的块元素常见的行内元素<span>/<strong>/<a>/<b&g

2022-01-28 18:20:58 561

原创 Dreamweaver制作一个网页咖啡店banner/h5+css案例演示/

一、分析结构本案例实现比较简单,根据下载好的素材结合实际效果图,可以看出使用一个外面的<div>盒子设置好背景,再将素材放置到内部的<div>盒子之中二、样式1.外层的盒子设置宽度高度以及背景图像的图像样式,背景图像沿水平方向平铺2.给里面的盒子设置宽度高度,背景图像设为不平铺,但内部盒子和外盒子的左边和上边留出一定空间三、开始制作打开Dreamweaver2021,新建一个HTML5格式文件,并添加title开始搭建架构,并将素材引入到对应位置

2022-01-28 15:25:41 3165 3

原创 css设置背景颜色/背景图像/背景图像平铺/背景图像位置/背景图像固定显示/综合设置元素背景的方法(学习笔记)

一、设置背景颜色在CSS当中,网页元素的背景颜色使用background-color属性来设置,和文本颜色的用法类似。用法<style> h2{ color:red; backround-color:blue; font-family:"黑体" } body{ background-color:blue; /*设置整个网页的背景颜色*/ }</style>二、背景图像的设置方法css中将图像作为网页元素的背景,可以

2022-01-28 14:52:33 6181

原创 html5+css实现一个简单的网页用户中心效果/案例演示

一、效果分析根据案例示意图我们对案例的效果进行分析二、具体实现1.打开Dreamweaver2021新建一个html5格式文档,并设置title2.在新建的的文档里利用html搭建起整体框架结构3.搭建完整体的结构之后引入对应的图文内容4.最后嵌入式的方式引入css样式设计效果最后使用浏览器打开预览效果如下实现代码<!doctype html><html><head><meta charset="U

2022-01-26 17:29:32 3561 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除