
CSS
文章平均质量分 60
qfgg3
这个作者很懒,什么都没留下…
展开
-
【转】关于div层的间隙, 还有img与div的间隙
今天遇到一个问题 就是上下两个层之间有空白间隙(层内放的是图片)解决方法 找到上面的div中的图片代码所在位置,为其设定属性style="display:block",问题解决。或者img下边有div(中有图片)设置img(div上面的object)其设定属性style="display:block",问题ok。display:block 意思是:让对象成为块级元素(比如转载 2016-05-26 15:55:55 · 509 阅读 · 0 评论 -
Pure CSS for multiline truncation with ellipsis
Pure CSS for multiline truncation with ellipsis Natalia Onischuk in Code & Front End*Update – We just launched The Side Project Accelerator, an 8-week online program to share转载 2016-12-06 16:07:16 · 365 阅读 · 0 评论 -
利用HTML和CSS实现常见的布局
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: in转载 2016-07-04 23:10:41 · 285 阅读 · 0 评论 -
CSS vertical-align属性的用法
vertical-align的定义W3C上对vertical-align的定义:vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。文本通常根据不可见的基线进行对齐的,而字母的底部位于基线之上。转载 2016-07-04 22:51:49 · 477 阅读 · 0 评论 -
background-position 用法详细介绍
语法: background-position : length || length background-position : position || position 取值: length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | bottom | left | center | ri转载 2016-06-30 21:19:19 · 209 阅读 · 0 评论 -
CSS 元素垂直居中的 6种方法
转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/2012年03月30日 ⁄ Web设计 ⁄ 评论数 1 ⁄ 被围观 306+利用CSS进行元素转载 2016-06-30 20:29:32 · 481 阅读 · 0 评论 -
老生长谈:CSS实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧?要实现这种布局,也算比较简单。我们先给出html结构:12345div转载 2016-06-29 21:47:46 · 390 阅读 · 0 评论 -
【转】CSS3 @font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及转载 2016-06-05 15:08:12 · 267 阅读 · 0 评论 -
CSS 文本域和按钮对齐不一致解决方案
文字要包含在label标签中,并设置行高,否则文字会与文本框的顶 端对齐。文本框要设置vertical-align:middle;否则文本框与button顶端对齐。button中文字垂直居中,要设置高和行高,行高要小于高。 对input标记设定样式,代码如下: //HTML 代码 复制代码代码如下: //CSS 代码转载 2016-06-17 16:43:17 · 1056 阅读 · 0 评论 -
【转】纯CSS3制作的Tab选项卡
在制作CSS TAB选项卡的时候一般都会用上JS,但CSS3的出现却可以实现无JS的方法,下面我们一起看看用纯CSS来制作一个选项卡的方法。使用纯CSS3来制作Tab的好处除了不需要使用jQuery外,还支持添加一些细微的CSS3交互,使Tab展示效果不错。PS:另外设计达人网还介绍过另一种纯CSS3 Tab的实现,请查看《实用CSS3属性之 :target伪类实现Tab切换效果》转载 2016-06-06 21:34:18 · 1676 阅读 · 0 评论 -
【转】@font-face中#iefix的详解
在@font-face处理兼容中出现了一个#iefix这个东东?到底是神马东西呢?具体如下: 1、@font-face 与 EOT 格式之所以把它们放到一起是因为首个实现 @font-face 和 EOT 的是同一家公司 - 微软。早在九十年代 CSS 就有了自定义字体的语法,IE4是首个实现此语法的浏览器,没错,就是IE。不过,字体格式只能是微软自己开发的转载 2016-06-05 13:12:25 · 661 阅读 · 0 评论 -
【转】CSS3的自定义字体@font-face:如何将icon变成字体?
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法。为什么要将icon做成字体?在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求。那么我们就转载 2016-06-05 12:05:49 · 1896 阅读 · 0 评论 -
【转】基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。网页元素应用上那些与表格相关的display属性值后,能够模仿出与转载 2016-06-05 11:51:19 · 351 阅读 · 0 评论 -
[译]CSS-理解百分比的background-position
通过这篇文章能够深刻理解 background-position 的百分比通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的 background-position 值来解决一些问题。通常使用方法摆放图片通常在容器里摆放图片是给出具体图片的 top 、 left 相对容器的 top 、 left 的值。在CSS中很容易做翻译 2016-05-29 16:57:56 · 389 阅读 · 0 评论 -
【转】margin:0 auto 与 text-align:center 的区别
基本概念:1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性。支持值 justify。 Example: div { text-align: left; } //文本居左对齐 注释:所有浏览器都支持转载 2016-05-26 19:40:11 · 412 阅读 · 0 评论 -
【转】一个DIV,如何设置多个背景色(可能是图片,可能是渐变,可能是图片与渐变的混合)
最近在做一个页面,有这么一个需求:页面中有一个 按钮,要求这个按钮既有一张背景图,同时它的背景又要有渐变的效果。换作以前,肯定想都不想,直接用两个DIV去实现:一个用来实现渐变,另一个用来指定背景,再通过float或者定位来实现想要的效果。但是这次,我就在想能不能只用一个DIV就可以实现了。百度了一下,在知乎上发现了这个帖子:http://www.zhihu.com/que转载 2016-05-26 19:17:47 · 1177 阅读 · 0 评论 -
隐藏scrollbar的CSS
.out{ width: 200px; height: 150px; border: 2px solid red; overflow: hidden;}.in{ border: 2px solid blue; overflow: auto; width: 100%; height: 100%; padding-right: 20原创 2017-03-07 09:36:14 · 491 阅读 · 0 评论