小M's Posts

HTML中图片不存在显示默认图片的方法示例

也就是说图片存在则显示 pic.gif,图片不存在将显示默认图片。 »

详解HTML中字体使用line-height依然不能垂直居中解决办法

以图片所示的效果为例,显然我们不仅要使“下一步”文本水平居中,还要垂直居中,此时我们写代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #next-butt... »

html直接引用vue和element-ui的方法

代码如下所示: 圆角按钮 Try Element ... »

详解html-webpack-plugin使用

最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用:为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口1 »

Java Iterator(迭代器)

Java Iterator(迭代器)

Java Iterator(迭代器) Java 集合框架 Java Iterator(迭代器)不是一个集合,它是一种用于访问集合的方法,可用于迭代 ArrayList 和 HashSet 等集合。 Iterator 是 Java 迭代器最简单的实现,ListIterator 是 Collection API 中的接口, 它扩展了 Iterator 接口。 迭代器 it 的两个基本操作是 next ... »

详解css-vars-ponyfill 在ie环境下使用问题(nextjs 构建)

css-vars-ponyfill 通过css变量来实现网页换肤的过程中,会出现兼容性问题。   为了解决ie,qq,百度浏览器等兼容性问题,引入css-vars-ponyfill,但是在ie浏览器下,css-vars-ponyfill 的在nextjs下表现不佳,主要缺陷是由于页面是服务端渲染,因此用户在看到界面后,动态主题色等样式不能很快渲染好,而是有一个过渡的时间(css-vars... »

实验结果

CSS中使用text-align、margin:0 auto居中的示例代码

CSS中使用text-align、margin:0 auto居中 在使用text-align或者是margin:0 auto进行居中时,可能会出现无效的情况,下面用两个例子来讲解和解决问题 示例1:让内联元素居中使用text-align 假设我要让图片在其父组件中居中显示。那首先,父组件应该是块元素(div、p…),然后在父组件中添加属性text-align:center,随后此组件... »

CSS line-height的如何继承的问题

Line-height的如何继承? 写具体数值,如30px,则继承该值(比较好理解)写比例,如2/1.5,则继承该比例(比较好理解) 比如body中line-height设为2,则p标签继承line-height为2,则算出来的p标签line-height为font-size * 2 =32px; 写百分比,比如200%,则继承计算出来的值(考点)—当前的font-size * 200... »

浅谈CSS到底会不会阻塞页面渲染

其中一个解决防范是在文件名字后面加一个版本号) 减少http请求数,将多个css文件合并,或者是干脆直接写成内联样式到此这篇关于浅谈CSS到底会不会阻塞页面渲染的文章就介绍到这了,更多相关CSS 阻塞页面渲染内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

CSS实现鼠标悬停改变其他标签样式的示例代码

例如:将.div3取消注释后,.div1将无法控制.div2的样式!!!如果控制标签和被控制标签中间有内容,需要按照第三种方式写! »

解决line-height=height元素高度但是文字并没有垂直居中的问题

先说下为什么line-height等于元素高度文字却没有垂直居中,其实line-height等于元素高度的时候文本并不是真的居中了,而是看着居中了,当元素高度和font-size差距较大的时候,这种不是真正的居中就越发的明显,这里可以参看下什么是基线? »

深入浅析CSS 的多种背景及使用场景和技巧

本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料 CSS background是最常用的CSS属性之一。然而,并不是所有开发人员都知道使用多种背景。这段时间都在关注使用多种背景场景。在本文中,会详细介绍background-image`属性,并结合图形来解释多个背景使用方式以及其实际好处。 ... »

详解中文字体在CSS样式中font-family对应的英文名称

总结到此这篇关于中文字体在CSS样式中font-family对应的英文名称的文章就介绍到这了,更多相关CSS样式font-family英文名称内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

纯CSS实现图片百叶窗展示效果示例

首先给大家看一下完成效果 主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表里,相互叠加,鼠标移动的同时改变列表的宽度。 第一步:构建一个百叶窗框架 html代码: <div class="container"> <ul> <li><... »

css 命名:BEM, scoped css, css modules 与 css-in-js详解

同 css modules,用算法命名。无法适配多套主题 css-in-js 使用算法命名,拥有 css modules 的优势。同时将 css 视为 js 的字符串,赋予 css 更多能力到此这篇关于css 命名:BEM, scoped css, css modules 与 css-in-js的文章就介绍到这了,更多相关css 命名内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希... »

CSS八种让人眼前一亮的HOVER效果的示例代码

一.发送效果HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> </div> CSS #send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh... »

css3实现动画的三种方式

这是一个考验面试者对css的基础知识。 css 实现动画主要有3种方式 第一种是: transition 实现渐变动画 第二种是: transform 转变动画 第三种是: animation 实现自定义动画 下面具体讲一下3种动画的实现方式。 transition渐变动画 我们先看一下 transition 的属性: property:填写需要变化的css属性如:width,line-heigh... »

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢? 一、兼容性不一 CSS3 box-shadow从IE9浏览器开始就支持了,兼容性如下截图: 而filter中的drop-shadowIE13才开始支持,移动端Android4.4才开始支... »

完美解决谷歌浏览器自动填充问题

在谷歌浏览器中,登陆成功后,谷歌浏览器会提示是否记住密码。如果选择记住密码,那么再次登录会出现诸如下边情况: 如果产品需求是不希望浏览器自动填充账号密码,那么怎么去除呢? 最先想到的是设置input标签属性autocomplete="off",不起作用1, 然后试着设置css input:-webkit-autofill设置背景色为透明和设置相应的字体颜色,依然不尽人意2。 然... »

看完不迷糊的 CSS 盒子模型介绍

网页设计中常听的属性名:内容、内边距、边框、外边距, CSS盒子模型都具备这些属性。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。总结到此这篇关于看完不迷糊的 CSS 盒子模型介绍的文章就介绍到这了,更多相关CSS 盒子模型内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

flex是什么及flex布局语法教程详解

Flex布局 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,自由的操作容器中元素(项目)的排列方式 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器,必须加上-w... »

CSS+JS实现水滴涟漪动画按钮效果的示例代码

代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.... »

CSS 中的六个重要选择器(三秒就可以记住)

来自:https://blog.csdn.net/qq_44761243/article/details/108227213 CSS 的选择器有哪些??? 1.通配符(*) 也可称作全局选择器或者通用选择器,顾名思义,就是定义所有的元素的样式。常用于默认的一些样式,例如给所有的元素设置内边距为2px  *{padding:2px; } ,增加页面的美感! 2.标签选择器 也可称作元素选择... »

CSS 实现内容高度不够的时候底部(footer)自动贴底

在 UI 切图过程中,页面往往由三个部分组成,头部、内容和底部。当页面的内容高度不够撑满屏幕,底部(footer)就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多出很多空白,非常影响美观。 方案 1:Flex-Box 头部使用 position: sticky; 吸顶,再使用盒子( main )来包住内容( container > content )和底... »

详解浮动元素引起的问题和解决办法

到此这篇关于详解浮动元素引起的问题和解决办法的文章就介绍到这了,更多相关浮动元素引起问题内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

Page 1 of 9095123»