![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 75
HelloStarnger
这个作者很懒,什么都没留下…
展开
-
CSS 经典技巧
CSS字体属性简写规则一般用CSS设定字体属性是这样做的:1font-weight:bold; 2font-style: italic; 3font-varient: small-caps;4font-size: 1em;转载 2012-04-04 19:32:36 · 165 阅读 · 0 评论 -
如何在IE6中正常显示透明PNG
虽然网络上流传着一些使用JavaScript库函数来解决IE6中正常显示透明PNG的问题,但事实上,你没必要这么麻烦。只需要在CSS中加一段简单的代码就可以解决透明PNG在IE6浏览器中的显示问题。所需工具任意一款可以编辑CSS文件的文档编辑器解决方法以及代码首先,在HTML文档中插入这个png图片(与普通图片插入方式相同)以下为引用的内容:原创 2012-04-12 09:21:57 · 224 阅读 · 0 评论 -
iframe透明问题
1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true。2.在 iframe 内容源文档,background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent。具体步骤: 1. 包含框架页的代码。2.transparent.htm页的代码。特别说明本例主要是ifra原创 2012-04-13 17:07:48 · 323 阅读 · 0 评论 -
CSS中zoom的作用
1、检查页面的标签是否闭合不要小看这条,也许折腾了你两天都没有解决的 CSS BUG 问题,却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的,而他们很容易犯此类问题。快捷提示:可以用 Dreamweaver 打开文件检查,一般没有闭合的标签,会黄色背景高亮。 2、样式排除法有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的原创 2012-04-14 09:00:09 · 179 阅读 · 0 评论 -
纯CSS打造兼容各种浏览器的几何图形
生成各种形状 .shadow { padding:2px; margin:2px; } .shadow1 div { display:inline-block;原创 2012-05-01 17:46:16 · 218 阅读 · 0 评论 -
CSS命名及书写规范
一.文件命名规范全局样式:global.css;框架布局:layout.css;字体样式:font.css;链接样式:link.css;打印样式:print.css;二.常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer版 权:copyright 导 航:menu主导航:mainMenu原创 2012-04-20 14:04:39 · 226 阅读 · 0 评论 -
自适应网页设计
一、允许网页宽度自动调整"自适应网页设计"到底是怎么做到的?其实并不难。首先,在网页代码的头部,加入一行viewport元标签。viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置原创 2012-06-08 15:14:45 · 428 阅读 · 0 评论 -
让超出的文字显示为省略号
对大片文字的显示样式进行限制是CSS中最常用的地方之一,比如以下几种情况:强制不换行:1div {2 white-space:nowrap;3}自动换行:1div{ 2 w转载 2012-04-04 19:29:49 · 208 阅读 · 0 评论 -
25条div+CSS编程提醒及小技巧整理
1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。3、一个兼容性调整(IE和Mozilla)的笨办法: 初学可能会碰到这样一个情况:同样一个标签的原创 2012-04-06 09:57:24 · 204 阅读 · 0 评论 -
css中 Span 元素的 width 属性无效果原因及多种解决方案
先运行下程序看下: 123 输出:123可以看到 span会自动根据包含的内容来变化宽度这是因为:对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素) width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6,如果浏览器运行于标准兼容模式下,内联元素会原创 2012-04-06 10:03:26 · 209 阅读 · 0 评论 -
CSS自定义滚动条样式
IE下的滚动条样式scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴转载 2012-04-04 19:42:51 · 250 阅读 · 0 评论 -
CSS 使网页变灰
如果需要使网站变灰,在网页上加层滤镜就可以了。1html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }或者:1html { FILTER: gray}有的时候加上后可能不生效,是因为转载 2012-04-04 19:34:15 · 158 阅读 · 0 评论 -
:nth-child
当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们,就能写出越好的CSS规则!在这些简单的”秘方”(实际上是表达式)中我将重复的使用一个简单的列表并随即选择数字。但是很明显很容易改变它们以获得类似的选择器。只选择第五个元素123li:nth-child(5){ color: green;}转载 2012-04-04 19:40:49 · 206 阅读 · 0 评论 -
通过条件注释hack创建只对IE生效的样式<!--[if IE]>
对于从事web开发的人来说,如何解决IE与其他浏览器样式的一致性一直是一件头痛的事情,特别是IE还分出了好几个版本你,目前最新的是IE8,用的最多的还是那个早该淘汰的IE6,同一种写法的css在IE各个版本之间也会出现不同的结果...对于这种问题有人使用hack来解决,今天要说的就是通过条件注释来选择与浏览器相对的样式表,条件注释不只是对加载css起作用,对于加载javascript同样有效。转载 2012-04-05 10:22:54 · 347 阅读 · 0 评论 -
7个你不可不知的IE hack(涵盖IE6\IE7\IE8)
IE6以下版本的IE,明河就不予说明了,意义不是太大。一.适用于IE6的hack1.*html {} 这应该是使用最多的IE6 hack,也是明河推荐使用的hack。这是个用于测试IE6 hack的层*html .demo-1{ background-color:#0CF;} 在IE6下你将看到一个蓝色背景的层。2. .demo-2{_backgrou原创 2012-04-05 13:47:49 · 169 阅读 · 0 评论 -
IE滤镜实现透明度/阴影/渐变等特效
CSS3是当下非常火的一个话题,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫无作为,很多有经验的开发者都听知道IE的滤镜,看看下面的内容将告诉大家,IE是如何通过这些滤镜,实现CSS3效果的。透明度最为开发者所熟知的滤镜之一。#myElement { opacity转载 2012-04-04 19:27:17 · 175 阅读 · 0 评论 -
overflow 属性介绍
overflow 属性规定如何处理如何处理不符合元素框的内容。用法如下:Object.style.overflow=visible|hidden|scroll|auto。参数介绍:visible:内容不会被修剪,会呈现在元素框之外。hidden:内容会被修剪,但是浏览器不会显示供查看内容的滚动条。scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。auto:由浏览器决转载 2012-04-04 19:31:09 · 223 阅读 · 0 评论 -
em 与 px
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因为转载 2012-04-04 19:23:21 · 194 阅读 · 0 评论 -
CSS 常见问题的解决
当你在一个浏览器里面做好,在其他浏览器里面却完全不是那么回事情。很多时候,我们就只是去修补下,或者利用各个浏览器对代码支持的不一致,进行针对各个浏览器进行不同的定义。其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决。文字本身的大小不兼容。同样是 font-size:14px 的宋体文字,在不同浏览器下占的空间转载 2012-04-04 19:35:14 · 170 阅读 · 0 评论 -
:nth-child 和 :nth-type-of 的区别
假设有以下 HTML 代码: p>Little/p> p>Piggy/p> /section>以下代码得到的效果一样:p:nth-child(2){color:red;} p:nth-of-type(2){color:red;}结果虽然相同,但是两者本身还是有所区别的。:nth-child 选择符 从词义上来说,表示转载 2012-04-04 19:39:40 · 159 阅读 · 0 评论 -
2013年10大网页设计趋势 响应式设计居首
2013年网页设计方面的10大趋势,其中包括响应式设计、Web字体、拒绝Flash、大背景图和留白、社交分享入口、冷色系、拟物化设计将不再时髦等,以下为TNW总结的十大趋势:1、响应式设计,一个样式适配多尺寸屏幕2、重视字体的选择,使用Web字体3、拒绝Flash,使用其他任何可能的替代技术4、苹果iOS的拟物化设计将不再时髦5、使用巨大的背景图构造大气的视觉效果6转载 2013-03-16 09:41:40 · 376 阅读 · 0 评论