前端三剑客网页构造
关注
分享
扫一扫
文章平均质量分 70
html+css+js
托尼比卡丘
程序员年二十有六，始从文连考而不中。遂习武练武场上发一矢，中鼓吏逐之出。改学IT自撰一函数，堆栈溢出。
(wx: Old_Love125)
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【源码解读】25年跨年 一起来放个烟花吧
这个项目是一个基于 HTML5 Canvas 的跨年烟花模拟器。用户可以通过点击屏幕来点燃烟花，烟花会在空中爆炸并产生绚丽的视觉效果。项目还支持自动发射烟花、调整烟花类型、大小、画质等设置，提供了丰富的交互体验。跨年烟花项目涉及多个复杂的技术点，包括 Canvas 渲染、物理模拟、用户交互、音效播放、状态管理和跨平台兼容性。通过深入分析这些难点，我们可以更好地理解前端动画和交互的实现原理，并为类似项目的开发提供参考。如果你对前端动画和物理模拟感兴趣，这个项目是一个非常值得学习的案例。原创 2024-12-31 17:07:30 · 1332 阅读 · 1 评论 -
【CSS】 Grid布局：现代网页设计的基石
CSS Grid布局是现代网页设计中不可或缺的布局工具，它提供了一种高效、灵活的方式来创建复杂的二维布局。本文深入探讨了CSS Grid布局的基础知识，包括如何定义网格、管理网格项以及利用命名网格线和间隙来优化布局。我们还将探讨CSS Grid布局相较于传统布局技术的优势，如其简洁的语法、强大的对齐控制和响应式设计能力。通过实际案例分析，本文将向你展示如何将CSS Grid布局应用于实际项目中，以创建美观且功能强大的用户界面。原创 2024-09-12 09:04:32 · 1244 阅读 · 1 评论 -
【css】使用CSS绘制奥运五环--巴黎奥运
在2024年巴黎奥运会期间，本文来使用 CSS 来画一个奥运五环。奥运五环由五个相互交叠的圆环组成，分别代表五大洲。奥运五环是相互连接的，因此在视觉上会产生重叠效果，这也是实现五环最有挑战性的部分。原创 2024-08-05 17:30:48 · 1006 阅读 · 0 评论 -
【css】 CSS3+JS做一个酷炫的仪表进度条&3d进度条
在现代网页设计中，进度环是一种常见的视觉元素，用于展示任务的完成度或加载状态。本文将介绍如何使用Vue.js和Less创建一个动态进度环组件，该组件不仅具有美观的视觉效果，还能够根据用户输入动态改变颜色。已经支持动态配置-----原创 2024-08-05 10:53:32 · 1541 阅读 · 0 评论 -
【css】3d柱状图-vue组件版
在现代网页设计中，圆柱形进度条是一种非常流行的视觉元素，用于展示数据的进度或状态。本文将介绍如何使用Vue.js和LESS创建一个响应式的圆柱形进度条组件。原创 2024-08-02 16:42:53 · 686 阅读 · 0 评论 -
【css3动画】分享几组手写Loading...加载中...样式
在网页开发中，加载动画是提升用户体验的重要元素之一。本文将分享三种不同的Loading…加载中…样式，每种样式都具有独特的视觉效果和动画表现。你可以根据自己的项目需求选择合适的样式，或者将它们作为灵感来创建自己的加载动画。原创 2024-07-24 10:22:02 · 1053 阅读 · 1 评论 -
【html】理工男李峋的极致浪漫：爱心代码｜和你的心跳同频共振
看到最近《点燃我温暖你》中男主角——理工男李峋的爱心代码撩到了无数人，于是把代码开源分享给大家。哈哈哈，只是长的比较像，李峋的爱心代码你得找李峋去要了。看了评论，有人人不知道怎么用这个代码实现效果。原创 2022-11-07 13:24:17 · 9306 阅读 · 32 评论 -
利用JavaScript隐藏和显示div元素完整版
div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白Js代码 收藏代码style=“visibility: none;”document.getElementById(“typediv1”).style.visibility=“hidden”;//隐藏document.getElementById(“typediv1”).style.visibility=“visible”;//显示通过设置display属性可以使div隐藏后释放占用的页面空间如下Js代码 收藏代码s原创 2020-11-11 11:41:26 · 1380 阅读 · 0 评论 -
关于HTML按钮跳转方法（及其相关）
html 跳转问题（及其相关）方法一<a href="javascript:" onclick="history.go(-2); ">返回前两页</a> 方法二<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>方法三$(".btn").click(function(){ window.history.back(); ...原创 2021-02-03 09:34:08 · 42534 阅读 · 0 评论 -
【css】分享几套css初始化代码
一套强大的css初始化代码@charset "UTF-8";/*css 初始化 */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin: 0; padding: 0;}fieldset, img, input, button { /*fieldset组合表单中的相关元素*/ border: none;原创 2021-01-21 15:02:14 · 2657 阅读 · 0 评论 -
隐藏滚动条适用于各个浏览器
怎麽把＂滚动条＂隐藏？ 问题釐清什麽是＂滚动条＂？滚动条指的是下图右侧被红线框起来的部分：只要网页内容大于视窗，滚动条就会出现。一般来说，只要不是body层次的滚动条，那用overflow: hidden;就能解决滚动条出现的问题，但此时页面也会变得无法捲动。目前网路上已经有诸多可隐藏非body层次的滚动条又可捲动页面的教学，所以本文主要聚焦于如何隐藏浏览器（也就是body层次）的滚动条。解决方法针对不同的浏览器，有不同的隐藏滚动条的方法，以...原创 2021-01-13 10:45:28 · 10204 阅读 · 2 评论 -
如何调用另一个html的方法
html中引入调用另一个html的方法，尝试了好几种，都列出来： 其中第一种是最好的，其他的方法，可以尝试看看，是不是适合你当前项目 一、div+$(“#page1”).load(“b.html”) 参考代码： <body> <div id="page1"></div> <div id="page2"></div> <script> $("#page1").load("page/Pag原创 2020-10-23 08:36:20 · 1297 阅读 · 0 评论 -
鼠标样式暴力修改
一般我们在浏览网页的时候，我们的鼠标只有三种样式，分别为text(遇到文本内容时，I)，pointer(遇到超链接，手指形状),和default(没遇到实际内容，箭头形状)，如果我们想要改变鼠标的悬停样式，我们该怎么办呢?下面是一个简单的例子<html><head><style type="text/css">input.userna...原创 2019-09-25 14:54:57 · 547 阅读 · 0 评论 -
网页模板中如何正确的导入js、css等静态文件
因为我的项目是django我就拿django搭建的网站举例其它网站也一样Django版本1.10网站通常需要js，css，图片等文件，在Django中，我们把这些文件称为“静态文件”（static files）。Django提供django.contrib.staticfiles来管理他们。 使用方法如下：1.在settings.py中定义你的STATIC_URL：STATIC_URL=...原创 2019-07-17 10:44:51 · 1568 阅读 · 0 评论