HTML5
关注
分享
扫一扫
文章平均质量分 59
HTML
Etui۹(･༥･´)و ̑̑
拉屎之于工作，如同代码之于生活。
展开
-
三个漂亮的网页登录页面源码及素材——可用于前端初学者练习HTML&CSS
注：这三个登录页面涉及到的图片素材可自行寻找，字体图标素材可以在阿里字体图标库获取（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2），如需原版素材可联系作者QQ（3416252112）废话不多说先上图为敬！！文件目录结构FIRST1、html源码（index.html）<!DOCTYPE html><html lang="zh"><head> <me原创 2021-10-11 19:11:01 · 36554 阅读 · 14 评论 -
前端制作科技感网页登录界面
注：如需背景图请联系作者（QQ：3416252112）效果图：源码：<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>科燃原创 2021-04-24 15:56:21 · 6606 阅读 · 3 评论 -
HTML/CSS/JS制作网页中的二级下拉菜单
注：该练习中涉及的move方法(移动效果)可参考博文“JavaScript_网页中使用按钮控制图形的移动效果(https://editor.youkuaiyun.com/md/?articleId=115607200)”若对此练习有所疑惑可参考尚硅谷李立超老师在B站的js基础教程(https://www.bilibili.com/video/BV1YW411T7GX?p=138)下面我们看一下该下拉菜单的效果图：以下为源码和解析：css文件：second.css@charset "utf-8";/* s原创 2021-04-15 20:44:08 · 2061 阅读 · 6 评论 -
JavaScript制作网页中的轮播图(带有过渡效果)源码解析
注：本练习主要以效果图和源码解析的方式介绍，如有疑问可参考尚硅谷李立超老师的JS基础教程(https://www.bilibili.com/video/BV1YW411T7GX?p=136);效果图：![在这里插入图片描述](https://img-blog.csdnimg.cn/20210413203106801.gif源码解析：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8原创 2021-04-13 20:33:55 · 979 阅读 · 1 评论 -
JS定时器_制作网页中图片的轮播效果
效果图：源码及解析：<!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, initial-scale=1.0"> <原创 2021-04-11 21:23:58 · 408 阅读 · 2 评论 -
JavaScript_Browser对象(BOM)的使用方法及特点
注：本案例主要介绍Navigator对象、History对象、Location对象的使用方法及特点1.BOM简介BOM浏览器对象模型BOM可以使我们通过JS来操作浏览器在BOM中为我们提供了一组对象，用来完成对浏览器的操作BOM对象Window代表的是整个浏览器的敞口，同时window也是网页中的全局对象Navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器Location代表当前浏览器的地址栏信息，通过Location可以获取到地址栏信息，或者搜索浏览器跳转页面原创 2021-04-10 20:53:00 · 540 阅读 · 0 评论 -
JavaScript中DOM键盘事件，使用键盘方向键控制图形的移动
注： 键盘事件 onkeydown 按键按下 如果按住按键不松，则该事件会连续触发 当onkeydown连续触发时，第一次和第二次之间会间隔时间稍长，其他的会非常快 这种设计是为了防止一些误操作 onkeyup 按键被松开原创 2021-04-10 15:45:16 · 1199 阅读 · 2 评论 -
如何使用JavaScript制作网页中跟随鼠标移动的图形？
注：本案例主要演示 网页中的几个坐标属性的用法（clientX，clientY，pageX，pageY），如有疑问可去B站观看尚硅谷李立超老师的JS教程（https://www.bilibili.com/video/BV1YW411T7GX?p=112&spm_id_from=pageDriver）。效果图：源码及解析：<!DOCTYPE html><html> <head> <meta charset="UTF-8">原创 2021-04-05 14:37:13 · 832 阅读 · 0 评论 -
前端制作简单的“注册页面——阅读协议”页面及效果
注：如对文中的scrollHeight、scrollTop、clientHeight属性有所一伙，请参考博文“JavaScript中元素client、offset、scroll相关属性的应用”（链接：https://blog.youkuaiyun.com/m0_47015897/article/details/115426441）效果图：源码及解析：<!DOCTYPE html><html> <head> <meta charset="UTF-原创 2021-04-04 11:09:06 · 4305 阅读 · 0 评论 -
JavaScript中元素client、offset、scroll相关属性的应用
注：本联系主要讲解的属性为：clientHeight、clientWidth、offsetParent、offsetWidth、offsetHeight、offsetLeft、offsetRight、scrollWidth、scrollHeight、scrollTop、scrollLeft效果图：源码及解析：<!DOCTYPE html><html> <head> <meta charset="UTF-8">原创 2021-04-04 10:59:44 · 252 阅读 · 0 评论 -
JavaScript使用DOM修改、操作和读取CSS样式
注：本案例通过单击button按钮来体现css样式被修改和读取的过程操作CSS样式效果图：读取CSS样式效果图：DOM操作CSS样式源码及解析：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>使用DOM操作CSS样式</title> <style>原创 2021-04-03 20:57:36 · 438 阅读 · 0 评论 -
JavaScript实现向表格中添加记录和删除记录（JS添加删除节点练习）
注：本案例适合dom初学者练习节点的删除添加操作。效果图：源码及解析：html & JavaScript源码：<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel="stylesheet"原创 2021-03-30 20:33:58 · 698 阅读 · 0 评论 -
JS控制复选框选中状态
效果图：源码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>全选练习</title> <script type="text/javascript"> window.onload = function(){原创 2021-03-27 20:31:52 · 4136 阅读 · 1 评论 -
JavaScript_DOM查询练习
注：具体视频教程可参考尚硅谷李立超老师教程(https://www.bilibili.com/video/BV1YW411T7GX?p=94)本练习主要适用于初学者，我在源码中适当加入了文本注释以便初学者参考。运行界面：css文件：@CHARSET "UTF-8";body { width: 800px; margin-left: auto; margin-right: auto;}button { width: 300px; margin-bottom: 10px;}#原创 2021-03-27 15:37:27 · 316 阅读 · 0 评论 -
JavaScript_网页中单击按钮切换图片
本案例效果如图：实现源码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片切换</title> <!-- <link rel="stylesheet" href="./css/reset.css"> --> <style> *原创 2021-03-25 19:52:59 · 683 阅读 · 1 评论 -
前端入门学习路线图（思维导图）
这个路线图是我刚开始学习前端时给自己规划的，希望对你有所帮助^ _ ^！原创 2021-03-15 16:56:35 · 604 阅读 · 0 评论 -
CSS/HTML静态购物网站项目源码解析（品优购）——该项目包含主页、注册页、列表页三个网页
注：该项目所涉及的素材文件请QQ联系作者（Etui：3416252112）首先：上图！index.html------主页register.html-------注册页list.html-----列表页摘要：作为一个前端初学者，这是我学完html和css基础后做的第二个练习（第一个是小米商城），在练习过程中也遇到了很多困难，好在最终都一一解决，这是一个成长的过程！这个项目是我在B站中pink老师的教程里看到的，我先是自己尝试敲了一遍，然后再回头看一遍老师的方法。（我感觉这种学习方法很不错原创 2021-02-19 16:33:21 · 11279 阅读 · 6 评论 -
JavaScript强制类型转换与运算符
注：练习一主要讲述“显式”的三种强制转换，即:1、其他数据类型转换为String型2、其他数据类型转换为Number型3、其他数据类型转换为Boolean型练习二为五个运算符的使用，在练习二中也包括“隐式”的强制转换，例如：通过+、-、*、/等运算符可以将非数值的变量或常量进行运算，且结果为数值型。练习一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-02-19 15:31:10 · 257 阅读 · 0 评论 -
CSS&HTML&REM制作手机端网页（小练习）
效果图：html文件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l原创 2021-02-03 12:17:22 · 1101 阅读 · 1 评论 -
CSS/HTML制作在网页中持续旋转的六面体
注：更改图片路径即可实现重新引用效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复仇者联盟</title> <link rel="s原创 2021-01-30 17:17:26 · 1634 阅读 · 3 评论 -
CSS/HTML制作网页中动态时钟解析
简介：该案例中旋转的并非是指针，而是将背景设置为透明色的指针父元素。对于实现钟表效果，只需要将指针父元素块在clock中居中，然后指针在其父元素中居中，让指针父元素旋转即可。效果图：背景：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in原创 2021-01-30 16:26:08 · 730 阅读 · 1 评论 -
HTML、CSS制作小米商城网页首页源码解析
简介：这是我学习前端以来仿写的第一个项目，沿着尚硅谷李立超老师的教学视频学习。在仿写这个项目的过程中即巩固了这两周以来的知识，也增加了一些小经验（主要是老师传授），同时也让自己更加有信心学习下去。相信自己一定会实现自己的小梦想！加油！小米官网效果：效果图：文件目录：HTML文件index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2021-01-29 17:32:49 · 34630 阅读 · 20 评论 -
CSS/HTML制作电影网站中的电影卡片
简介：本案例宽度固、底部评分栏宽高固定，总体高度可根据文量和图片的大小自动调整效果图（通过不同文字和图片呈现效果）：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-01-27 11:04:56 · 5695 阅读 · 1 评论 -
CSS/HTML制作京东商城顶部导航条
京东商城原网站：效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东商城导航条</title> <link rel="stylesh原创 2021-01-24 17:14:30 · 4771 阅读 · 4 评论 -
CSS高度塌陷问题的解决方案
以下两个案例分别使用HTML标签和CSS伪元素解决高度塌陷问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高度塌陷的解决方法</title> <sty原创 2021-01-23 10:45:02 · 226 阅读 · 0 评论 -
CSS/HTML制作W3School网页的导航条
W3School原网页：效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>W3School导航条</title> <link rel="sty原创 2021-01-22 17:13:49 · 2013 阅读 · 0 评论 -
CSS/HTML制作网易新闻右侧新闻栏的解析及步骤
网易新闻原网站：效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网易新闻右侧列表</title> <link rel="styles原创 2021-01-22 11:50:22 · 2964 阅读 · 0 评论 -
CSS/HTML制作京东商城左侧导航栏的解析及步骤
京东商城原网站：效果图：该仿制效果与原网站效果相似度百分之九十五以上源码：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东商城左侧导航条</title>原创 2021-01-22 11:42:25 · 2795 阅读 · 0 评论 -
使用CSS/HTML制作网页中简单的图片列表
效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片的列表</title> <link rel="stylesheet" href=".原创 2021-01-22 11:36:33 · 1253 阅读 · 1 评论 -
CSS行内元素与盒子模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内元素的盒模型</title> <style> .s1{原创 2021-01-22 11:33:40 · 464 阅读 · 0 评论 -
CSS盒模型的使用方法（边框、内边距、外边距）
一、边框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型_边框</title> <style> .box1{原创 2021-01-22 11:30:50 · 383 阅读 · 0 评论 -
HTML学习笔记——实体（转义字符），内联框架
1.实体（转义字符）<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>实体练习</title> </head> <body> <!--在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格 在原创 2020-12-26 15:51:57 · 247 阅读 · 0 评论 -
HTML5学习笔记——meta标签
<!DOCTYPE html><!--文档的声明--><meta charset="UTF-8"><!--meta标签用来设置网页的元数据，这里meta用来 帮助浏览器或搜索引擎来解析网页--><html lang=zh><!--lang属性用来表示该网页的语言类型，即：‘en’表示英语，‘zh’表示中文--> <head> <title&g原创 2020-12-26 15:49:25 · 220 阅读 · 0 评论 -
HTML5学习笔记——超链接标签与target属性
1.超链接标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接</title></head><body> <!-- 超链接可以让我们从一个页面跳转到其他页面， 或者是当前页面的其他位置 使用 a 标签来定义超链接原创 2020-12-26 15:48:06 · 1805 阅读 · 1 评论 -
HTML5学习笔记——图片标签与图片格式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片标签</title></head><body> <!-- 图片标签用于向当前原创 2020-12-26 15:45:23 · 580 阅读 · 0 评论 -
HTML5学习笔记——音频标签与视频标签的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!--原创 2020-12-26 15:43:12 · 727 阅读 · 0 评论 -
HTML学习笔记——常用标签的使用（语义化标签）
1.标题标签<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>语义化标签</title> </head> <body> <!-- 在网页中HTML专门用来负责网页的结构 所以在使用HTML标签时，应原创 2020-12-26 15:41:52 · 369 阅读 · 1 评论