CSS(二)
不同样式tooltip对话框小三角的css实现
开发过程中已经遇到过好多次需要手动实现 tooltip 样式了，这里就总结下，以便未来更好的复制粘贴。 如上图，常见的 tooltip 总共有 3 种类型，纯背景色无边框、有边框、包含背景图，其中的小三角可能是纯色、尖尖有弧度。下边介绍四种常用的方法来实现 tooltip。贴图简单方便快捷，一个三角形的图定下位即可。在女朋友的帮助下，用 AI 成功画了三种三角形。下边我们只需要把三角形贴到矩形下边
日期 2023-06-12 10:48:40
get几个小技能：图标库使用技巧，css3文本小技巧
如何使用常用的图标库目前自己常用的图标库有两种： 1. 插件、库里面自带的图标库：如 * boostrap * element ui * vant * layui * H-ui * mui 等等 这些ui框架官方文档上都有详细的介绍使用说明 2. 常用图标库 * Font Awesome图标库 * iconfont 阿里图标库 这些图标库虽然官网都有介绍，但是使用起来并不
日期 2023-06-12 10:48:40
手把手带你使用webpack4构建一个Vue开发编译环境，并实现代码分割，css代码分离
前言本篇文章不会细致讲webpack生产编译方面的优化操作，主要点是为了区分开发与生产环境的区别，代码分割分离的操作，所以不建议各位使用本篇文章内配置内容去进行生产编译，生产编译其它优化细节请各位自行另加配置，当然本篇文章配置也不是不能用作生产配置，只是给各位一个建议~正文 所需环境开始之前，请各位给自己电脑安装一下Nodejs，具体安装方法这里我就不做讲解了，各位可以移步Node官网查看文档然后
日期 2023-06-12 10:48:40添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果
添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果 作者：matrix 被围观: 4,949 次 发布时间：2013-10-13 分类：Wordpress 零零星星 | 一条评论 » 这是一个创建于 3244 天前的主题，其中的信息可能已经有所发展或是发生改变。 测试是用于NGRO主题的首页文章列表上，配合起之前的窗口小列表 不错~带8px白色边框鼠标停留后还有放大效果，如图：.Indexp
日期 2023-06-12 10:48:4013·灵魂前端工程师养成-CSS动画
CSS动画原理 浏览器渲染原理 transform完整介绍 跳动的心制作 transition 过渡属性 使用animation做动画 使用animation制作跳动的红心 -曾老湿, 江湖人称曾老大。 -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。
日期 2023-06-12 10:48:40
CSS 技术
浏览本篇文章前可以先看之前的前端网页介绍和html常用标签以便更容易理解本文目录： 目录CSS 技术介绍CSS 语法规则CSS 和 HTML 的结合方式第一种：第二种第三种CSS 选择器标签名选择器id 选择器class 选择器（类选择器）组合选择器常用样式CSS相关查阅文档：https://kohler.lanzouo.com/i0XFcz8svob 文档截图CSS 技术介绍CSS 是「层
日期 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:40
css滚动条样式修改_js设置滚动条样式
大家好，又见面了，我是你们的朋友全栈君。CSS滚动条选择器::-webkit-scrollbar — 整个滚动条::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)::-webkit-scrollbar-thumb — 滚动条上的滚动滑块::-webkit-scrollbar-track — 滚动条轨道::-webkit-scrollbar-track-piece
日期 2023-06-12 10:48:40浅谈Oracle RAC(5)– CSS组件
编者按：本文作者系肖遥（花名），现任甲骨文技术支持工程师 ，目前专注于Oracle RAC领域。个人主页:https://blog.csdn.net/weixin_50510978，经其本人授权发布【免责声明】本号文章仅代表个人观点，与任何公司无关。积极的眼睛，还是败给了懒惰的双手。停更了一段时间，今天继续浅谈RAC的博文。我们在前面的博客说集群是一组相互独立的、通过高速网络互联的节点(计算机)，
日期 2023-06-12 10:48:40重新认识CSS的权重
重新认识CSS的权重今天 [大白] 问了一个关于CSS权重的问题： 关于选择器权重的问题 。class的权重是10 标签权重是比如说 p span{} 权重是2. 如果11标签自选择器的组合的权重11，会不会覆盖 一个class选择器权重10的 样式？ 在跟他的讨论中，重新整理了我对CSS权重的理解。在《样式的作用域──页面重构中的模块化设计（一）》中有做过总结，其中提到比较重要的两点：权值的大
日期 2023-06-12 10:48:40CSS模块的注释——页面重构中的模块化设计（六）
CSS模块的注释——页面重构中的模块化设计（六） 由 Ghostzhang 发表于 2010-07-20 14:07 从前面的内容我们已经知道，样式是可以分成各个模块去写的，如何表示各个模块的作用及它们之间的关系呢？CSS的注释是不二的选择。与普通的注释不同，模块的注释需要一些更详细的内容，比如：功能说明、模块版本、关联信息等等。 像 《基类、扩展类──页面重构中的模块化设计（五）》 中例子的注释
日期 2023-06-12 10:48:40如何制作网页-初学者入门HTML+CSS
如何制作网页 如何制作网页?如何做一个自己喜欢的网站呢?看到别人有自己的网站是不是有点羡慕呢?当然。比较复杂的网站就需要很多技术上面的知识咯。比如javascrpt、jquery、ajax、flash等等!这些都只是让网站的页面好看。使静态的网站变为动态的。那如何制作个简单的网页呢?那么先用Dreamweaver ，Frontpage做,然后细节用Homesite，Hotdog修改,图片用Pho
日期 2023-06-12 10:48:40css实现鼠标划入显示拖动条
代码如下：<!DOCTYPE html> <html> <head> <style> .ruben-container{ height: calc(100vh - 70vh); width: calc(100vw - 70vw);
日期 2023-06-12 10:48:40
css属性选择器
首先是MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors然后是场景：此处需要将所有包含overflow: scroll行内样式(也就是元素的style属性内写样式)的元素，设置为overflow:auto代码：*[style*='overflow: scroll'] { ove
日期 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:40CSS Sprites 样式生成工具
CSS Sprites 样式生成工具 由 Ghostzhang 发表于 2019-02-17 22:47 2009年写的一个小工具，当时只是为了解决自己每次对雪碧图做修改时总得去计算位置，要么就是得打开PS这等牛刀。后面用adobe的air打包成了个桌面应用，放到了博客上。现在已经各种框架、自动打包工具处理图片，本以为已经没人用了，没想到今天有人加我QQ反馈说这个工具今天突然就报错了。看了下他给的
日期 2023-06-12 10:48:402018 CSS裸奔节
2018 CSS裸奔节 由 Ghostzhang 发表于 2018-04-09 00:00 一个渐渐被忘记的属于前端的节日。节日的意义不仅在于庆祝，更在于提醒未来的人们记得，曾经有一件需要人们记得的事发生在这个世界上，而这件事有很高的重要性，不能被忘记。CSS裸奔节1的意义在于提醒前端开发者，HTML的结构、标签语义的重要性，关注内容本身的准确呈现。近几年前端越来越快餐化，各种框架、库不断的刷新着
日期 2023-06-12 10:48:40王者荣耀吕布末日机甲皮肤优化了，我们来用css3给他写一个回城特效
在线预览地址： https://ihope_top.gitee.io/my-demo/demo/3/ gitee地址：https://gitee.com/ihope_top/my-demo 推广一下我的勇闯掘金小游戏：https://juejin.cn/post/7085758458657505288 貂蝉的回城也安排上了，https://juejin.cn/post/70894737720
日期 2023-06-12 10:48:40CSS3 opacity 属性
大家好，又见面了，我是你们的朋友全栈君。 设置 div 元素的不透明级别1、属性opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同
日期 2023-06-12 10:48:40HTML+CSS实现导航条及下拉菜单[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。效果代码中的图片可以自己换的 下拉菜单HTML代码下拉菜单CSS代码复制在写完上述代码的同时须加上css的重置代码，代码如下：* { margin: 0; padding: 0 } em,i { font-style: normal } li { list-style: none } a{
日期 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:40CSS自定义鼠标指针样式「建议收藏」
大家好，又见面了，我是你们的朋友全栈君。原文链接: http://davidwalsh.name/css-custom-cursor Demo地址: http://davidwalsh.name/demo/css-custom-cursor.php 原文日期: 2014-09-16 翻译日期: 2014-09-17 翻译人员: 铁锚 还记得Web 1.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:40CSS中如何解决子元素继承父元素的opacity属性？
大家好，又见面了，我是你们的朋友全栈君。 解决方案这里有两个方案，使用rgba()间接的设定opacity的值，这个属性不会向下继承，或者既然opacity会被子级元素继承，那就把opacity属性放到同级元素实现，下面通过示例具体说说这两种方式：1.使用rgba()间接的设定opacityrgba()有四个参数，最后一个参数就是opacity的值，和opacity单独设定效果一样，但是这个是
日期 2023-06-12 10:48:40html+css网页开发 之 头部导航条（logo、导航栏、搜索框）
大家好，又见面了，我是你们的朋友全栈君。页面布局整体思路：确定页面的版心（可视区），测量可知。分析页面中的行模块，以及每个行模块中的列模块。一行中列模块常用浮动布局，先确定每个列的大小，之后确定列的位置。制作HTML结构。遵循先有结构，后有样式的原则。 效果图如下：1号是版心盒子header 1200*42的盒子水平居中对齐版心盒子内包含2号盒子logo 版心盒子内包含3号盒子nav文字导航栏版心
日期 2023-06-12 10:48:40css 的 opacity 属性
大家好，又见面了，我是你们的朋友全栈君。 opacity 用于指定元素透明度, 支持 0~1 之间的小数. 默认值 1-完全不透明, 0-完全透明<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
日期 2023-06-12 10:48:40CSS改变鼠标样式（图片）
大家好，又见面了，我是你们的朋友全栈君。下面就来介绍下步骤方法：首页把鼠标图标格式转换成.ico格式，大小为32*32 转换格式网址为：https://www.easyicon.net/covert/然后在CSS样式中增加代码：*{ cursor:url(../images/shubiao.ico),auto; }复制 大功告成啦~~~说明：图片大小最好是32*32的大小 Css中的c
日期 2023-06-12 10:48:40css鼠标点击的五种状态
大家好，又见面了，我是你们的朋友全栈君。html:<a href="#">测试鼠标点击的五种状态</a>复制css: 分开写: a:link{color:#fff} 未访问时的状态（鼠标点击前显示的状态） a:hover{color:#fff} 鼠标悬停时的状态 a:visited{color:#fff} 已访问过的状态（鼠标点击后的状态）
日期 2023-06-12 10:48:40HTML+CSS登录界面[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。 今天学习了一个HTML+CSS登录界面 效果图如下： 背景图片可以选取自己喜欢的，以下是实现代码：login.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title&g
日期 2023-06-12 10:48:40css flex布局实现文字垂直居中
大家好，又见面了，我是你们的朋友全栈君。 在没使用flex之前，垂直居中最常用的方法就是将容器的line-height设置为和容器一样的高度，但这种方法很生硬，每次需要更改容器高度的时候都需要考虑line-height，使用以下这种方法可以实现自适应的垂直居中！<style> .innner { display: flex; bac
日期 2023-06-12 10:48:40css 画三角形
大家好，又见面了，我是你们的朋友全栈君。 1、斜边在左边三角形 <style> .triangle { border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #000; width:0; height:0; } </style>
日期 2023-06-12 10:48:40