- 前提： ::-webkit-scrollbar这个伪类选择器能改（比如网页右侧的）滚动条样式，不过好像挺多浏览器不兼容，我也不是太熟这个属性。 用用： 对应改的部分 ::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb ... 前提： ::-webkit-scrollbar这个伪类选择器能改（比如网页右侧的）滚动条样式，不过好像挺多浏览器不兼容，我也不是太熟这个属性。 用用： 对应改的部分 ::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb ...
- 在写爬虫之前，我们还需要了解一些基础知识，如 HTTP 原理、网页的基础知识、爬虫的基本原理 、 Cookies 的基本原理等。 HTTP基本原理 一个网站的图标链接，它就是一个URL，也可以叫URI，但是我个人习惯于URL，而且在互联网中URL也是比较常见的。 超文本 我们在浏览器里看到的网页就是超文本解析而成的， 其网页源代码是一系列 HTML 代码， ... 在写爬虫之前，我们还需要了解一些基础知识，如 HTTP 原理、网页的基础知识、爬虫的基本原理 、 Cookies 的基本原理等。 HTTP基本原理 一个网站的图标链接，它就是一个URL，也可以叫URI，但是我个人习惯于URL，而且在互联网中URL也是比较常见的。 超文本 我们在浏览器里看到的网页就是超文本解析而成的， 其网页源代码是一系列 HTML 代码， ...
- 效果： 实现： 定义标签, .result是显示计算结果框，.anniu里放数字和运算符按钮，.zero是清除按钮，它们都在表单域 form里： <form class="kuang" name="kuang" > <input type="text" class="result" name="result"> <div class="anniu"> <sp... 效果： 实现： 定义标签, .result是显示计算结果框，.anniu里放数字和运算符按钮，.zero是清除按钮，它们都在表单域 form里： <form class="kuang" name="kuang" > <input type="text" class="result" name="result"> <div class="anniu"> <sp...
- 先看效果（完整代码在底部）： canvas小球连线碰撞完整源代码 html+css+js 这是我的B站地址~热烈欢迎 实现（看注释，可一步一步跟着实现）： 0：定义标签： <h1>北极光之夜。</h1> <canvas id="canvas"></canvas> 12 1. 定义变量： /* 获取画布 */ var canvas =... 先看效果（完整代码在底部）： canvas小球连线碰撞完整源代码 html+css+js 这是我的B站地址~热烈欢迎 实现（看注释，可一步一步跟着实现）： 0：定义标签： <h1>北极光之夜。</h1> <canvas id="canvas"></canvas> 12 1. 定义变量： /* 获取画布 */ var canvas =...
- 先看效果： 轮播图做法有很多，效果也有很多。下面是一种简单的两边图片模糊，中间图片放大的轮播图效果。鼠标点击左边或右边的图片后，它们会移动到中间并变大，其它图片移动到到两边并模糊。 点击最右边图片： 点击最左边图片： 这个效果是只是有鼠标点击后就轮播，至于鼠标不点击也定时自动轮播的效果以后有时间再出一片文章。 实现： 1. 定义标签，.kuang是最底层... 先看效果： 轮播图做法有很多，效果也有很多。下面是一种简单的两边图片模糊，中间图片放大的轮播图效果。鼠标点击左边或右边的图片后，它们会移动到中间并变大，其它图片移动到到两边并模糊。 点击最右边图片： 点击最左边图片： 这个效果是只是有鼠标点击后就轮播，至于鼠标不点击也定时自动轮播的效果以后有时间再出一片文章。 实现： 1. 定义标签，.kuang是最底层...
- 效果： 【html+css+js】俄罗斯方块源码分享 这是在网上跟着黑马的视频做的，然后也加了些自己的想法。 在线试玩：http://www.beijiguang.site/game/index.html 完整代码： 直接复制用的换个背景视频地址就行~ 核心 js 部分都有解析。 <!DOCTYPE html> <html lang="zh-CN... 效果： 【html+css+js】俄罗斯方块源码分享 这是在网上跟着黑马的视频做的，然后也加了些自己的想法。 在线试玩：http://www.beijiguang.site/game/index.html 完整代码： 直接复制用的换个背景视频地址就行~ 核心 js 部分都有解析。 <!DOCTYPE html> <html lang="zh-CN...
- 效果： 前言： 思路是看up主xiao-high的，然后自己也弄了一个。效果有一个缺点就是图片边缘区域放大不了。 实现： 定义标签：.frame是底层盒子，img是小图片，宽设置100%，跟底层盒子一样。.circle是放大镜，.circle里的img是放在.circle里的大图片。 <div class="frame"> <img src="25.jp... 效果： 前言： 思路是看up主xiao-high的，然后自己也弄了一个。效果有一个缺点就是图片边缘区域放大不了。 实现： 定义标签：.frame是底层盒子，img是小图片，宽设置100%，跟底层盒子一样。.circle是放大镜，.circle里的img是放在.circle里的大图片。 <div class="frame"> <img src="25.jp...
- ie版本Div不随着滚动.html ----------------------------------------------------- <html> <head> <title></title> <style type="text/css"> html,body { overflow:hidden; margin:0px; width:100%; ... ie版本Div不随着滚动.html ----------------------------------------------------- <html> <head> <title></title> <style type="text/css"> html,body { overflow:hidden; margin:0px; width:100%; ...
- 前言 vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是浏览器实际显示内容区域，换句话说是不包括工具栏和按钮的网页浏览器。 （2）具体描述如下： vw：视窗宽度的百分比... 前言 vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是浏览器实际显示内容区域，换句话说是不包括工具栏和按钮的网页浏览器。 （2）具体描述如下： vw：视窗宽度的百分比...
- calc是英文单词calculate(计算)的缩写,是css3的一个新增功能; MDN的解释为：可以用在任何长度,数值,时间,角度,频率等处; CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50p... calc是英文单词calculate(计算)的缩写,是css3的一个新增功能; MDN的解释为：可以用在任何长度,数值,时间,角度,频率等处; CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50p...
- 先看效果（完整代码在底部）： 因为录屏软件的原因，动画看着有点迟钝，其实是动画很顺畅的~ https://space.bilibili.com/176586698 实现过程（可一步一步实现）： 1.定义标签与基本css样式： <h1>北极光之夜。</h1> <canvas id="canvas"></canvas> 12 #canvas{ p... 先看效果（完整代码在底部）： 因为录屏软件的原因，动画看着有点迟钝，其实是动画很顺畅的~ https://space.bilibili.com/176586698 实现过程（可一步一步实现）： 1.定义标签与基本css样式： <h1>北极光之夜。</h1> <canvas id="canvas"></canvas> 12 #canvas{ p...
- 在一些必填项的标签加星，来提示用户，怎么实现呢？请看本文介绍的两种方法。 1 . 常规写法 <label><span style="color:red;">* </span>孙叫兽 : </label><input type="text" value=""/> 2 . CSS写法(更简洁方便 , 而且便于统一调整样式) <style> label.xreq... 在一些必填项的标签加星，来提示用户，怎么实现呢？请看本文介绍的两种方法。 1 . 常规写法 <label><span style="color:red;">* </span>孙叫兽 : </label><input type="text" value=""/> 2 . CSS写法(更简洁方便 , 而且便于统一调整样式) <style> label.xreq...
- 效果（完整代码在底部）： 实现（原理是比较简单的）： 1.定义标签： <canvas id="canvas"></canvas> 1 2.canvas基本css样式： canvas{ background-image: url(img/对比图/1.1.png); background-size: cover; } 1234 background-imag... 效果（完整代码在底部）： 实现（原理是比较简单的）： 1.定义标签： <canvas id="canvas"></canvas> 1 2.canvas基本css样式： canvas{ background-image: url(img/对比图/1.1.png); background-size: cover; } 1234 background-imag...
- 目录 基本下拉菜单 实例解析 下拉菜单 下拉内容对齐方式 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 基本下拉菜单 当鼠标移动到指定元素上时，会出现下拉菜单。 <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { displa... 目录 基本下拉菜单 实例解析 下拉菜单 下拉内容对齐方式 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 基本下拉菜单 当鼠标移动到指定元素上时，会出现下拉菜单。 <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { displa...
- 如何使用 HTML 与 CSS 来创建提示工具。 提示工具在鼠标移动到指定元素后触发 基础提示框(Tooltip) 提示框在鼠标移动到指定元素上显示： <style> /* Tooltip 容器 */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted bla... 如何使用 HTML 与 CSS 来创建提示工具。 提示工具在鼠标移动到指定元素后触发 基础提示框(Tooltip) 提示框在鼠标移动到指定元素上显示： <style> /* Tooltip 容器 */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted bla...
上滑加载中
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新，构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间，华为云展示了Serverless与MCP融合创新的解决方案，本期访谈直播，由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持，华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中，探讨处理器生态的关键要素及其联系，分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源，3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源，3步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签