前端样例实战
文章平均质量分 50
在学习了相关知识后,进行样例训练。达到巩固知识的目的
bear*6
努力的小熊
展开
-
动态生成表格案例(HTML+CSS+JS)
在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除。实现代码为:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0;原创 2021-12-21 16:07:06 · 5014 阅读 · 0 评论 -
模态框拖拽效果实战(HTML+CSS+JS)
在这里做一个模态框拖曳的案例,在这里要实现的功能有:点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层。点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。鼠标松开,可以停止拖动模态框移动。实现思路为:点击弹出层, 模态框和遮挡层就会显示出来 display:block;点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标。触发事件是鼠标按原创 2021-12-21 15:41:37 · 720 阅读 · 0 评论 -
放大镜效果实战(HTML+CSS+JS)
在浏览网页时,我们经常会看到各种各样放大镜效果,那么小熊今天就来模拟一下该效果。我们要实现的功能为:当鼠标经过小图片时, 会在小图片上显示一个小的遮挡层并将遮挡层里面的内容放大显示,当鼠标离开时,让遮挡层和放大显示的图片消失掉。实现思路为:先让小的遮挡层跟随鼠标移动。因为遮挡层坐标以父盒子为准,所以把鼠标坐标给遮挡层不合适。首先是获得鼠标在盒子的坐标,之后把数值给遮挡层做为left 和top值。但是为了美观,在这里可以将遮挡层中间的坐标给鼠标,即让遮挡层位置再减去盒子自身高度和宽度的一半。然后用到原创 2021-12-21 15:41:13 · 1646 阅读 · 0 评论 -
数据在不同页面的传递(URL参数获取)
网页中,我们常常遇到这种情况,当我们在某个页面输入信息的时候,会跳转到另一个页面,并且会将我们输入的信息传递到另一个页面中,怎样操作呢?今天,我们就来实战一下,比如,现在有两个页面,当我们在一个页面输入用户信息的时候,就会跳转到另一个页面并显示,xx欢迎登录的界面。 先来看看设计思路:第一个登录页面,里面有提交表原创 2021-12-06 18:10:20 · 1341 阅读 · 1 评论 -
HTML+CSS系列实战之音乐播放器实现
前面学了一些基本的HTML结构和CSS样式,为了巩固所学的知识,小熊将带领大家一起就前期所学到的知识做一个简单的音乐播放器。代码先行!!!html文件为:(music.html)<!doctype html><html><head><meta charset="utf-8"><title>音乐播放页面</title><link rel="stylesheet" href="music.css" type="text原创 2021-11-05 23:06:27 · 10949 阅读 · 8 评论 -
HTML+CSS系列实战之添加遮罩层
在这里我们将完成一个当鼠标经过某个图片时,图片添加遮罩层的效果。为了方便起见,小熊这里只写了两个盒子。 实现思路是:将遮罩的盒子覆盖在图片上,遮罩的盒子不占有位置,所以用绝对定位 和 display 配合使用。当鼠标经过时,让遮罩的盒子显示display:block,鼠标离开时,让遮罩的盒子隐藏display:none原创 2021-11-05 21:24:20 · 5166 阅读 · 0 评论 -
Chrome调试工具的使用
作为一名合格的程序员,会使用调试工具当然是必不可少的啦,今天就和大家分享几个用Chrome调试工具调试 HTML 结构和 CSS 样式的小妙招。当我们写好结构和样式后,在谷歌浏览器中打开就可以看到我们的页面啦。小熊写了一个简单的页面,展示如下:...原创 2021-11-05 11:09:50 · 506 阅读 · 0 评论 -
HTML+CSS系列实战之侧边栏的实现
这里要实现一个:当鼠标经过某个位置时,其具体位置发生变化的效果。(仿小米侧边栏)代码实现:<!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-wid原创 2021-11-04 23:33:22 · 4758 阅读 · 4 评论 -
HTML+CSS系列实战之超链接、音视频
实现一个自我介绍页面,要求用到页面的跳转、音频、视频等综合属性。主页面的代码为:(intrudiction.html)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自我介绍&l原创 2021-10-22 13:16:41 · 2299 阅读 · 0 评论 -
HTML+CSS系列实战之表格
这里写目录标题1、建立如图所示列表2.1、建立如图所示列表代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></原创 2021-10-22 12:07:59 · 1025 阅读 · 0 评论