随笔分类 - DIV+CSS
Page layout and style.
摘要:1白色 #FFFFFF 2红色 #FF0000 3绿色 #00FF00 4蓝色 #0000FF 5牡丹红 #FF00FF 6青色 #00FFFF 7黄色 #FFFF00 8黑色 #000000 9海蓝 #70DB93 10 巧克力色 #5C3317 11 蓝紫色 #9F5F9F 12 黄铜色 #B5
阅读全文
摘要:最近做项目,经常遇到IE7以下浏览器中。一些悬浮框被一些元素遮挡的问题,这些元素一般都是设置了position的。问题的根本在不是被设置绝对定位的元素上,而是在设置了相对定位的父元素上。我查阅了一些资料。当设置了相对定位的父元素如果没有设置z-index属性,当后面有元素设置position:relative的时候,则后面的元素就会遮挡掉前面的元素,不管前面的元素设置了多大的z-index解决的方法我总结一下1.对遮挡元素中设置z-index:0;初始化掉。2.在被遮挡的父元素中,也就是设置了相对定位的元素中设置z-index属性,最好比遮挡元素要大一些。在平时编写中,编写了position:
阅读全文
摘要:8.固定页脚在网页里添加固定的页脚其实非常简单,并且也很实用。有些网站的页脚设计得很漂亮,可以给网站呈现出一个完美的结尾。#footer { position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background: #444; } /* IE 6 */* html #footer { position: absolute; top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? docu...
阅读全文
摘要:擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现。无需使用表格、尽可能少的使用图片。如果你是个名副其实的高手,你可以快速把最新和最伟大的技术应用到你的项目中,比如媒体查询、过渡、滤镜、转换等。虽然这些都是一个真正的CSS高手所具备的,但CSS很少被人单独拿出来讨论,或者用它去评估某个人的技能。有趣的是,我们很少这样去评价其他语言。Rails开发人员并不会因为其代码比较规范,就认为他是一名优秀的开发人员。这仅仅是个基准。当然,他的代码得必须规范。另外,还需集合其他方面考虑,比如代码是否可读?是否容易修改或扩展……这都是些很自然的问题,CSS和它们并没有什么不同之
阅读全文
摘要:1.全角空格(并不等同于两个 ,特别是希望两个中文文字的空格时): 2.元:¥
阅读全文
摘要:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-
阅读全文
摘要:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-
阅读全文
摘要:影响版本这个bug影响: IE7, IE6症状浮动元素最后一个字母重复描述IE6和IE7中浮动元素的最后一个字符重复,让我们看一下例子:例子可用的例子在 separate pageHTMLCode:<div> <p> <span>A</span> <span>B</span> <span>C</span> </p> </div> CSSCode:div { width: 100px; } p { margin-right: 1px; } span { float: left;
阅读全文
摘要:
阅读全文
摘要:方案一:纯CSS<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; char
阅读全文
摘要:在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”,根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳,供大家参考。方法整理来源于万福的网络。1、将图片转换为块级对象即,设置img为:display:block;在本例中添加一组CSS代码:#sub img {display:block;}2、设置图片的垂直对齐方式即设置图片的vertical-align属性为“top,text-top,bottom,text-bot
阅读全文
摘要:A、去掉链接点击后留下的虚线方法一:在IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=”true” 属性即可,但这个属性是IE私有的,Firefox是不认的。欢迎来到博客园(加了hidefocus属性)Firefox的处理方法比较符合标准,只需要在样式里设置a:...
阅读全文
摘要:关键,文字要包含在label标签中,并设置行高,否则文字会与文本框的顶端对齐。文本框要设置vertical-align:middle;否则文本框与button顶端对齐。button中文字垂直居中,要设置高和行高,行高要小于高。<html><head><style type='text/css'>LABEL{LINE-HEIGHT: 20px;HEIGHT: 20px}.button{font-size:12px;text-align:center;padding:0px;vertical-align:middle ;line-height:2
阅读全文
摘要:抛掉对 IE/Mac 的支持之后,新的清除浮动方法:/* new clearfix */.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html .clearfix { zoom: 1; } /* IE6 */*:first-child+html .clearfix { zoom: 1; } /* IE7 */说明:IE6 和 IE7 都不支持 :after 这个伪类,因此需要后面两条来触发IE6/7的haslayout
阅读全文
摘要:引自:http://www.jb51.net/css/34227.html1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致; 2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示; 3.当绝对定位层的邻近浮动层的宽度等于父层宽度时,以及没有清除浮动时,IE6不显示绝对定位层,IE7/FF显示; 4.当绝对定位层的邻近浮动层的宽度等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示; 要解决这个BUG的方法也很简单,让绝对定位层不挨着浮动层放置就好了,还有个更简单的方法,在绝对定位元
阅读全文
摘要:在FF中被渲染的字体永远都是Microsoft 雅黑(如果不改FF的设置的话),如果IE中设置的是非雅黑字体的话,那么它们会因为不同字体的原因,产生不一样的字体效果,往往都是差那么1-2个像素,特别是如果想设置背景小图标的话,总会感觉IE或者FF其中一个没有对齐。今天看了CSSZenGarden的Css,突然想到行高是否可以解决,结果不行。然后,发现如果把背景图片设置成left center的话,再把line-height和height设成一样的,至少在外观上看起来,两者都是正对到中央的,不防可以作为一种解决办法。不过,我还是觉得,把FF字体换掉,要好得多。
阅读全文
摘要:隐藏文字的buttoninput.button{width:114px;height:37px;border: none;background: transparent url(images/submit_btn.gif) no-repeat center;overflow: hidden;text-indent: -999px;/*FOR IE*/font-size: 0;display:block;line-height: 0;}
阅读全文
摘要:1. img的src刷新问题【分析说明】先看一下代码:<img id="pic" onclick= "this.src= 'a.jpg'" src="aa.jpg" style="cursor: pointer"/>在IE 下,这段代码可以用来刷新图片,但在FireFox下不行。主要是缓存问题。【兼容处理】在地址后面加个随机数就解决了: <img id="pic" onclick= "javascript:this.src=this.src+'
阅读全文
摘要:写了将近两天了,不断的测试,不断的改,终于还是写出来了。高手请勿见笑。确实花了不好时间,囧~~~现在来说一下这些撇脚代码(还可以大大的优化)的功能描述,第一个是修改元素的样式即元素的style方法,传入的style可以是对象,也可以是字符串。有自己的格式。如果元素已经有定义过的样式,比如说已经定义过boder了,现在又传入一个border,那么新添加的样式会覆盖掉原有样式。别问我为什么要用这么麻烦的代码去覆盖,而不是直接添在样式属性的最后面。答案很简单,重复的东西,让我看了不爽~~—_—~~然后第二个方法添加的元素的class,即元素的样式类。如果类名重复,将只留一个。然后,然后就没啦~~后面
阅读全文
摘要:function addClass(currNode, newClass){ var oldClass,newClass; oldClass = currNode.getAttribute("class") || currNode.getAttribute("className"); if(oldClass !== null) {oldClass = oldClass.split(" ");newClass = newClass.split(" ");newClass = mergeArray(newClass,o
阅读全文