html
关注
分享
扫一扫
文章平均质量分 70
html学习
可可鸭~
青春没有返程，感谢您的关注与来访！
展开
-
深入理解 CSS z-index：为什么更低的 z-index 有时会覆盖更高的元素？
虽然 .sibling 的 z-index 值是 2，比 .child1 和 .child2 的 z-index 值小，但它不属于 .parent 的堆叠上下文，而是在文档流的上层堆叠上下文中，所以它会叠加在整个 .parent 元素（及其内部子元素）之上。.child1 显示在 .child2 之上，因为在 .parent 的堆叠上下文中，.child1 的 z-index: 10 高于 .child2 的 z-index: 5。如果某个元素创建了一个新的堆叠上下文，它的子元素的 z-index。原创 2024-10-17 16:32:15 · 986 阅读 · 0 评论 -
HTML+CSS+Query实现二级菜单
在网页设计中，导航菜单是非常重要的部分之一，尤其是具有二级下拉菜单的导航栏，可以提升用户体验。本文将通过HTML、CSS和jQuery实现一个具有二级菜单标题的导航栏，并详细讲解每一步的实现过程。在网页设计中，导航菜单是非常重要的部分之一，尤其是具有二级下拉菜单的导航栏，可以提升用户体验。本文将通过HTML、CSS和jQuery实现一个具有二级菜单标题的导航栏，并详细讲解每一步的实现过程。我们需要确保二级菜单在正常情况下是隐藏的，只有当用户将鼠标悬停在相应的一级菜单项上时才显示。/* 二级菜单样式 */原创 2024-09-03 14:06:51 · 1749 阅读 · 0 评论 -
HTML+CSS+Query+Sick.js实现视频会循环播放并无缝切换到下一个视频，形成一个自动播放的轮播
slick 初始化时设置了 autoplay, autoplaySpeed, 和 speed，其中 autoplaySpeed 和 speed 确保视频以无缝的方式切换。.video-container 使用 padding-bottom: 56.25% 来确保视频的宽高比为 16:9。.video-carousel 是轮播的容器，每个视频被包裹在 .video-container 中。这样，视频会循环播放并无缝切换到下一个视频，形成一个自动播放的轮播。beforeChange 事件暂停当前播放的视频。原创 2024-09-03 10:16:41 · 1094 阅读 · 0 评论 -
HTML+CSS浮动和清除浮动的效果及其应用场景举例
清除浮动的方法在网页布局中具有广泛的应用场景，主要用于解决由于使用浮动属性引发的布局问题。父容器高度计算问题场景：当使用浮动元素时，父容器的高度可能无法自动调整以包含浮动的子元素。这会导致父容器的高度不正确，从而影响布局，尤其是在包含浮动元素的父容器之后的元素可能会出现重叠或布局错位的问题。解决方法：使用清除浮动的方法来确保父容器的高度正确计算。常见方法包括：伪元素（.clearfix）clear 属性overflow 属性2. 复杂的网格布局。原创 2024-08-22 17:01:19 · 1040 阅读 · 0 评论 -
HTML+CSS+Query实现二级菜单加注解
/ 鼠标悬停在登录下拉菜单项时添加激活类名，并移除兄弟节点的激活类名。// 点击登录区域时切换下拉菜单显示状态，并切换激活类名。// 判断窗口宽度小于或等于 1199px 时的行为。// 鼠标进入登录区域时显示下拉菜单并添加激活类名。// 鼠标离开登录区域时隐藏下拉菜单并移除激活类名。// 鼠标离开时移除激活类名，确保原激活项保留类名。// 点击页面其他区域时隐藏下拉菜单并移除激活类名。// 判断窗口宽度大于 1199px 时的行为。原创 2024-08-22 13:50:31 · 453 阅读 · 0 评论 -
干货-css初始化样式、搜索框样式、 水波纹动画、二级菜单、3D按钮、媒体查询、风琴菜单自适应高度
思路：一开始考虑到不占位置想用display控制显示隐藏，但是不能使用过渡效果。visibility，能使用过渡但是缺占位置，于是采用控制元素height来进行过渡效果展示，咦，发现如果想要自使用把height改成auto发现过渡也是不起作用的。由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显示效果不一样。原创 2022-11-01 10:13:34 · 325 阅读 · 0 评论 -
开发常用网站(不定更新)
1.2.3.4.5.6.常用js脚本库7.8.9.10.11.12.13.14.原创 2022-09-07 16:34:57 · 195 阅读 · 0 评论 -
光速掌握-CSS预处理器SASS从入门到高级
Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin设计并由 Natalie Weizenbaum 开发的层叠样式表语言， Sass 是一个 CSS 预处理器。Sass 是 CSS扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 完全兼容所有版本的 CSS。为什么使用 Sass?CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。......原创 2022-08-11 18:22:29 · 820 阅读 · 0 评论 -
Html之子元素居中显示的三种方式
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl原创 2022-04-08 16:33:28 · 811 阅读 · 0 评论 -
css文字溢出隐藏为三个点
css文字溢出隐藏为三个点…(1)单行white-space: nowrap;//不换行text-overflow: ellipsis;//将文本溢出显示为（…）overflow: hidden;//溢出隐藏。(2)多行overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;...原创 2022-01-02 17:25:55 · 1164 阅读 · 0 评论 -
Html-去除input输入框中默认样式
Html-去除input输入框中默认样式border: none;outline: none;text-decoration: none;原创 2021-11-19 22:57:37 · 812 阅读 · 0 评论 -
Html-去除a标签中默认样式
Html-去除a标签中默认样式text-decoration: none;//去除下划线a:hover{ text-decoration: none;}//鼠标移动时添加下划线原创 2021-11-19 22:54:18 · 1596 阅读 · 0 评论 -
Html-去除button中默认样式
Html-去除button中默认样式 border: 0; background-color: transparent; outline: none;原创 2021-11-19 22:50:15 · 422 阅读 · 0 评论 -
Html-理解前端开发中单位(em单位和rem单位)和网络地址
Html-理解前端开发单位和网络地址一、常用的基本单位emem 是CSS2引入的相对单位，作为字体大小使用时和百分比单位类似，都是相对于最近的父元素设置字体大小，为标签元素设置字体大小为100%和设置字体大小为1em是一样的效果，默认情况下浏览器的字体大小为16px，这样只要浏览器默认的字体大小不变，1em = 16px<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"原创 2021-11-18 10:56:09 · 788 阅读 · 0 评论 -
Html-小米官网头部
Html-小米官网头部一、Html-小米官网头部练习如下图效果一效果二<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <!--设置浏览器的分辨率窗口为设计稿的分辨率 --> <meta name="viewport" content="width=375, user-scalable=no" /> <原创 2021-11-17 18:02:53 · 474 阅读 · 0 评论 -
Html-标准盒子模型和怪异盒子模型
Html-盒子模型一、概念篇标准盒子模型css盒子模型 又称框模型 (Box Model)，是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子，所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，而且，每个框影响着其他元素框的位置和大小。盒子模型包含了 元素内容（content）、内边距（padding）、边框（border）、外边距（margin） 几个要素。标准盒子模型：标准 W3C 盒子模型的范围包括 margin、bo原创 2021-11-16 19:46:40 · 1656 阅读 · 0 评论 -
Html-移动端与响应式
Html-移动端与响应式一、 viewport视窗的设置此声明只适用于移动端 可以固定移动端的宽长viewport视窗的设置content=" width=device-width,浏览器的宽度分辨率等于系统的分辨率initial-scale=1.0初始比例是1minimum-scale=1最小的缩放比例maximum-scale=1最大的放大比user-scalable="no"用户不允许缩放 <meta name="viewport" content=原创 2021-11-15 20:56:54 · 518 阅读 · 0 评论 -
html -图片禁止拖动
html -图片禁止拖动draggable="false"原创 2021-11-15 19:46:56 · 225 阅读 · 0 评论 -
HTML+CSS-基础篇
HTML+CSS基础篇（干货）一.基本架构<!doctype html><html><head><meta charset="utf-8"><!--制定编码格式utf-8--><title>无标题文档</title><!--文档名--></head><style><!--这里可以放页面引用的css样式部分--></style><body>原创 2021-11-15 15:15:40 · 691 阅读 · 0 评论 -
Html-字体图标、弹性布局的使用
Html-字体图标、弹性布局的使用一、字体图标字体图标:优点:占用带宽小，不会失真，可以随意调节字体大小和颜色。图片:比较占用带宽，放大有可能会产生失真的效果，图片改变颜色不方便。阿里巴巴矢量图官网选择要下载的图标添加到购物车查看购物车清单点击下载代码双击demo_index.html文件查看使用说明三种引用方式方法一：Unicode引用Unicode引用Unicode是字体在网页端最原始的应用方式，特点是:兼容性最好，支持IE6+，及所有现代浏览器。支持按字体的方式去原创 2021-11-13 16:52:21 · 568 阅读 · 0 评论 -
Html基础-定位、动画详解与举例
Html基础-定位、动画详解与举例一、定位1.固定定位2.相对定位3.绝对定位4.静态定位(默认情况下，不做定位)5.粘性定位(新出的模式，兼容性不强，还是保留原来的位置)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2021-11-12 18:59:11 · 359 阅读 · 0 评论 -
Html——选项框、立方体与选项框
Html——选项框、立方体与选项框一、html选项框1.单选框name值相同为一个选项，只会有一个内容被选中类型为radio2.复选框同一个选项name值要相同，但是可以有多个内容被选上checkbox<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width原创 2021-11-11 20:52:46 · 4942 阅读 · 0 评论 -
Html-照片的逐步出现 、心形动画制作、3d立方体魔方、鼠标划过box阴影练习
Html-照片的逐步出现 、心形动画制作、3d立方体魔方、鼠标划过box阴影练习一、照片的逐步出现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com原创 2021-11-11 16:51:03 · 397 阅读 · 0 评论 -
HTML-浮动与清除浮动、文字属性、动画效果
HTML-浮动与清除浮动、文字属性、动画效果一、浮动与清除浮动1.浮动可以解决文字保卫图片的问题2.浮动可以解决莫名其妙的间隔问题3.浮动可以向左，向右进行排版对齐浮动: 可以设置元素，脱离正常的文档流，向左或者向右，靠近父元素的边缘，或者设置了浮动的其他元素的边缘靠拢。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi原创 2021-11-10 17:07:43 · 1006 阅读 · 0 评论 -
Html-滤镜的使用，css初识
HTML零基础入门笔记day_1一、滤镜<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=ed原创 2021-11-09 21:57:15 · 579 阅读 · 0 评论