CSS样式表中样式覆盖优先顺序 PetitQ HTML/CSS 2018-11-08 1.76K 0 0 有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下: #navigator { height: 100%; width: 200; position: absolute; left: 0; bord…
CSS样式表中样式覆盖优先顺序 PetitQ HTML/CSS 2018-11-08 1.76K 0 0 有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下: #navigator { height: 100%; width: 200; position: absolute; left: 0; bord…
CSS文本中换行不生效空格合并 PetitQ HTML/CSS 2021-12-06 1.24K 0 0 css 天天打交道,没想到在一个基础的white-space属性上栽跟斗了,最近在项目的一个功能时,小程序上报上来的问题,用户是选择了直接使用手机键盘上换行的方式来填写多行的表单内容。但是当PC管理端查看的时候,span内的内容全部…
CSS文本中换行不生效空格合并 PetitQ HTML/CSS 2021-12-06 1.24K 0 0 css 天天打交道,没想到在一个基础的white-space属性上栽跟斗了,最近在项目的一个功能时,小程序上报上来的问题,用户是选择了直接使用手机键盘上换行的方式来填写多行的表单内容。但是当PC管理端查看的时候,span内的内容全部…
CSS文字超出部分隐藏并显示省略号 PetitQ HTML/CSS 2019-3-21 8.97K 0 6 网站前端开发中web网页中文字超出了需要隐藏,并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,实现这个效果有两种解决方法,大致如下: 一是用程序开截取字符长度,这个其实也是可以的,但是并不利于SEO优化,因为搜索引擎…
CSS文字超出部分隐藏并显示省略号 PetitQ HTML/CSS 2019-3-21 8.97K 0 6 网站前端开发中web网页中文字超出了需要隐藏,并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,实现这个效果有两种解决方法,大致如下: 一是用程序开截取字符长度,这个其实也是可以的,但是并不利于SEO优化,因为搜索引擎…
CSS文字半透明显示图片上的两种效果 PetitQ HTML/CSS 2018-11-08 2.19K 0 0 CSS让一行文字显示在图片的底部,用来说明图片的内容,当作图片标题,标题文字和背景可以设置半透明,鼠标经过图片时边框换色。 文字显示在图片上 标题层叠在图片上,标题文字和背景半透明。鼠标经过边框换色。 这个功能可以衍生出很多其他的版…
CSS文字半透明显示图片上的两种效果 PetitQ HTML/CSS 2018-11-08 2.19K 0 0 CSS让一行文字显示在图片的底部,用来说明图片的内容,当作图片标题,标题文字和背景可以设置半透明,鼠标经过图片时边框换色。 文字显示在图片上 标题层叠在图片上,标题文字和背景半透明。鼠标经过边框换色。 这个功能可以衍生出很多其他的版…
CSS控制文本两端对齐对最后一行无效解决方法 PetitQ HTML/CSS 2020-9-30 1.89K 0 0 做前端的朋友对text-align这个属性肯定是在熟悉不过了,经常用left、right、center来控制行内元素相对父元素左、右、居中对齐排版,justtify来实现文本的两端对齐,让一段多行文本看起来更方便阅读,排版更好看。 …
CSS控制文本两端对齐对最后一行无效解决方法 PetitQ HTML/CSS 2020-9-30 1.89K 0 0 做前端的朋友对text-align这个属性肯定是在熟悉不过了,经常用left、right、center来控制行内元素相对父元素左、右、居中对齐排版,justtify来实现文本的两端对齐,让一段多行文本看起来更方便阅读,排版更好看。 …
CSS控制图片水平居中与垂直居中 PetitQ HTML/CSS 2021-12-26 952 0 0 一个网站上会有很多图片,在网站排版过程中,需要设置图片居中显示。通过CSS控制图片居中显示,包括水平居中与垂直居中。图片的水平居中比较简单,也比较常见。就是使用外边距margin:0 auto来控制水平居中: .cont img{d…
CSS控制图片水平居中与垂直居中 PetitQ HTML/CSS 2021-12-26 952 0 0 一个网站上会有很多图片,在网站排版过程中,需要设置图片居中显示。通过CSS控制图片居中显示,包括水平居中与垂直居中。图片的水平居中比较简单,也比较常见。就是使用外边距margin:0 auto来控制水平居中: .cont img{d…
CSS实现隐藏滚动条并可以滚动内容 PetitQ HTML/CSS 2018-11-11 4.54K 0 6 当我们的内容超出了我们的div,往往会出现滚动条,影响美观,尤其是当我们在做一些导航菜单的时候,滚动条一出现就破坏了UI效果。我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。我们经常在前端开发中遇到这种情况…
CSS实现隐藏滚动条并可以滚动内容 PetitQ HTML/CSS 2018-11-11 4.54K 0 6 当我们的内容超出了我们的div,往往会出现滚动条,影响美观,尤其是当我们在做一些导航菜单的时候,滚动条一出现就破坏了UI效果。我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。我们经常在前端开发中遇到这种情况…
CSS实现边框透明的方法 PetitQ HTML/CSS 2019-10-11 3.55K 0 0 透明一般认为是一种颜色属性,但是并没有这个数值。我们找到了一种让边框实现透明的最佳方案,运用RGBA设置。 css可以使用RGBA设置边框透明,RGBA在RGB的基础上多了控制alpha透明度的参数,我们使用RGBA设置边框颜色同时…
CSS实现边框透明的方法 PetitQ HTML/CSS 2019-10-11 3.55K 0 0 透明一般认为是一种颜色属性,但是并没有这个数值。我们找到了一种让边框实现透明的最佳方案,运用RGBA设置。 css可以使用RGBA设置边框透明,RGBA在RGB的基础上多了控制alpha透明度的参数,我们使用RGBA设置边框颜色同时…
CSS实现背景图片透明和文字不透明效果 PetitQ HTML/CSS 2018-11-07 2.43K 0 2 项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果: 背景图 + 伪类 + flite:blur(3px) CSS代码 .demo1{ width: …
CSS实现背景图片透明和文字不透明效果 PetitQ HTML/CSS 2018-11-07 2.43K 0 2 项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果: 背景图 + 伪类 + flite:blur(3px) CSS代码 .demo1{ width: …
CSS完美实现iframe高度自适应(支持跨域) PetitQ HTML/CSS 2018-11-12 5.51K 0 2 Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多人都头疼万分。百度或是谷歌一下,…
CSS完美实现iframe高度自适应(支持跨域) PetitQ HTML/CSS 2018-11-12 5.51K 0 2 Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多人都头疼万分。百度或是谷歌一下,…
CSS元素隐藏后JS事件响应 PetitQ HTML/CSS 2019-3-09 2.60K 2 0 今天探讨下CSS元素隐藏后JS事件响应问题,在我们的发布的 常见CSS五种隐藏元素方式 一文中,我们分享了CSS隐藏元素的五中常见方法,介绍的也比较详细,这里就不累述了,开门见山直入主题,如果被隐藏的元素绑定了一些事件,我们执行了相…
CSS元素隐藏后JS事件响应 PetitQ HTML/CSS 2019-3-09 2.60K 2 0 今天探讨下CSS元素隐藏后JS事件响应问题,在我们的发布的 常见CSS五种隐藏元素方式 一文中,我们分享了CSS隐藏元素的五中常见方法,介绍的也比较详细,这里就不累述了,开门见山直入主题,如果被隐藏的元素绑定了一些事件,我们执行了相…
CSS修复图片指定尺寸缩小后模糊不清的问题 PetitQ HTML/CSS 2021-10-17 2.07K 0 0 最近在开发插件的过程中,需要设定支付宝当面付二维码的图片尺寸大小的问题。起初很简单地直接在 <img> 标签中设定 height 和 width 属性,但是很快发现,大小是改变了,但图片质量下滑很严重。这就比较奇怪了,因…
CSS修复图片指定尺寸缩小后模糊不清的问题 PetitQ HTML/CSS 2021-10-17 2.07K 0 0 最近在开发插件的过程中,需要设定支付宝当面付二维码的图片尺寸大小的问题。起初很简单地直接在 <img> 标签中设定 height 和 width 属性,但是很快发现,大小是改变了,但图片质量下滑很严重。这就比较奇怪了,因…