纯css 404
CSS Flex弹性布局详解! (常用的12个属性)
这期是我陆陆续续花了几个小时的时间为大家整理的Flex 弹性布局方法，主要讲了Flex布局的12个常见属性，以及文章最后的一个简单的小案例及其答案，希望对大家有帮助。1Flex布局是什么?Flex是Flexible Box的缩写，意为”弹性布局”，是一种用于按行或按列布局元素的一维布局方法，可以为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。flex布局默认有两条轴，水平的主轴和
日期 2023-06-12 10:48:40
CSS中calc(100%-100px)为什么不加空格会不生效？
问题起因今天再使用calc时发现无法生效，我的写法是： width: calc(100%-100px); 复制代码复制页面无效果，加空格后就发现有效果了： width: calc(100% - 100px); 复制代码复制有亿点疑惑，这是为什么？calc是什么？css3的 计算属性，用于动态计算长度值。calc语法：calc(expression)//expression是数学表达式 复制代码
日期 2023-06-12 10:48:40
过年有燃放烟花爆竹禁令那我们用css写一个烟花看看吧
先是去找了一张简易画的烟花照片，发现主要结构为歪曲的线条结构。方案一：弯曲的线条第一反应到的就是“圆角边框”： width: 200px; height: 200px; border: rosybrown 100px solid; border-radius: 100px;复制代码复制控制这个圆角大小，就可以获得不同的曲线。但是，如何隐藏多余线成了难题。方案二：使用径向渐变
日期 2023-06-12 10:48:40CSS写一个圣诞树Chrome浏览器小插件
一时兴起，突然想写一个Chrome浏览器插件，不知道写啥，就写了一个圣诞树小插件。项目源码>>Chrome浏览器插件Chrome浏览器插件最主要的是：index.html、manifest.json两个文件。下面是manifest.json的简单配置：{ "manifest_version": 2, //名称 "name": &quo
日期 2023-06-12 10:48:40HTML如何加背景图片_css设置背景图片
大家好，又见面了，我是你们的朋友全栈君。 在HTML中，我们可以使用两种不同的方法在HTML网页上显示背景图片：使用背景属性（HTML标签）使用CSS内部样式表提示：HTML 5不再支持标签的background属性，建议使用CSS在Html文档中添加背景图片。使用背景属性使用Background属性在Html文档中添加背景图片。按照以下步骤，我们可以轻松实现。步骤1：我们在文本编辑器中键入
日期 2023-06-12 10:48:40
vite入如何引入Tailwindcss
简介tailwindcss[1]是一个CSS框架。A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.安装首先需要新建一个vite项目
日期 2023-06-12 10:48:40在vue2的style标签中使用css变量
前两天有一个更换主题需求，想将系统主题包括hover颜色都更换代码如下：<template> <!-- 需要绑定style --> <div class="hello" :style="css"> <h1>{{ msg }}</h1> <p> For
日期 2023-06-12 10:48:40
css background图片
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background首先我们可以使用background: url(https://waibi.oss-cn-chengdu.aliyuncs.com/2020-06-01/head.jpg);复制来指定背景图片如果我们需要修改透明度，则可以使用其可以叠加的特性background: line
日期 2023-06-12 10:48:40教你如何用css3的clip-path画扇形、空心扇形（透明背景哦）
最近不是在参加创意游戏的活动吗，就想用css能不能组合出一些好看的效果，比如空心的圆环，或者扇形之类的，于是乎就去网上搜教程，结果找遍了谷歌和百度都没能找到想要的结果，可能这个需求确实小，也可能是我搜索的姿势不对吧，找出来的都是用障眼法实现相应的效果，根本不是我想要的，忽然想起来前阵子掘金给了一本张鑫旭大佬的css新世界，于是乎去翻了翻书里的内容，果然找到了解决的办法，那就是用强大的clip-pa
日期 2023-06-12 10:48:40HTML+CSS实现炫酷的登录界面「建议收藏」
大家好，又见面了，我是你们的朋友全栈君。 你好，我是罡罡同学！ 代码谱第一页忘掉心上人，最后一页。。。。。。HTML+CSS实现炫酷的登录界面上效果图！ 鼠标点击用户名或密码，字体会向上滑动，调节大小并高亮。 鼠标放到登录按钮上，按钮可以高亮！ 下面是HTML的代码：<!DOCTYPE html> <html lang="zh-CN">
日期 2023-06-12 10:48:40
CSS in JS的好与坏
是什么CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些 .css， .scss或者 less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。值得一提的是，虽然CSS-in
日期 2023-06-12 10:48:40HTML CSS 鼠标样式效果[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。HTML/CSS/JS 目录：https://blog.csdn.net/dkbnull/article/details/87934939<div style="cursor:hand">鼠标手型效果</div> <div style="cursor:pointer">鼠标手型效果&
日期 2023-06-12 10:48:40html精灵图跟img标签,css精灵图怎么使用？
大家好，又见面了，我是你们的朋友全栈君。什么是css精灵图(sprite)？css精灵图怎么使用？下面本篇文章就来给大家介绍一下css精灵图的使用。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。在了解精灵图怎么使用前，我们要先知道什么是精灵图。只有先知道什么是精灵图，了解精灵图的原理了，我们才可是说使用精灵图。什么是css精灵图(sprite)？css精灵图(sprite)直译为
日期 2023-06-12 10:48:40HTML和CSS面试题及答案总结一
大家好，又见面了，我是你们的朋友全栈君。 对于html的语义化标签的理解，结构化标签的理解，同时写出简洁的html结构，如何进行SEO优化？ 答： 对于html的语义化标签，用正确的标签做正确的事情。html语义化，让页面的内容结构化，便于对浏览器和搜索引擎的解析，在没有css样式的情况下，以文档的形式同样易于阅读，符合文档语义的标签。标签本身所代表的语义，每一个标签所带有的语义，根据语义
日期 2023-06-12 10:48:40在线html代码生成器,支持网页快速排版 CSS代码一键生成的在线设计工具
大家好，又见面了，我是你们的朋友全栈君。用户体验现在作为很多工作的重中之重，设计师们更要把用户体验放在第一位，如果你曾经尝试过想把你的板面调整到最适合阅读的状态，就会知道多么令人抓狂。但是懒人总是会创造出新科技，国外开发者为我们带来了今天要讲的协助设计网页排版及字型等相关属性的便利工具。type anything 前段时间登上国外媒体网站后深获好评，这是一项非常方便的在线工具，功能设计很简单，主要
日期 2023-06-12 10:48:40产品双月刊 | 腾讯云直播CSS
近期，腾讯云云直播CSS有哪些 重大发布？它又带给我们了哪些 惊喜 ？请跟随我们的脚步一起来回顾！「 云直播CSS 」功能1：DRM加密适用对象：所有直播客户主要优势：云直播提供基于 Widevine、Fairplay、NormalAES 的 DRM 加密协议的视频直播加密、防录制、防盗链等服务，全方位保障用户视频 内容安全。功能2：协议禁用适用对象：部分客户支持主要优势：针对重要直播活动，客户需
日期 2023-06-12 10:48:40【CSS3】---- 纯 css 控制 html5旋转音乐图标，控制背景音乐
1. 效果展示2. 效果分析开始音乐图标就360度自动无限旋转；点击图标停止旋转，再次点击继续无限旋转。3. 实现思路1. 实现360°旋转 animation-timing-function 属性：linear 匀速旋转 @keyframes audio-rotate-360 { 0%{ transform:rotate(0deg); } 100%{ transfo
日期 2023-06-12 10:48:40JavaScript CSS Style属性对照表「建议收藏」
大家好，又见面了，我是你们的朋友全栈君。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性。比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样： <script type=”text/javascript”> function imageOver(e) { e.style.border=”1px solid red”; } functi
日期 2023-06-12 10:48:40fixed失效，css堆叠上下文问题
css堆叠上下文不知道在你的业务中有没有遇到过，前段时间搭建vuepress1.0就遇到这样的一个类似的问题，主要是用了vuepress-reco这个主题,去官方提了一个issue[1],自己提的issue最后自己找到原因了，但是还是有小伙伴遇到同样的类似问题,今天一起探讨一下css堆叠上下文的问题正文开始...fixed失效了我们直接用具体案例来体会css堆叠上下文，因为官方veurpess-r
日期 2023-06-12 10:48:40滚动效果——marquee的html样式和CSS属性
本文最后更新于2022年06月09日，已超过3天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！ html样式和CSS属性<marquee>是滚动标签<marquee>的属性<marquee>这是滚动效果——欢迎来到田小檬的博客</marquee>复制说明：scrolldelay，滚动延时，用于设定两次滚动操作之间的间隔时间，
日期 2023-06-12 10:48:40CSS 选择器参考手册
本文最后更新于2022年04月03日，已超过71天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！ CSS3 选择器在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）选择器例子例子描述CSS.class.intro选择 class="in
日期 2023-06-12 10:48:40css3 媒体类型(Media Type)[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。 <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="st
日期 2023-06-12 10:48:40html导航栏自动调间距,HTML CSS导航栏间距[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。我做了一个CSS导航栏，但是在每个“navbar-item”之间，都有一点空间。我不希望那里有任何变化！有没有办法做到这一点，而不改变每个navbar-item的余裕？HTML CSS导航栏间距Home – UnhandyFir9 #wrapper { box-shadow: 0px 0px 20px 10px black;left: 0px;top: 0
日期 2023-06-12 10:48:40前端基础：100道CSS面试题总结
大家好，又见面了，我是你们的朋友全栈君。 前言 CSS 是层叠样式表（Cascading Style Sheets）的简称。CSS 主要作用是美化网页、布局页面。CSS 规则主要由两个主要部分构成：选择器及一条或多条声明。在前端基础面试中，CSS 是不会缺席的，下面就给大家分享下 CSS 的常见面试题。 CSS面试题：介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
日期 2023-06-12 10:48:40纯HTML CSS制作导航栏 下拉菜单
大家好，又见面了，我是你们的朋友全栈君。大一web网页设计，尝试更多炫酷页面内容，狠狠加分！！！！话不多说，直接上代码这是HTML部分:<body> <div> <ul class="nav"> <li style="border-radius: 20px 0px 0px 0px
日期 2023-06-12 10:48:40html+css网页开发 之 头部导航条（logo、导航栏、搜索框）
大家好，又见面了，我是你们的朋友全栈君。页面布局整体思路：确定页面的版心（可视区），测量可知。分析页面中的行模块，以及每个行模块中的列模块。一行中列模块常用浮动布局，先确定每个列的大小，之后确定列的位置。制作HTML结构。遵循先有结构，后有样式的原则。 效果图如下：1号是版心盒子header 1200*42的盒子水平居中对齐版心盒子内包含2号盒子logo 版心盒子内包含3号盒子nav文字导航栏版心
日期 2023-06-12 10:48:40使用html和css制作水平导航栏nav
大家好，又见面了，我是你们的朋友全栈君。 使用html和css制作水平导航栏nav的方法及其效果： 1、li设置float:left; （1）代码片段：... <style> *{ margin:0; padding:0; } ul{ list-sty
日期 2023-06-12 10:48:40HTML+CSS 简单的顶部导航栏菜单制作
大家好，又见面了，我是你们的朋友全栈君。 导航栏的制作：技术要求：CSSHTML各类标签实现目的：制作导航栏菜单代码分析：基本样式清除无序列原点删除下划线删除文字默认居中a标签设置块级元素伪类选择器对a状态修饰分步实现：分三栏布局：使用浮动 logo一栏；选择栏一栏；搜索栏一栏logo部分： img标签，导入图片，a标签超链接 ，img导入图片，防止图片失真width和height设置一个就可
日期 2023-06-12 10:48:40html鼠标点击后变换样式,css鼠标样式（css鼠标点击切换样式）
大家好，又见面了，我是你们的朋友全栈君。css鼠标样式新浪博客代码个性化CSS鼠标样式网址完整问题：新浪博客代码个性化CSS鼠标样式网址好评回答：进入控制面版→维护首页内容→自定义空白面版→输入方框内代码，有的人给出的代码还要打字,我的不需要,其实在代码里加入一个就可以了,因为这个东西是HTML代码里的空格,相当于有内容了.—- a:hover {cursor:url(‘http://放在连接上的
日期 2023-06-12 10:48:40CSS——06扩展：高级
大家好，又见面了，我是你们的朋友全栈君。 人生苦短，要学就只学有用的 【前端教学-CSS-高阶技巧】 CSS样式初始 CSS高级技巧目标理解 能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法应用 能写出最常见的鼠标样式能使用精灵图技术，这个技术比较重要能用滑动门做导航栏案例，这个技术比较重要1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来
日期 2023-06-12 10:48:4050道 CSS 经典面试题（包含答案）
大家好，又见面了，我是你们的朋友全栈君。1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-
日期 2023-06-12 10:48:40