×

css

js做一个碎片化轮播图酷炫特效【含免费源码获取】（js图片轮播效果实现代码）

投降输一半 投降输一半 发表于2024-04-23 浏览12829 评论0
💥本篇为js+html+css实现的一个碎片化轮播图酷炫特效，有项目中需要或者感兴趣小伙伴文末公众号免费领取 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬 🎀下方视频展示具体演示效果        👇 👉🚔直接跳到末尾🚔👈 ——>领取源码以及专属粉丝福利💖        ☝️ 代码展示 🎈Html代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-

css

HTML+CSS实现搜索框

小调 小调 发表于2024-04-23 浏览5169 评论0
HTML+CSS实现搜索框： 需求分析： 1、输入框焦点事件 onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容。 onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容。 2、获取元素 3、注册事件 onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容 1)、显示ul 2)、自身边框改变 （通过新增search类名） onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容 1)、隐

css

【代码案例】博客页面设计（附完整源码）（web博客设计源码）

漂泊 漂泊 发表于2024-04-22 浏览5344 评论0
本篇文章主要利用前面学习的前端知识来构建出一个博客的网页页面。 博客主要分为四个页面： 博客列表页 博客正文页 博客登录页 博客编辑页 博客列表页 首先创建一个blog_list.html文件，用于编写博客列表页。 实现导航栏 导航栏中包含logo（此处使用的是我的头像）、标题、以及一些跳转链接。 为了实现左右排列，在logo和链接之间加一个spacer作为占位器。 <!DOCTYPE html> <html lang="en">

css

【Educoder】CSS答案(CSS——基础知识、CSS——基础选择器、CSS——文本与字体样式、CSS——背景样式、CSS——表格样式)

卜慧 卜慧 发表于2024-04-21 浏览6464 评论0
CSS——基础知识 初识CSS：丰富多彩的网页样式 编程要求 在右侧编辑器中，补全Begin至end中间的部分，选择index.html文件，设置其CSS样式为： 修改h1标题的text-align为居中显示，字体大小为40px； p段落的颜色为灰色:grey,字体大小为18px。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit

css

css常见居中方法总结（css居中的方法）

张小黑。 张小黑。 发表于2024-04-21 浏览13030 评论0
最近跟着网上的教程做了几个网页项目，做的过程中关于居中涉及到了好几种方法，遂想将其总结归纳下来，一是理清自己的思路，二是希望能分享给需要帮助的小伙伴们。 话不多数，直奔主题。 本次涉及到的居中方法有七种，均为平时会常用到的。 目录 1.text-align:center 用于水平对齐 2.使用line-height属性来调整文本行高来实现居中  3.vertical-align设置垂直对齐 4.background-position来设置水平/垂直方向位置 5 修改Padding

css

事件监听 & 页面滚动（页面滚动到某一位置时显示/隐藏某元素，Vue环境）

AB模板网 AB模板网 发表于2024-04-21 浏览93195 评论0
目录 一、效果展示 二、实现步骤 三、涉及要点 1. Vue 语法 v-show 2. 获取窗口到元素顶端的距离 3. 监听事件 一、效果展示         最近在做项目时有一个网页渲染是这样的，某一个元素在开始不显示，只有当页面滑动到指定的位置时才显示该元素。效果如下： 二、实现步骤 1. 创建元素并设置为固定定位。 2. 首先使用 Vue 中的显示隐藏指令 v-show 将需要操作的元素隐藏； 3. methods 中创建监听窗口滚动方法，通过判断

css

CSS设置背景颜色透明的两种方法（css设置背景颜色透明的两种方法是）

帝王组仁希 帝王组仁希 发表于2024-04-21 浏览24649 评论0
在css中设置背景颜色透明的方法有两种： 一种是通过rgba方法设置，另一种是通过backgroundh和opacity设置 下面分别是css中 两种方法实现的背景颜色透明实例    1，通过background和opacity设置背景颜色透明 background属性中属性值比较简单，所以我们简单看看opacity属性 opacity属性参数的“不透明度”是以数字表示，从0.0至1.0都可以，完全透明是0.0，完全不透明是1.0，换句话说，数字越大越不透明。参数除了可以使用＂不透明度

css

html中常见标签及其用法归纳大全（html中常见标签及其用法归纳大全）

山河? 山河? 发表于2024-04-21 浏览15288 评论0
html零基础必看——htmlHTML常见标签大全 前言 在上一章中，了解了html页面结构，以及认识了标签。那么都有哪些标签呢？各种标签的作用又是什么呢？本篇文章将带你走进常见标签系列！ 一、常见标签（一） 1、body标签 网页身体标签，所有网页内容都在里面，存放各种标签 2、div盒子标签 一般划分一个个区域，构建骨架思路会用到。用于存放：文字、图片、内容等 3、p文本段落标签 为文本段落标签，可存放大段落文字 4、h1~h

css

css3渐变色（css3渐变色边框）

百度首页排名卖蜘蛛 百度首页排名卖蜘蛛 发表于2024-04-20 浏览15488 评论0
作用：让元素在两个或多个指定的颜色之间显示平稳的过渡。 种类：分为线性渐变与径向渐变 一、线性渐变 1、向下/向上/向左/向右/对角方向 语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction属性值： to bottom 默认值，从上到下 to top 从左到右 to left 从右到左 to right 从左到右

css

20分钟学会flex布局，熊二都表示学会了，你呢？

qq_kjhqwwxp qq_kjhqwwxp 发表于2024-04-20 浏览5852 评论0
✏️ 作者：大二计算机专业学生 ♉ 星座：金牛座 🏠 主页：查看更多文章 🏂 关键：flex 前端布局 熊二都会 大家好，我是小周，今天分享的是熊二都能学会的前端 flex 布局，篇幅中等，内容充实，认真学习完本篇，你能 掌握 flex 布局，剩下的就是自己多运用了，好了，原创不易，如果觉得本博主写的不错，那就点赞，收藏，支持博主吧，我是小周，期待你的关注 ฅʕ•̫͡•ʔฅ✏️ 1. flex 布局简介 flex 是 flexible box 的缩写，意思是 弹性

css

Flex布局（flex布局一行3个）

天才 天才 发表于2024-04-20 浏览25345 评论0
布局原理    flex是flexible Box的缩写 意为:"弹性布局" 用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为flex布局      当我们为父盒子设置为flex布局以后 子元素的float clear 和vertical-align属性将会失效      伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局   采用flex布局的元素 称为Flex容器 简称"容器" 它的所有子元素会自动成为容器内成员 称为flex项目 简称"项目" 总