- 博客(15)
- 收藏
- 关注
RSS订阅原创 模块化工具webpack的基本使用方法
前情提要：webpack可以直接处理js或者json文件，不能直接处理css、img等文件资源；生产环境和开发环境都可以将es6模块化编译成各种浏览器都可以识别的模块化；生产环境比开发环境多一个压缩js代码的功能，在生产环境中更利于我们的学习。搭建环境所要用到的工具和相关知识点如下图所示：1、webpack需要被搭建在node的环境中，我们在官网上直接下载node即可。2、在命令行窗口中进入到用来创建网页文件的总文件夹下。3、使用npm init 命令在总文件夹中创建一个package.json
2020-05-09 20:23:03
159
原创 如何使用Babel来编译ECMAJavaScript
ECMAJavaScript6需要经过Babel编译之后，兼容各种版本的浏览器，并且整个过程需要在node的环境下进行，下文将会介绍ECMAJavaScript如何经过Babel的编译从而可以兼容各种浏览器。
2020-05-06 16:10:04
171
原创 网页中字体图标的下载和引用
第一步：字体图标样式的下载字体图标下载网站：http://icomoo.io选择你想要的字体样式，并点击generate font来生成字体。这个时候就可以下载了。下载的文件是个压缩包，需要解压。第二步：字体图标样式的引用打开解压后的文件夹，把文件夹中fonts文件放进你用来创建网页的文件夹里。打开解压后的文件夹里的style.css文件，我们需要把里面的部分代码放进你用...
2020-04-21 21:38:27
548
原创 Ajax的基本概念和使用方法02
前情摘要：在本次实验中采取了js代码和HTML分离的方式。文件夹中一共有五个文件：HTML文档、三个js文件、以及一个txt文件。HTML文件如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Ajax02</title> <sc...
2020-04-18 20:23:58
102
原创 Ajax的基本概念和使用方法01
前情摘要：在创建的文件夹中，包含了一个内嵌有js代码的HTML文档，和一个txt类型的show01文件，show01文件将作为浏览器在服务器上要访问的文件。详细介绍会在代码中说明！完整代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Ajax01...
2020-04-18 19:22:18
108
原创 左中右布局占满屏幕，左右两边的盒子指定宽度，中间的盒子自适应大小。
展示效果：另一种方式的展示效果（浏览器窗口可以视为以下网页布局中的父盒子）：HTML代码如下： <!-- 在HTML文档中先输入了中间的盒子，那么当左边和右边的盒子设置定位以后，左右两边的盒子将会覆盖掉部分中间的盒子 --> <!-- 如果中间的盒子在HTML文档中的位置处于中间的话，那么设置绝对定位以后的中间盒子将会覆盖掉前面的左盒子。 --> <...
2020-04-18 10:35:52
1410
原创 让一个固定大小的盒子在不同分辨率的屏幕中上下左右四个方向都居中显示
效果展示：CSS代码如下：div{ /* 设置元素为绝对定位，该元素将会以浏览器窗口为相对位置进行定位 */ position: absolute; /* 该元素经过左边方向和上边方向的定位以后，该元素还没有处于屏幕的中心位置 */ left: 50%; top: 50%; /* 此时该元素的左上角的哪一个点是在屏幕的中心位置...
2020-04-17 21:28:06
601
原创 网页中选项卡的基本实现
效果展示：HTML代码如下：<div id="div1"> <!-- 指定某一个按钮的类属性值，后续将会利用js来改变，以达到理想中的效果 --> <input type="button" class="active" value="aaa" /> <input type="button" value="bbb" /> ...
2020-04-17 00:04:29
268
原创 Ajax的基本概念和使用方法03
Ajax的基本概念和核心技术：Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器当中的脚本与服务器之间的中间人的角色。以往的请求都由浏览器发出，而JavaScript可以通过这个对象自己发送请求，同时也自己处理响应。Ajax技术的基本应用：首先，我们需要创建一个XMLHttpRequest，不同的浏览器有不同的创建方式，所以为了兼容各种版本的浏览器，创建XMLHttp...
2020-04-16 23:21:07
78
原创 解决父元素因子元素设置浮动而产生的高度塌陷的四种方式
父元素高度塌陷的原因：在没有设置高度的父元素内，子元素全部设置浮动以后，子元素脱离文档流，不在占有文档流的位置，因此父元素高度塌陷，对后面的元素排版将产生影响。方式一：额外标签法在父元素的后面添加一个空的块元素标签，并对这个空的块元素标签清除对他影响最大浮动。但是这种方法增加了无用的标签并且与结构与样式相分离的宗旨相违背。完整代码如下：<!DOCTYPE html><h...
2020-04-16 12:16:07
194
原创 使用JS中的定时器实现块元素背景颜色淡入和淡出的效果
效果展示：HTML代码如下：<body> <div id="div1"></div> </body>CSS代码如下：#div1{ width: 200px; height: 200px; background-color: red; /* 兼容ie6 */ /* filter: alpha(op...
2020-04-16 01:33:01
831
原创 JS实现的一个块元素可以自由移入移出的网页效果
展示效果为：HTML代码如下：<div id="div1"> <span>分享到</span> </div>CSS代码如下：#div1{ width: 150px; height: 200px; background-color: green; /* 给元素设置绝对定位 */ positio...
2020-04-16 00:19:49
416
原创 javescript实现图片无缝滚动的网页效果
效果展示：HTML代码：<!-- 放两个按钮用来控制滚动的方向 --> <input type="button" value="向左走"> <input type="button" value="向右走"> <!-- 一个大的div中含有一个无序列表，并且无序列表中有四个列表项，列表项中的图片自定义。 --> <div id...
2020-04-13 18:42:02
166
原创 子元素浮动之后引起的父元素高度塌陷问题
父元素高度塌陷问题出现的原因：父元素内的子元素设置浮动之后，子元素脱离文档流，没有设置高度的父元素失去该子元素原本支撑的高度，因此会出现高度塌陷问题。父元素高度塌陷展示：**解决办法：**在父元素的after后面添加一个空的内容，并把它转换为块元素，并且清除对它影响最大的浮动效果。相关代码如下所示：.clearfix:after{ content: ""; /* 添加一个空内容 *...
2020-04-13 16:25:46
414
原创 嵌套块元素塌陷问题（父元素与子元素的垂直外边距）
嵌套块元素塌陷问题：1、父元素没有设置上外边距的情况下，给子元素设置的上外边距会传递给父元素。2、父元素和子元素同时设置上外边距，此时父元素的上外边距的值是两者中值较大的那一个，并且给子元素设置的上外边距无效。解决办法：在样式中给父元素设置overflow属性值为“hidden”。.father{ width: 300px; height: 300px; backgro...
2020-04-13 15:45:11
591
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人