- 先看效果： 轮播图做法有很多，效果也有很多。下面是一种简单的两边图片模糊，中间图片放大的轮播图效果。鼠标点击左边或右边的图片后，它们会移动到中间并变大，其它图片移动到到两边并模糊。 点击最右边图片： 点击最左边图片： 这个效果是只是有鼠标点击后就轮播，至于鼠标不点击也定时自动轮播的效果以后有时间再出一片文章。 实现： 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...
- 目录 CSS 总结 你已经学习了CSS,下一步学习什么呢? CSS 总结 本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。 你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。 同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添... 目录 CSS 总结 你已经学习了CSS,下一步学习什么呢? CSS 总结 本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。 你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。 同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添...
- 目录 精灵图/雪碧图 图像拼合 - 简单实例 图像拼合 - 创建一个导航列表 图像拼合s - 悬停效果 精灵图/雪碧图 精灵图/雪碧图就是图像拼合 也就是单个图像的集合。 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量，并节省带宽。 图像拼合 - 简单实例 与其使用三个独立的图像，... 目录 精灵图/雪碧图 图像拼合 - 简单实例 图像拼合 - 创建一个导航列表 图像拼合s - 悬停效果 精灵图/雪碧图 精灵图/雪碧图就是图像拼合 也就是单个图像的集合。 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量，并节省带宽。 图像拼合 - 简单实例 与其使用三个独立的图像，...
- 目录 图像的透明度 - 悬停效果 透明的盒子中的文字 使用CSS很容易创建透明的图像。 注意：CSS Opacity属性是W3C的CSS3建议的一部分。 img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(o... 目录 图像的透明度 - 悬停效果 透明的盒子中的文字 使用CSS很容易创建透明的图像。 注意：CSS Opacity属性是W3C的CSS3建议的一部分。 img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(o...
- 目录 CSS Overflow overflow: visible CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式。 <style> #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 1... 目录 CSS Overflow overflow: visible CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式。 <style> #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 1...
上滑加载中
推荐直播
-
基于开源鸿蒙+海思星闪开发板：嵌入式系统开发实战（Day1）2025/03/29 周六 09:00-18:00
华为开发者布道师
本次为期两天的课程将深入讲解OpenHarmony操作系统及其与星闪技术的结合应用，涵盖WS63E星闪开发板的详细介绍、“OpenHarmony+星闪”的创新实践、实验环境搭建以及编写首个“Hello World”程序等内容，旨在帮助学员全面掌握相关技术并进行实际操作
回顾中 -
基于开源鸿蒙+海思星闪开发板：嵌入式系统开发实战（Day2）2025/03/30 周日 09:00-12:00
华为开发者布道师
本次为期两天的课程将深入讲解OpenHarmony操作系统及其与星闪技术的结合应用，涵盖WS63E星闪开发板的详细介绍、“OpenHarmony+星闪”的创新实践、实验环境搭建以及编写首个“Hello World”程序等内容，旨在帮助学员全面掌握相关技术并进行实际操作
回顾中 -
从AI基础到昇腾：大模型初探、DeepSeek解析与昇腾入门2025/04/02 周三 16:00-17:30
不易 / 华为云学堂技术讲师
昇腾是华为研发的AI芯片，其具有哪些能力？我们如何基于其进行开发？本期直播将从AI以及大模型基础知识开始，介绍人工智能核心概念、昇腾AI基础软硬件平台以及昇腾专区，旨在为零基础或入门级学习者搭建从AI基础知识到昇腾技术的完整学习路径。
回顾中
热门标签