03-CSS
不同样式tooltip对话框小三角的css实现
开发过程中已经遇到过好多次需要手动实现 tooltip 样式了，这里就总结下，以便未来更好的复制粘贴。 如上图，常见的 tooltip 总共有 3 种类型，纯背景色无边框、有边框、包含背景图，其中的小三角可能是纯色、尖尖有弧度。下边介绍四种常用的方法来实现 tooltip。贴图简单方便快捷，一个三角形的图定下位即可。在女朋友的帮助下，用 AI 成功画了三种三角形。下边我们只需要把三角形贴到矩形下边
日期 2023-06-12 10:48:40
CSS3变形、渐变、动画的基本使用
CSS3 变形2D转换CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。 转换的效果是让某个元素改变形状，大小和位置。 您可以使用 2D 或 3D 转换来转换您的元素。 2D变换方法： + translate() + rotate() + scale() + skew() 具体的详情描述可以看：菜鸟教程 简单使用代码<!DOCTYPE html> <ht
日期 2023-06-12 10:48:40
完美解决CSS移动端半像素边框
前言最近在做公司的页面重构工作，因为这次重构有一些非常执着的设计同学，对于半像素极度喜爱，所以我们前端开发痛不欲生。经过一番挣扎，最后总结了一下半像素做边框的一些问题，和一个暂时我觉得比较完美的方式去解决的方案。背景主要设计稿中，需要我们实现一个这样的图标。可以留意到这里的边线在750px设计稿下，是1个像素，所以按照很多文章的和教程说的，半像素边框的处理方式，一般使用after，然后高宽设置成2
日期 2023-06-12 10:48:40
手把手带你使用webpack4构建一个Vue开发编译环境，并实现代码分割，css代码分离
前言本篇文章不会细致讲webpack生产编译方面的优化操作，主要点是为了区分开发与生产环境的区别，代码分割分离的操作，所以不建议各位使用本篇文章内配置内容去进行生产编译，生产编译其它优化细节请各位自行另加配置，当然本篇文章配置也不是不能用作生产配置，只是给各位一个建议~正文 所需环境开始之前，请各位给自己电脑安装一下Nodejs，具体安装方法这里我就不做讲解了，各位可以移步Node官网查看文档然后
日期 2023-06-12 10:48:40多说360度旋转css代码
多说360度旋转css代码 作者：matrix 被围观: 2,079 次 发布时间：2014-02-06 分类：Wordpress | 16 条评论 » 这是一个创建于 3129 天前的主题，其中的信息可能已经有所发展或是发生改变。 多次看到多说评论的头像样式，鼠标悬停的时候360度旋转~css：#ds-avatar{ width:54px;height:54px; /*设置图
日期 2023-06-12 10:48:40CSS Flex弹性布局详解! (常用的12个属性)
这期是我陆陆续续花了几个小时的时间为大家整理的Flex 弹性布局方法，主要讲了Flex布局的12个常见属性，以及文章最后的一个简单的小案例及其答案，希望对大家有帮助。1Flex布局是什么?Flex是Flexible Box的缩写，意为”弹性布局”，是一种用于按行或按列布局元素的一维布局方法，可以为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。flex布局默认有两条轴，水平的主轴和
日期 2023-06-12 10:48:4011·灵魂前端工程师养成-CSS最强大的布局Grid
Grid介绍利用grid模仿淘宝生活家布局Grid小游戏-曾老湿, 江湖人称曾老大。 -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3
日期 2023-06-12 10:48:4009·灵魂前端工程师养成-CSS入门
CSS的历史体系化学习文档流两种盒模型利用css制作一个彩虹-曾老湿, 江湖人称曾老大。 -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。
日期 2023-06-12 10:48:4012·灵魂前端工程师养成-CSS定位
CSS定位介绍层叠上下文 z-index-曾老湿, 江湖人称曾老大。 -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstac
日期 2023-06-12 10:48:40CSS技术
CSS相关查阅文档：点击此处下载文档 CSS 技术介绍CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 语法规则 选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。 属性 (property): 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式
日期 2023-06-12 10:48:40
静态HTML和CSS网站生成器 - Hugo
Hugo是用Go编写的静态HTML和CSS网站生成器。它针对速度、易用性和可配置性进行了优化。Hugo拿一个包含内容和模板的目录，并将其渲染成一个完整的HTML网站。Hugo依赖带有前置内容的Markdown文件作为元数据，您可以从任何目录运行Hugo。这适用于共享主机和其他没有特权帐户的系统。Hugo在几分之一秒内呈现了一个中等大小的典型网站。一个好的经验法则是，每段内容在大约1毫秒内呈现。Hu
日期 2023-06-12 10:48:40你不应该依赖CSS 100vh，这就是原因!
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。如果有一个文本和一个按钮，我们想让文本粘在上面，而按钮粘在下面！使用CSS Flex 似乎很容易做到。// HTML <div className="la
日期 2023-06-12 10:48:40css滚动条样式修改_js设置滚动条样式
大家好，又见面了，我是你们的朋友全栈君。CSS滚动条选择器::-webkit-scrollbar — 整个滚动条::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)::-webkit-scrollbar-thumb — 滚动条上的滚动滑块::-webkit-scrollbar-track — 滚动条轨道::-webkit-scrollbar-track-piece
日期 2023-06-12 10:48:40vue、css修改滚动条样式
vue、css修改滚动条样式 样式为/* 滚动条 */ body *::-webkit-scrollbar { width: 10px; height: 10px; } body *::-webkit-scrollbar-track { background: #fff; border-radius: 2px; } body *::-webkit-scrollbar-
日期 2023-06-12 10:48:40vite入如何引入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:40CSS书写顺序
CSS书写顺序整理了一下自己写CSS时的顺序，跟大家分享下。下表顺序为从上到下，从左到右：display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float
日期 2023-06-12 10:48:40如何制作网页-初学者入门HTML+CSS
如何制作网页 如何制作网页?如何做一个自己喜欢的网站呢?看到别人有自己的网站是不是有点羡慕呢?当然。比较复杂的网站就需要很多技术上面的知识咯。比如javascrpt、jquery、ajax、flash等等!这些都只是让网站的页面好看。使静态的网站变为动态的。那如何制作个简单的网页呢?那么先用Dreamweaver ，Frontpage做,然后细节用Homesite，Hotdog修改,图片用Pho
日期 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:40css 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:40CSS样式的优先级补遗2
CSS样式的优先级补遗2 由 Ghostzhang 发表于 2006-04-21 14:26 今天看到一篇《深入了解CSS的继承性及其应用》，文章中提到了CSS的特性值 样式表中的特殊性描述了不同规则的相对权重，它的基本规则是： 统计选择符中的ID属性个数。统计选择符中的CLASS属性个数。统计选择符中的HTML标记名格式。 最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。(
日期 2023-06-12 10:48:40关于CSS Hacks
关于CSS Hacks 由 Ghostzhang 发表于 2006-02-08 21:24 今天在SIC的BLOG上看到了一篇日志，很有感觉，转下来分享下。 现在用 CSS 的人越来越多了. 为了解决不同浏览器之间 CSS 支持的不同, CSS Hacks 诞生了. 始作俑者的叹气主题: http://tantek.com/log/2005/11.html 在里面他写到了 CSS Hack 的
日期 2023-06-12 10:48:40
用css3制作一个精美的表盘，建议初学者观看
点击链接查看效果https://ihope_top.gitee.io/my-demo/demo/1/前言前两天翻资料，找到了刚开始学习前端的时候学习的一个小案例，用css去画一个转动的表盘，也不知道大家都写过没有，样子如下图所示今天把这个小案例分享给大家，这个效果原案例是完全用css实现的，因为表针转动都有规律可循，设置一个定时的动画就行，我为了简化代码量，并且可以获取当前的时间，所以用js优化了
日期 2023-06-12 10:48:40常用的css3阴影效果，你真的了解吗
前言css阴影效果是我们经常使用的一个css属性，但你有仔细了解过它吗？是不是用的时候直接从蓝湖上复制过来就行了，那你了解它的每个参数吗？用阴影又能实现哪些好看的效果呢？来看一看我收集总结的css阴影知识吧，可能不全面，欢迎补充。属性介绍语法box-shadow: x-shadow y-shadow blur spread color inset;复制x-shadow: 必需的，水平阴影的偏移量，
日期 2023-06-12 10:48:40VUE Scss 安装
五一遇疫情 & 居家学VUE一、前言emmm，记得好多年前，写前端最苦难的并不是 html 本身，而是 css。 特别是自己命名和别人的命名。命名的不规范嵌套特别深样式被覆盖举个例子：某宝网站 h4 的标签.hotsale-item h4 { margin-top: 9px; line-height: 22px; height: 44px; font-siz
日期 2023-06-12 10:48:40html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
大家好，又见面了，我是你们的朋友全栈君。一、flex-direction: (元素排列方向)※ flex-direction:row (横向从左到右排列==左对齐)※ flex-direction:row-reverse (与row 相反)※ flex-direction:column (从上往下排列==顶对齐)※ flex-direction:column-reverse (与column 相反
日期 2023-06-12 10:48:40CSS3之opacity属性的简单使用
大家好，又见面了，我是你们的朋友全栈君。什么是opacity？opacity 属性设置元素的不透明级别。怎么使用？<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> CSS3之opacity属性
日期 2023-06-12 10:48:40html设置背景图片透明度代码,css设置图片背景透明度[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。我们经常会使用到背景图片，但有时候需要把背景图片设置一个半透明的效果，那么就需要以下的CSS了。这是一个CSS滤镜达到的效果，应用十分广泛。.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto!important;width:100%}注：代码应用的式CSS中的Alpha滤镜，这个滤镜可以设置
日期 2023-06-12 10:48:40npoi css,NPOI颜色对照表
大家好，又见面了，我是你们的朋友全栈君。颜色对照表：颜色 测试 Class名称 shortTest颜色 Black 8Test颜色 Brown 60Test颜色 Olive_Green 59Test颜色 Dark_Green 58Test颜色 Dark_Teal 56Test颜色 Dark_Blue 18Test颜色 Indigo 62Test颜色 Grey_80_PERCENT 63Test颜色
日期 2023-06-12 10:48:40HTML、CSS、JavaScript学习总结
大家好，又见面了，我是你们的朋友全栈君。学习总结HTML网站开发的主要原则是：– 用标签元素HTML描述网页的内容结构；– 用CSS描述网页的排版布局；– 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序HTML（Hyper Text Mark-up Language 超文本标记语言）的缩写，是最基础的网页语言 。 Html是通过标签来定义的语言，代码都是由标签所组
日期 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:40滚动效果——marquee的html样式和CSS属性
本文最后更新于2022年06月09日，已超过3天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！ html样式和CSS属性<marquee>是滚动标签<marquee>的属性<marquee>这是滚动效果——欢迎来到田小檬的博客</marquee>复制说明：scrolldelay，滚动延时，用于设定两次滚动操作之间的间隔时间，
日期 2023-06-12 10:48:40