草，好长的标题。 前言 给博客添加一个背景图片玩玩。 加上去了，发现原来的 toc 栏有点怪，不如加个模糊滤镜和透明背景色美化一下，然后就遇到了问题。...现象 个人是在 typo.module.css 中使用了 @apply： .typo nav>ol{ @apply backdrop-blur bg-white/60 dark:bg-[#121212...猜测是和 Tailwind CSS 的 darkMode 的 class 机制有关。 解决 修改 tailwind.config.js： module.exports = { //........ } 参考 dark: not working in @apply (tailwind 2.0.1) · tailwindlabs/tailwindcss · Discussion #2917 我的博客即将同步至腾讯云开发者社区
1、在body设置属性为height:100%时其实不能是100%的，因为这个高度是相对于父元素，body的父元素为html标签，这时候可以设置： html,body{height:100%} 2、background-image
公司研发的系统为B/S架构，用户使用浏览器访问系统时，使用浏览器自带工具查看，对图片的请求数极多，多为小图片。...今天想对这个现状进行改善，网上查到一种雪碧图的方案，其实就是使用工具将数量很多的小图片拼成一张大图片，然后css里都引用这张大图片，并指定显示该图片的某一个区域，但这个方案需要手工作很多处理。...于是就想到能不能用目前比较成熟的grunt对前端样式文件自动进行处理，自动生成雪碧图，自动修改样式文件。...grunt.initConfig({ // 自动雪碧图 sprite: { options: { // 映射CSS中背景路径，支持函数和数组，默认为 null...// 是否使用 image-set 作为2x图片实现，默认不使用 useimageset: false, // 是否以时间戳为文件名生成新的雪碧图文件，
vue中组件的样式是有作用域的，默认是全局样式。如果不希望当前组件中的样式影响到别的组件，可以添加作用域。通过给style添加scoped,使它的css只作用于当前组件的元素。...在有作用域的组件中如何给子组件设置样式？...默认只能作用到子组件的根节点（组件的class 默认作用到组件的根节点）使用子组件的根节点本身的class类名如果是第三方组件，不知道它的根节点的类名，那就审查元素查看，或者添加一个类名// APP.vue... //在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。....hello { border: 1px solid #000;}//在其中再设置HelloWorld 组件中h1的样式，没效果。
与 CSS 样式的 Service Worker 非常相似，Houdini 工作集已注册到你的应用程序，并且一旦注册就可以在你的 CSS 中按名称使用。...你可以在自己的用户界面中使用CSS Paint。 例如，你可以编写自己的 Paint 工作集，或使用现有的已发布工作集，而不是等待浏览器实现有角度的边框功能。...它目前在所有基于 Chromium 的浏览器中启用，在 Safari 中部分支持，并且正在考虑用于 Firefox。...即使没有完整的浏览器支持，你仍然可以使用 Houdini Paint API 发挥你的创意，使用 CSS Paint Polyfill ，你的样式可以在所有现代浏览器中都有效。...它提供了你需要了解的有关 CSS Houdini 的一切：浏览器支持、其各种 API 的概述、使用信息、附加资源和实时绘制工作集示例。
代码：postion:relative 需要配合访问属性来移动 相对于自己原来的位置进行移动 在页面中占位置→没有脱标 应用场景 ：配合绝对定位组cp（子绝父相），用于小范围的移动。...代码：position:absolute 需要配合方位属性实现移动 默认相对于浏览器可视区域进行移动 在页面中不占位置→已经脱标 应用场景 ：配合相对定位组CP（子绝父相） 绝对定位相对于谁移动？...祖先元素中没有定位 → 默认相对于浏览器进行移动 祖先元素中有定位 → 相对于最近的 有定位 的祖先元素进行移动 固定定位： 相对于浏览器窗口进行定位，脱离原来的文档流。...子绝父绝特殊场景： 场景： 在使用子绝父相的时候，发现父元素已经有相对定位了，此时直接子绝即可！ 原因： 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局。...设置偏移值：水平和垂直就近各取一个 水平方向： left：数字+px 距离左边的距离 right：数字+px 距离右边的距离 垂直方向： top：数字+px 距离上边的距离 bottom：数字+px 距离下边的距离
需求很简单，在SQL Server数据库中存放用户上传的Visio文件，然后使用Visio Viewer在IE中直接显示用户上传的Visio文件的内容。...对于这个需求，我们需要分成两部分： 1.实现Visio文件的数据库存放和读取，并在Asp.Net中能够下载下来。...2.使用微软官方提供的Visio Viewer，在HTML中使用该Object来调用Visio图。 对于第一个功能。首先需要实现的是文件的上传。...在文件上传时我们一般需要记录3个内容：文件的Content Type，文件名和文件的二进制内容。用户上传文件保存到数据库的功能代码很简单，我这里就不累述了。...id=6" + "&xx=.vsd> "); OK，我们存放在数据库中的Visio就可以正常显示在Visio Viewer中了。
css中minmax()函数的使用 说明 1、minmax()函数来创建行或列的最小或尺寸。 2、第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的值。...auto 值允许网格轨道基于内容的尺寸拉伸或挤压。...grid-template-columns: 1fr 1fr 2fr; background: pink; height: 300px; } 以上就是css...中minmax()函数的使用，希望对大家有所帮助。
css中skew函数的使用 1、skew函数定义元素在二维平面上的倾斜转换。这种转换是一种剪切映射(横切)，在水平和垂直方向上将单元内的每个点扭曲一定的角度。...每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整。因此，一个点离原点越远，其增加的值就越大。 2、指定一个或两个参数，它们表示在每个方向上应用的倾斜量。 实例 <!...transition: all 1s;*/ } div:hover { /*2d x轴朝下，y轴朝右，（x,y）也就是旋转角度都是以偏向该第一坐标系的为正... 以上就是css中skew函数的使用，希望对大家有所帮助。...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。
css中grid布局的使用 说明 1、通过display属性设置属性值为grid或inline-grid或者是subgrid就可以了。...实例 在CSS中，不设置 grid-template-columns，只设置 grid-template-row。 ... color: #fff; text-align: center; font-size: 20px; } 以上就是css...中grid布局的使用，希望对大家有所帮助。
css中outline方法的使用 说明 1、如果只需要两层边框，可以选择先设置一层常规边框，再加上outline(描边)属性来生成外层边框。...使用outline不仅可以模拟实线边框，还可以生成虚线边框。 2、outline-offset属性可以控制边缘和元素边缘之间的间距，该属性可以接受负值。 需要注意的是，这种方法不能产生圆角。...background: yellowgreen; border: 10px solid #655; outline: 5px dashed deeppink; outline-offset: 10px; 以上就是css...中outline方法的使用，希望对大家有所帮助。...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。 收藏 | 0点赞 | 0打赏
React 中 CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，这可能会导致大量的冲突。...也就是说如果我有两个css文件，它们的中的一些样式名是一样的，那么就会被覆盖，简单的解决办法就是将样式的命名变得复杂且不重复，但这样样式多了也很难避免重复，且命名也不会太好看。...那么这个时候就推荐使用CSS Modules 了CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。...}> css modules语法: ：global(.className) CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。...Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合"（"composition"）。
首先，要在 Android 代码中打开调试的开关： webview.setWebContentsDebuggingEnabled(true); (注意：API level 要在 19 以上才有用。)...然后呢，运行 Android 程序，再打开 Chrome 浏览器，在地址栏输入 chrome://inspect/#devices，回车，然后找到这个 device，点击“inspect”，就欧了。
摘要 本文介绍了CSS中的固定定位属性（position: fixed）的使用方法和注意事项。固定定位属性可以将元素固定在浏览器窗口的特定位置，不随页面滚动而变动，常用于创建固定导航栏、页脚等。...CSS中的固定定位属性（position: fixed）是一种常用的布局技术，可以将元素固定在浏览器窗口的特定位置，不随页面滚动而变动。这个属性在开发各种网页和应用程序时非常有用。...本文将介绍固定定位属性的使用方法，并提供具体的代码示例。 什么是固定定位属性？ 固定定位属性是CSS提供的一种布局方式，它使元素相对于浏览器窗口进行定位，与其它元素无关。...使用固定定位属性的基本语法 要使用固定定位属性，首先需要为元素设置一个样式类或ID，然后在CSS样式表中定义这个类或ID的样式。...使用固定定位属性可以为我们的网页和应用程序提供更好的布局效果，让用户体验更加友好和便捷。希望本文对你使用CSS中的固定定位属性有所帮助！
兼容性 CSS3为我们提供了一个强大的功能自定义属性，也就是变量，他能让我们更改色系、皮肤、自适配变得简单。 查看兼容性 https://caniuse.com/?...search=-- 可以看出94%的用户的浏览器都兼容这个新特性了。 定义使用 变量的定义使用--name，而变量的调用使用var(--name)。...优先级 CSS获取变量和CSS的样式优先级一样 顺序是：!...设置变量的值 element.style.setProperty("--variableName", value); 检测是否支持变量 CSS检测: 通过@supports性能查询语法来检测 语法：...&& window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else
css中flex-basis的使 概念 1、flex-basis指定了flex元素在主轴方向上的初始尺寸。...2、如果不使用box-sizing来改变盒子模型，则该属性决定了flex元素内容盒的宽度或高度(取决于主轴的方向)的大小。...这里把子元素高度设置成了 30px 总计 90px 来效果： .flex { flex-direction: column; } .flex > * { flex-basis: 30px; } 以上就是css...中flex-basis的使用，希望对大家有所帮助。
此外，还需要通过一定的技术手段来保证这些副本的“一致性”，也就是每个服务器上各个副本的数据是一样的。 当然，在图数据库中，副本问题也存在；其处理方式和大多数大数据、RDBMS 会较为类似。...图数据中的切分问题：切图 在图数据库中，这个分发过程被形象的称为“切图”：就是把一个大图切成很多的小图，把对于这些小图的存储或者计算再放置在不同的服务器上。...也就是说每个服务器中都保留了”全量”的图数据，因此图数据不能大于单机的内存和硬盘容量；而通过增加写副本，可以保证写入过程中单机失效问题；通过增加读副本，可以提供更多的读请求能力（不能提高写请求的能力）。...这个方案和 RDBMS 的分表非常类似，用户在使用过程中自己指定要使用那个分区或者分表，“切分”这个动作，用户是有着完全的掌控。 可以看到对于前面的三个问题，这种方案在产品层面完全交给了用户来决定。...全对等分布式，”切图”，细颗粒度的副本 还有一些方案的架构设计目的中，相对把图的扩展性/弹性排在整个系统设计最高的优先级。
在上一篇文章《浏览器中的手写数字识别》中，讲到在浏览器中训练出一个卷积神经网络模型，用来识别手写数字。值得注意的是，这个训练过程是在浏览器中完成的，使用的是客户端的资源。...这个示例写的比较简单，从浏览器控制台输出log，显示结果，在chrome浏览器中可以打开开发者工具查看： 加载json格式的MobileNets模型 使用封装好的JS对象确实方便，但使用自己训练的模型时...在JS世界，JSON是使用得非常普遍的数据交换格式。TensorFlow.js也采用JSON作为模型格式，也提供了工具进行转换。...另外，你也可以在浏览器中直接访问：http://ilego.club/ai/index.html ，直接体验浏览器中的机器学习。...参考文献： tensorflow官网 你还可以读 一步步提高手写数字的识别率(1)(2)(3) TensorFlow.js简介 浏览器中的手写数字识别
这是简易数据分析系列的第 3 篇文章。 上文我们安装了 Web Scraper 插件，我相信对于大部分人来说还是很简单的，这篇文章我们说些不一样的内容，讲讲浏览器里那些不被大多数人所知的骚操作。...作为普通的使用者，大家用浏览器就是查阅信息，浏览网页。但在开发者的眼里，Chrome 浏览器提供了非常强大的开发能力。...3 切换开发者后台的位置 控制台打开后，一般会在网页的下方显示，我们其实也可以切到网页的右边显示，具体的操作是点击后台面板右侧的 ⋮ 按钮，然后修改显示位置，具体操作如下动图。...4 用电脑浏览器模拟手机浏览器 用电脑浏览器模拟手机浏览器是一个很实用的功能。因为现在是移动互联网的时代了，大部分公司的网页都是优先支持移动端，而且手机浏览器的数据结构更清晰，更利于我们抓取数据。...被老板抓住时别说是我教的。 好了，今天的准备内容就到这里了，下一期我们学习如何使用 Web Scraper 抓取网页数据。
在做的一个小项目，页面加载后使用ajax读取本地REST数据，保存在状态中，稍后在form的选择下拉框中显示，代码如下： 150 componentDidMount() { 151...，运行时在电脑端谷歌、火狐浏览器访问，数据都能加载，在手机端使用谷歌浏览器访问，选择下拉框始终为空，这说明手机端浏览器ajax获取数据时出了问题。...这个$(function(){}的功能何在？ javascript中$(function() {....})...，即在页面加载完成后才执行某个函数，如果函数中要操作 DOM，在页面加载完成后再执行会更安全，所以在使用 jQuery 时这样的写法很常见。...可能的原因是手机端刘览器与电脑端浏览器页面加载中处理脚本时间不同，前者是未等页面加载结束即执行jquery脚本，后者则相反，所以后者不需$(function(){}也可正常显示。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
