CSS
文章平均质量分 50
呼吸哥
这个作者很懒,什么都没留下…
展开
-
css容器背景透明,内部文字内容不透明
设置透明背景文字不透明,可采用的属性有rgba和IE的专属滤镜filter:Alpha,其兼容性如下图所示:针对IE6、7、8浏览器,我们可以采用fiter:Alpha,针对标准浏览器我们采用rgba,那么问题来了,IE9浏览器2个属性都支持,一起使用会重复降低不透明度...那么,如何只对IE6、7、8使用fiter:Alpha如何实现呢?方法如下:/* 只支持IE6、7、8 *...转载 2019-06-12 19:40:16 · 1034 阅读 · 0 评论 -
圣杯布局
【圣杯布局】在这里,实现了左(200px) 右(220px) 宽度固定,中间自适应,container部分高度保持一致。稍微说明一下:html代码中 middle部分首先要放在container的最前部分。然后是left,right1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到)2.middle部分 widt...转载 2019-05-20 14:40:17 · 146 阅读 · 0 评论 -
块元素垂直水平居中方法总结
方案1:position 元素已知宽度父元素设置为:position: relative;子元素设置为:position: absolute;距上50%,据左50%,然后减去元素自身宽度的距离就可以实现<div class="box"> <div class="content"> </div></div>.b...转载 2019-05-19 10:03:32 · 175 阅读 · 0 评论 -
滑动门的写法理解
在说明方法之前,先看一下效果图: 在border-radius出现之前,实现圆角效果使用的是滑动门。滑动门是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。 要想让滑动门适用于多种场合,左右两个角必须透明,以此露出背景颜色,若是左右压中间,左右角的透明部分露出的是中间的颜色,所以只能改成中间压左右,中间部分可以重叠,已达到宽...转载 2018-07-25 17:33:45 · 705 阅读 · 1 评论 -
我对双飞翼布局理解,以及双飞翼布局的好处
双飞翼布局对我这样的新手来说不太好理解,光靠死记不行,理解了以后就能轻易写出来。话不多说,请看代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双飞翼布局</title> <styl原创 2018-07-19 11:12:41 · 1202 阅读 · 1 评论 -
HTML结构中换行空格的解决
HTML源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格,空格和回车都会被显示为一个3px的空格。如下<div class="div1"><input type="text" class="input1"><input type="text" class="input2"></div>转载 2018-06-10 23:25:44 · 1160 阅读 · 0 评论 -
利用伪元素:before和:after插入图标
如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?常见的做法是在文字前再加一个标签用于存放图标,引入一个图标库(比如Iconfont-阿里巴巴矢量图标库)或者一张图标图片。本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。先了解伪元素:before和:after定义与语法定义:在被选元素的内容前面(before)和后面(after)插入内容。...转载 2018-05-24 16:27:02 · 20084 阅读 · 0 评论 -
纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如...转载 2018-05-24 16:25:38 · 1046 阅读 · 0 评论 -
div嵌套引起的margin-top不起作用
原文链接:div嵌套引起的margin-top不起作用现象:在一些浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。原因:盒子没有获得 haslayout 造成 margin-top 无效解决的几种办法,请根据实际情况选用:1、在父层div加上:overflow转载 2018-05-03 14:28:19 · 309 阅读 · 0 评论 -
双飞翼布局的好处和写法
双飞翼布局主要解决俩问题:1、三列布局,中间宽度自适应,两边定宽; 2、中间栏要在浏览器中优先展示渲染。三列布局的实现方式就是让三列外面套一个<div id="container">,如下代码:<div id="container"> <div id="center_div" class="column">主要内容</div&转载 2018-05-09 10:46:28 · 294 阅读 · 0 评论 -
css清浮动方法
为什么清除CSS浮动这么难?因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。我根据自己的经验总结8种清除浮动的方法(测试已通过 ie chrome firefox o转载 2016-09-08 15:30:32 · 299 阅读 · 0 评论 -
CSS浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。CSS 浮动请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边转载 2016-09-07 17:39:35 · 245 阅读 · 0 评论 -
css定位(position)
CSS 定位 (Positioning) CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另转载 2016-09-07 17:00:34 · 252 阅读 · 0 评论 -
CSS块元素和内联元素特征
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。 div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距转载 2016-09-07 16:19:51 · 456 阅读 · 0 评论 -
图片底部边距清除代码
img { border: 0; vertical-align: bottom; }原创 2019-06-12 21:45:21 · 346 阅读 · 0 评论