- 一、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怎么做,很简单,看一下就会了。
- 今天总结盒子模型剩下的一点内容 今天总结盒子模型剩下的一点内容
- 盒子模型是我们网页布局中很重要的一块内容,今天阿牛就来总结一部分内容,各位小伙伴认真看哦,干货满满!!! 盒子模型是我们网页布局中很重要的一块内容,今天阿牛就来总结一部分内容,各位小伙伴认真看哦,干货满满!!!
- 📋 个人简介💖 作者简介:大家好,我是阿牛😜💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥 🌲前言今天继续总结css网页布局中的浮动知识哦!特别详细!拿起小本本记好了哦! 🌲传统网页布局的三种方式网页布局的本质﹣用 CSS 来放盒子。把盒子放到相应位置 。CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):普通流(标准流)浮动定位 🌴普通流(标准... 📋 个人简介💖 作者简介:大家好,我是阿牛😜💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥 🌲前言今天继续总结css网页布局中的浮动知识哦!特别详细!拿起小本本记好了哦! 🌲传统网页布局的三种方式网页布局的本质﹣用 CSS 来放盒子。把盒子放到相应位置 。CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):普通流(标准流)浮动定位 🌴普通流(标准...
- 一、前言在《Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解》一文中,讲解了CSS常用的几种定位方式。此博文主要讲解如何应用绝对定位实现完美布局,及应用注意事项。在布局过程中我们经常用到绝对定位,很多初学者在一开始用绝对定位经常会达不到预期的效果,因为它们往往会忽略使用绝对定位的两个条件。什么?使用绝对定位还要条件?当然要啦!代码又没有脑子,没法自己思考... 一、前言在《Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解》一文中,讲解了CSS常用的几种定位方式。此博文主要讲解如何应用绝对定位实现完美布局,及应用注意事项。在布局过程中我们经常用到绝对定位,很多初学者在一开始用绝对定位经常会达不到预期的效果,因为它们往往会忽略使用绝对定位的两个条件。什么?使用绝对定位还要条件?当然要啦!代码又没有脑子,没法自己思考...
- CSS 变换是CSS最通用和最神奇的属性之一。它不仅是在您的网站上实现流畅动画的最佳方式,而且您还可以使用CSS 3D 转换创造奇迹。像这个🙀——我提前为数个 GIF 占用您的互联网带宽而道歉,但我希望这是值得的!🤜🤛但是等等,立方体的两个边都不见了!!!我故意这样做是为了更容易理解和形象化。我会在文末添加获取上述结果的完整代码链接! 第一件事 - translate是如何工作的?tr... CSS 变换是CSS最通用和最神奇的属性之一。它不仅是在您的网站上实现流畅动画的最佳方式,而且您还可以使用CSS 3D 转换创造奇迹。像这个🙀——我提前为数个 GIF 占用您的互联网带宽而道歉,但我希望这是值得的!🤜🤛但是等等,立方体的两个边都不见了!!!我故意这样做是为了更容易理解和形象化。我会在文末添加获取上述结果的完整代码链接! 第一件事 - translate是如何工作的?tr...
上滑加载中
推荐直播
-
华为云IoT开源专家实践分享:开源让物联网平台更开放、易用
2024/05/22 周三 16:30-18:00
张俭 华为云IoT DTSE技术布道师
开源,意味着开放、共享、互助、共赢。作为万物上云及各行业数字化的物联网底座,华为云IoT积极拥抱开源,借助行业开源的最佳实践,构建可靠、易用的物联网平台,并通过开放南北向SDK,助力开发者快速构建物联网应用。本期直播,华为云IoT开源专家、物联网平台资深“程序猿”张俭,带你了解华为云IoT的开源生态,并手把手教你玩转开源社区!
去报名 -
华为云开发者日·广州站
2024/05/23 周四 14:30-17:30
华为云专家团
华为云开发者日HDC.Cloud Day是面向全球开发者的旗舰活动,汇聚来自千行百业、高校及科研院所的开发人员。致力于打造开发者专属的技术盛宴,全方位服务与赋能开发者围绕华为云生态“知、学、用、创、商”的成长路径。通过前沿的技术分享、场景化的动手体验、优秀的应用创新推介,为开发者提供沉浸式学习与交流平台。开放创新,与开发者共创、共享、共赢未来。
去报名
热门标签