- 前言作为一个在海边的”小渔民“，除了海鲜，见的最多的就是蓝天白云了。不得不说，从海边看的蓝天白云，感觉就是更晴朗。这几年呆的城市雾霾虽说不严重，但是蓝天白云也没那么鲜亮啊。怀念啊！！！虽说写了好几年的代码，还没有画过云彩。 蓝色的背景body { margin: 0; padding:0; width: 100%; display: block; min-height: 100v... 前言作为一个在海边的”小渔民“，除了海鲜，见的最多的就是蓝天白云了。不得不说，从海边看的蓝天白云，感觉就是更晴朗。这几年呆的城市雾霾虽说不严重，但是蓝天白云也没那么鲜亮啊。怀念啊！！！虽说写了好几年的代码，还没有画过云彩。 蓝色的背景body { margin: 0; padding:0; width: 100%; display: block; min-height: 100v...
- 开发主页因为静态HTML不包含动态信息，所以我们使用JSP开发页面。JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。 1、创建页面框架创建homepage.jsp、footer.jsp、top.jsp和left.jsp，然后在homepage.jsp里面引用这个left.jsp、foote... 开发主页因为静态HTML不包含动态信息，所以我们使用JSP开发页面。JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。 1、创建页面框架创建homepage.jsp、footer.jsp、top.jsp和left.jsp，然后在homepage.jsp里面引用这个left.jsp、foote...
- 我们会在一些图片壁纸类网站上看到这样的图片库。许多类型的图像整齐地排列在一起。这种类型的设计最常用于个人网站或图片下载网站。如果你想知道什么是响应式猫猫图片库，让我来告诉你。响应式是网页设计中一个非常流行的词。作为响应式设计，任何屏幕尺寸的用户都可以使用。这意味着在任何设备的情况下，此设计都可以根据该设备的屏幕大小进行自我调整。下面我提供了一个现场演示，可以帮助大家了解此图片库的工作原理。h... 我们会在一些图片壁纸类网站上看到这样的图片库。许多类型的图像整齐地排列在一起。这种类型的设计最常用于个人网站或图片下载网站。如果你想知道什么是响应式猫猫图片库，让我来告诉你。响应式是网页设计中一个非常流行的词。作为响应式设计，任何屏幕尺寸的用户都可以使用。这意味着在任何设备的情况下，此设计都可以根据该设备的屏幕大小进行自我调整。下面我提供了一个现场演示，可以帮助大家了解此图片库的工作原理。h...
- 一、Flex布局详解 1.Flex布局的概念 1.1 传统布局盒子模型：我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素... 一、Flex布局详解 1.Flex布局的概念 1.1 传统布局盒子模型：我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素...
- 一、CSS 第四章 （1）浮动（float) 1.1 传统网页布局的三种方式网页布局的本质：用 CSS 来摆放盒子。 把盒子摆放到相应位置。CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流）、浮动 、定位；温馨提醒：实际开发中，一个页面基本都包含了这三种布局方式（后面在移动端的学习中，也会学习到新的布局方式哦）。 1.2 标准流（普通流/文档流）所谓的标准... 一、CSS 第四章 （1）浮动（float) 1.1 传统网页布局的三种方式网页布局的本质：用 CSS 来摆放盒子。 把盒子摆放到相应位置。CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流）、浮动 、定位；温馨提醒：实际开发中，一个页面基本都包含了这三种布局方式（后面在移动端的学习中，也会学习到新的布局方式哦）。 1.2 标准流（普通流/文档流）所谓的标准...
- 一、CSS 第三章 （1）CSS 的三大特性CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。 1.1 层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题；层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式； 1.2 继承性CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。温馨提醒：... 一、CSS 第三章 （1）CSS 的三大特性CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。 1.1 层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题；层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式； 1.2 继承性CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。温馨提醒：...
- 一、CSS 第二章 （1）Emmet语法Emmet语法的前身是Zen coding，它使用缩写，来提高HTML/CSS的编写速度，Vscode内部已经集成该语法。 1.1 快速生成HTML结构语法生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div>；如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个di... 一、CSS 第二章 （1）Emmet语法Emmet语法的前身是Zen coding，它使用缩写，来提高HTML/CSS的编写速度，Vscode内部已经集成该语法。 1.1 快速生成HTML结构语法生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div>；如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个di...
- 兼容性作为:focus的好兄弟，在兼容性上也还是不错的。主流的浏览器基本都已经支持这个属性。 :focus-within 和 :focus 的区:focus-within 表示一个元素自身获取焦点，以及子元素获取焦点后的效果。:focus 表示元素自身获取到焦点后的效果。 示例定义一个form表单，背景颜色是green。form{ padding: 50px; ... 兼容性作为:focus的好兄弟，在兼容性上也还是不错的。主流的浏览器基本都已经支持这个属性。 :focus-within 和 :focus 的区:focus-within 表示一个元素自身获取焦点，以及子元素获取焦点后的效果。:focus 表示元素自身获取到焦点后的效果。 示例定义一个form表单，背景颜色是green。form{ padding: 50px; ...
- 直接跳到末尾 获取完整源码在本文中，我将带着大家展示如何使用 HTML 和 CSS 代码创建 玻璃态登录表单。你可以将任何简单的设计转换为玻璃态设计。为此，只需要更改一点代码。首先使用 background-color semi-transparent 比如 rgba (255,255,255,0.13)。其次，我们需要使用backdrop-filter: blur (10px)来模糊背景... 直接跳到末尾 获取完整源码在本文中，我将带着大家展示如何使用 HTML 和 CSS 代码创建 玻璃态登录表单。你可以将任何简单的设计转换为玻璃态设计。为此，只需要更改一点代码。首先使用 background-color semi-transparent 比如 rgba (255,255,255,0.13)。其次，我们需要使用backdrop-filter: blur (10px)来模糊背景...
- 直接跳到末尾 获取完整源码JavaScript 倒数计时器 用于各种电子商务和建设中的网站，以使用户保持最新状态。我们可以在不同类型的电子商务网站上看到，在一些产品或优惠到达之前的某个时间开始倒计时。在本文中，我使用了简单的 JavaScript 代码创建了一个倒数计时器和大家分享。@[TOC](❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️) 🍰 在线演示演示地址：htt... 直接跳到末尾 获取完整源码JavaScript 倒数计时器 用于各种电子商务和建设中的网站，以使用户保持最新状态。我们可以在不同类型的电子商务网站上看到，在一些产品或优惠到达之前的某个时间开始倒计时。在本文中，我使用了简单的 JavaScript 代码创建了一个倒数计时器和大家分享。@[TOC](❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️) 🍰 在线演示演示地址：htt...
- 直接跳到末尾 获取完整源码JavaScript 倒数计时器 用于各种电子商务和建设中的网站，以使用户保持最新状态。我们可以在不同类型的电子商务网站上看到，在一些产品或优惠到达之前的某个时间开始倒计时。在本文中，我使用了简单的 JavaScript 代码创建了一个倒数计时器和大家分享。@[TOC](❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️) 🍰 在线演示演示地址：htt... 直接跳到末尾 获取完整源码JavaScript 倒数计时器 用于各种电子商务和建设中的网站，以使用户保持最新状态。我们可以在不同类型的电子商务网站上看到，在一些产品或优惠到达之前的某个时间开始倒计时。在本文中，我使用了简单的 JavaScript 代码创建了一个倒数计时器和大家分享。@[TOC](❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️) 🍰 在线演示演示地址：htt...
- 直接跳到末尾 获取完整源码响应式可过滤的游戏+工具展示页面 用于各种网站以按类别对图像进行排序。在本文中，我将向您展示如何借助 HTML CSS 和 javascript 创建响应式可过滤的游戏+工具展示页面。可过滤作品集是一种流行的网络元素，可用于各种网站。它是一种作品画廊，大量作品整齐地排列在一起。值得注意的一点是，所有作品都可以在这里按类别排序。有一个导航栏，其中对所有类别进行了排序... 直接跳到末尾 获取完整源码响应式可过滤的游戏+工具展示页面 用于各种网站以按类别对图像进行排序。在本文中，我将向您展示如何借助 HTML CSS 和 javascript 创建响应式可过滤的游戏+工具展示页面。可过滤作品集是一种流行的网络元素，可用于各种网站。它是一种作品画廊，大量作品整齐地排列在一起。值得注意的一点是，所有作品都可以在这里按类别排序。有一个导航栏，其中对所有类别进行了排序...
- 今天我将使用 Weather 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序直接跳到末尾 获取完整源码@[TOC](⛅ Weather.io ☔)很高兴又见面了！😊今天我将制作一个很棒的🌦天气应用程序🌧，我们可以在其中搜索任何城市🗺、地区🌎或国家/地区，并使用Weather API 获取其当前天气。此外，为了给它添加一些修饰，我还使用了 Uns... 今天我将使用 Weather 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序直接跳到末尾 获取完整源码@[TOC](⛅ Weather.io ☔)很高兴又见面了！😊今天我将制作一个很棒的🌦天气应用程序🌧，我们可以在其中搜索任何城市🗺、地区🌎或国家/地区，并使用Weather API 获取其当前天气。此外，为了给它添加一些修饰，我还使用了 Uns...
- 学前端最基本的登录页面肯定要会写，那登录页面里面的密码框的功能设计就需要好好打磨，主要功能有显示密码明文，密码检测信息提示等等，那么本篇博客将写写这些功能结合js怎么做，很简单，看一下就会了。 学前端最基本的登录页面肯定要会写，那登录页面里面的密码框的功能设计就需要好好打磨，主要功能有显示密码明文，密码检测信息提示等等，那么本篇博客将写写这些功能结合js怎么做，很简单，看一下就会了。
- 今天总结盒子模型剩下的一点内容 今天总结盒子模型剩下的一点内容
上滑加载中
推荐直播
-
华为云码道Agent集成与鸿蒙实战2026/08/11 周二 19:00-21:00
王一男-华为云码道产品规划专家；李炎-华为云码道产品专家；彭江敏-华为云鸿蒙端云一体化开发专家
本次直播带你解读华为云码道7月份产品新特性、新功能。更有专家演示码道Agent Space × 钉钉机器集成实战，从0到1打通消息通道；码道鸿蒙端云一体化实战，快速搭建员工签到系统。
回顾中 -
华为云开发者AI素养直播课·第五期2026/09/04 周五 16:00-18:00
林华鼎-华为云AI开发者运营负责人；蒋春阳-华为云AI开发者案例开发专家
本期直播内容： AI工具体验营 · 第5-8课连讲。Agent-Team 多智能体协作完成毕业设计实践
回顾中 -
华为云开发者AI素养ClassRoom·第六期2026/09/08 周二 19:00-20:00
樊渊-2026华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签