标签:CSS

CSS层叠样式表(英文全称:Cascading Style Sheets)用来格式化HTML的呈现样式,CSS可以有效地对页面的布局、字体、颜色、背景和其它效果实现精确的控制,是能够真正做到网页表现与内容分离的一种样式设计语言。

Bootstrap4 Carousel轮播上下滚动、淡入淡出效果

Bootstrap4 Carousel轮播上下滚动、淡入淡出效果

阅读(3548) 评论(1)

Bootstrap4 Carousel轮播非常简单好用,默认左右滚动效果,但通常的需求是三种情况:左右滚动(水平滚动)、上下滚动(垂直滚动)、淡入淡出。 通过增加少量的CSS,就可以为Bootstrap4 Carousel轮播增加上下滚动(垂直滚动)、淡入淡出效果。 新增的CSS如下: .carou...

CSS未知高度元素垂直居中解决方法

CSS未知高度元素垂直居中解决方法

阅读(461) 评论(0)

通常产品列表,我们希望产品图片是在一个盒子内垂直居中,如果图片尺寸未知,且希望保持原来的宽高比例,就涉及到未知高度元素垂直居中的问题。 如果不用考虑IE6/7,问题会非常简单,display: table-cell 可以将元素以表格单元格的形式呈现,那么垂直居中就不是问题...

清除网络运营商植入广告CSS代码

清除网络运营商植入广告CSS代码

阅读(689) 评论(0)

前面我发表了屏蔽无良网络运营商植入广告jQuery代码,但是有一个缺陷,广告仍然会显示一瞬间,虽然一眨眼的功夫就消失了,给人的感觉还是不很好。 所以,我写了一段CSS代码来屏蔽: #colophon ~ * { display: none !important; width: 0 !important; height: 0 !impo...

-webkit-appearance导致checkbox复选框消失

-webkit-appearance导致checkbox复选框消失

阅读(1268) 评论(0)

-webkit-appearance: none会清除WebKit引擎浏览器默认样式,有时会很有用,但使用这个样式后会导致checkbox复选框和radio单选框消失。 解决办法: input[type="checkbox"] { -webkit-appearance: checkbox; } input[type="radio"] { -webkit-appearance: radio; } 添...

CSS截断文字技巧

CSS截断文字技巧

阅读(593) 评论(0)

在响应式设计中,经常需要将文字截断,例如一个两列水平排列的列表,通常不希望li的内容换行,当视图尺寸过小时内容就会被挤到第二行,常用的截断方法为: li { white-space: nowrap; overflow: hidden; } 该方法有一个问题,经常会遇到最后一个文字被截断一半,很难...

CSS清除点击元素移动端蓝色边框

CSS清除点击元素移动端蓝色边框

阅读(803) 评论(0)

众所周知,表单元素和超链接获得焦点时会呈现出难看的边框,可以通过CSS样式清除: *:focus { outline: none; } 然而今天要说的是移动端点击元素出现蓝色边框,不论什么元素,只要点击就会有蓝色边框。 清除方法: * { -webkit-tap-highlight-color: transparent; }

pre标签内容溢出父容器

pre标签内容溢出父容器

阅读(993) 评论(0)

<pre>标签可定义预格式化的文本,被包围在pre元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。 通常在包含一段代码时,我们会用到<pre>标签,与<code>标签的区别是<pre>是块级的,而<code>是行内元素。 之所以使用<...

box-sizing解决自适应布局容器宽度问题

box-sizing解决自适应布局容器宽度问题

阅读(1008) 评论(0)

在使用box-sizing属性前先要了解一下盒模型: 标准盒模型:内容宽度不包含内边距、边框、外边距 IE盒模型:内容宽度包含内边距、边框,但不包含外边距。 box-sizing属性的值: content-box,默认值,遵从标准盒模型; border-box,使用IE盒模型; inherit,继承父元...