横向 文字css

css图片宽高不同,缩放图片,保持宽高,注意最外层的盒子要用display:inline-flex

<div class="product"> <Popover placement="right"> <template #content> <div class="w-[200px] h-[200px]"> <img :src="record?.mainImages?.[0]?.url" class ......
图片 外层 inline-flex 盒子 display

用html 加css 绘制表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 头部样式定义 */ .header { padding-bottom: 10px; /* 设置头部的下内边距 ......
表格 html css

css--重绘和回流

重绘(paint) : 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不影响布局的,比如background-color,则称为重绘。 回流(layout): 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这 ......
css

css 居中

absolute 绝对定位来居中 先让元素左上角居中 top: 50%; left: 50%; 再根据容器的大小来设置外边距偏移量 width: 800px; height: 500px; margin-left: -400px; margin-top: -250px; 拓展:过渡玩法: backg ......
css

CSS色域、色彩空间、CSS Color 4新标准

引言 近期,三大主流浏览器引擎均发布最新版本,支持W3C的CSS Color 4标准,包含新的取色方法color()和相应语法,可展示更多的色域及色彩空间,这意味着web端能展示更丰富更高清的色彩。虽然目前只有最新版本的现代浏览器才支持,我们可以先提前了解一下这项新标准。 本文首先会先简单介绍几个色 ......
CSS 色彩 标准 Color 空间

2023-10-26 hexo部署到GitHub时css样式不生效 ==》 css文件链接被识别为不安全链接,导致无法生效

hexo d一键部署后查看效果发现博客页面的样式全丢失了,查看控制台发现了端倪: Mixed Content: The page at 'https://xxx.github.io/' was loaded over HTTPS, but requested an insecure styleshe ......
链接 样式 css 文件 GitHub

echarts bmap地图 自定义图标上方添加文字

实现效果 代码如下: import pump from '@/gis/assets/image/pump.png'; series: [ { type: 'lines', coordinateSystem: 'bmap', markPoint: { // symbol: `image://${pum ......
图标 echarts 文字 地图 bmap

主题 CSS 魔改版

(Markdown 格式贴近 Typora 的显示样式) .blogpost-body blockquote { background-image: none; border-left: 5px solid #e2dfdf; border-right: none; border-top: none; ......
主题 CSS

css:transition tab切换 动态滑动效果

<template> <view class="tab"> <view class="item" :class="{'ac':active == 1}" @click="active = 1">item1</view> <view class="item" :class="{'ac':active ......
transition 效果 动态 css tab

每行文字前后添加双引号

#原始文本 aaaaaaaaaa bbbbbbbbbb cccccccccc# 要多一个空行 设置正则表达式,点击全部替换 查找目标: (.*)\r?\n|(?<!\n)\r 替换成: "$1", # 匹配替换后 "aaaaaaaaaa", "bbbbbbbbbb", "cccccccccc", # ......
引号 文字

js中使用css变量(vue)

html <div class="test" :style="{ '--backgroundColor': backgroundColor }"></div> js css .test { background-color: var(--backgroundColor); } ......
变量 css vue

css实现图片的居中、拉大和缩小

resize和overflow实现拉大和缩小,绝对定位+transform实现剧中,max-height和max-width限制图片不能超出div的范围 <html> <head> <style> #div{ background-color: antiquewhite; height: 300px ......
图片 css

CSS3 -- 优化滚动(scroll-behavior | scroll-snap)

实现横向滑动:当子元素溢出父级盒子时,做以下操作。 第一种方式: 1.父级定义可横向滑动。 overflow-x: auto; 2.子元素设置为行内块。 display: inline-block; 3.父元素不允许子元素换行。 white-space: nowrap; 也可以隐藏滚动条 ::-we ......

JavaWeb开发-CSS基础

2.CSS层叠样式表基本语法 层叠样式表,用来控制页面的样式 (1)CSS的三种引入方式 内部样式表:适合学习使用,将CSS代码写在style标签里面,style标签嵌套在title里 外部样式表:开发常使用,将CSS代码写在单独的CSS文件中.css;在HTML中使用link标签引入: href放 ......
JavaWeb 基础 CSS

CSS必学:你需要知道的盒子模型的秘密

作者:WangMin 格言:努力做好自己喜欢的每一件事 作为前端开发来说,要掌握的CSS基础一定很多,那么CSS中盒子模型肯定是必考必问必掌握的前端知识点,因为它是CSS基础中非常重要的内容,接下来我们就一起来了解一下盒子模型吧! 什么是盒子模型? CSS 所有的HTML 标签元素在网页中都生成了一 ......
盒子 模型 秘密 CSS

Oracle ORA-01861: 文字与格式字符串不匹配

1.问题 如图所示 2.解决方式 原因: 如果直接按照字符串方式,或者直接使用to_date('2010-01-01'),没有指定日期格式,就会导致你插入的时间格式和数据库现有的时间格式不一致,从而报错:ORA-01861: 文字与格式字符串不匹配。 所以必须指定日期格式 。 解决方法: 指定日期格 ......
字符串 字符 文字 格式 Oracle

记录--vue3 + mark.js | 实现文字标注功能

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 页面效果 具体实现 新增 1、监听鼠标抬起事件,通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。 2、通过 选中的文字长度是否大于0或window.getSelection().isColla ......
文字 功能 vue3 mark vue

Python操作Word水印:添加文字或图片水印

在Word文档中,可以添加半透明的图形或文字作为水印,以保护文档的原创性,防止未经授权的复制或使用。除了提供安全功能外,水印还可以展示文档创作者的信息、附加的文档信息,或者仅用于文档的装饰。本文将介绍如何使用Spire.Doc for Python在程序中的轻松添加文字和图像水印到Word文档。 引 ......
水印 文字 Python 图片 Word

初步了解CSS

初步了解CSS 一、CSS介绍 CSS定义 css(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种脚本语言。 CSS作用 美化界面,比如:设置标签文字大小,颜色,字体加粗等样式。 控制页面布局:比如:设置浮动,定位样式。 CSS基本语法 css是由两个主要部分构成:选 ......
CSS

栩栩如生,音色克隆,Bert-vits2文字转语音打造鬼畜视频实践(Python3.10)

诸公可知目前最牛逼的TTS免费开源项目是哪一个?没错,是Bert-vits2,没有之一。它是在本来已经极其强大的Vits项目中融入了Bert大模型,基本上解决了VITS的语气韵律问题,在效果非常出色的情况下训练的成本开销普通人也完全可以接受。 BERT的核心思想是通过在大规模文本语料上进行无监督预训 ......
栩栩如生 音色 Bert-vits 语音 Python3

css---等宽瀑布流布局制作

瀑布流布局效果如下图: 当前项目需求,如下图: 商品展示,需要按接口返回的顺序展示,依次从左至右,从上至下。 方案1:CSS3 column 属性(实现的布局顺序为先从上到下,再从左至右,所以这种方式仅适用于数据固定不变的情况,对于滚动加载更多等可动态添加数据的情况就并不适用了。) 关键思路: co ......
瀑布 css

如何实现Windows11原生的语音输入?AI语音转文字,比打字快多了

引言 在Win11之前,要实现语音识别,相对比较麻烦,或者使用第三方输入法软件,但当有新闻报导出用户的输入信息被非法收集和利用,广告和骚扰接踵而至,后由于隐私保护级别的提升,之后无论是输入法厂家还是用户,都变得比之前要谨慎多了。现在换上Win11的用户越来越多,但有些用户还是由于惯性还是会选择之前的 ......
语音 Windows 文字 11

java中使用Graphics绘制图形验证图片,为什么图中的文字没有呈现?

项目中做了一个图形验证的功能。可选择图形中的文字,想出现的效果如上。图形上有文字。 而在实际做的过程中,发到测试环境linux系统上去之后,是下面的情况: 只有图,没有文字! 于是问了问度娘,说是字体的原因。项目中使用了linux中没有的字体会导致上图的问题。 但我是使用了linux中的字体之后依然 ......
Graphics 图形 文字 图片 java

css 跟随屏幕大小变动

在网页设计中,我们常常需要让元素随着屏幕大小的变化而自适应。这样可以让网页在不同尺寸的设备上显示得更加美观和合理。CSS提供了很多的技巧来实现这一目的。 第一种方法是使用百分比来设置元素的大小。比如,可以将容器宽度设置为100%,这样容器就会随着屏幕大小的变化而自适应。同时,也可以使用百分比来设置字 ......
屏幕 大小 css

复习css

复习css 样式 内联样式,行内样式,外部样式优先级 离HTML元素越近,优先级越高 内联样式离元素近:行内样式>内联样式>外部样式 外部样式离元素近:行内样式>外部样式>内敛样式 本质:浏览器从上到下解析过程中,后出现的样式会覆盖较早出现的样式 选择器 基本选择器 id > 类 > 标签 本质:定 ......
css

HTML+CSS面试题

1、内元素和块级元素的区别? 行内元素:不会独立出现在一行,单独使用的时候后面不会有换行符的元素。eg:span, strong, img, a 等。这些元素,默认的高宽,总是其内容的高宽。并且,margin和padding值,只有左右有效。 块级元素:独立在一行的元素,他们后面会自动带有换行符。e ......
HTML CSS

03前端开发【css结束】

伪元素选择器 '''通过css操作文本内容''' 1.修改首个字体样式 p:first-letter{ color: red; font-size:48px; } 2.在文本开头添加内容 p:before{ content: '哈哈'; color:bule; } 3.在文本结尾添加内容 p:aft ......
前端 css

防御性CSS

什么是防御性CSS呢? 我的理解是我们所写的网页的内容不完全是静态的,也是可以发生变化的,因此也就增加了CSS出现的问题。不管网页的内容是多是少,还是窗口尺寸是大还是小,页面里面的内容与布局是要能正常显示而不会被破坏。 Flexbox 折行 Flexbox 是 CSS 中经常使用的布局,在父元素中设 ......
防御性 CSS

C#输出文字对齐,空格位数对齐

[C#] Console.WriteLine(" "); Console.WriteLine("First Name | Last Name | Age"); Console.WriteLine(" "); Console.WriteLine($"{"Bill",-10} | {"Gates",-1 ......
位数 空格 文字

css 背景样式 梯形/平行四边形

绘制这种不规则的背景图形,目前我的思路是使用伪元素 伪元素的优点在于不用添加新的元素 实现平行效果使用了css transform: skew(); 具体代码如下 { position: relative; padding-left: 12px; color: #2187FF; background ......