[css]推荐position定位

2009/08/13 20:20  |  分类:Css

使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。

  其实,要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。
  CSS中关于定位(position)是这样定义的:

  定位(position)允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个元素,或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述,而其位置由此元素的包含块来决定的。

  包含块(containing block)是格式编排发生的关联场景,例如,一个加粗的元素的包含块可以是该元素所出现的段落
在理解定位之前,首先,要先理解HTML文件的结构,例如有一个html文件内容如下:

CSS大部分能力是基于元素的“父子”关系,在图2的家族树中,每个元素都是另一个元素的“父”或者“子”或者2者都是。例如:body既是html的子元素,又是h1的父元素,而html就是h1的祖先,h1则是html的子孙。

全文阅读 »

关于IE8的css hack

2009/08/05 09:55  |  分类:Css

IE8出世已经很长时间了,一直都没工夫去用。最近升级了一下浏览器,说实话,我不是很喜欢,可能是也是习惯的原因吧。
对于前端开发的关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack:

.mytest{
color:#000000; /* FF,OP支持 */
color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和“_”的css hack;所以我们可以这样写hack */
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;

[css]hover伪类在ie6下的处理

2009/07/29 13:24  |  分类:Css
sss

sss

其实,问题很简单,就是hover伪类在IE6中得不到很好的支持,
因为IE6只支持css1,而在css1中hover伪类只能针对a标签来起作用,
看了一下淘宝的代码,他们的解决方法是:
首先,按照ie7/FF都支持的css2的写法来写。
其次针对IE6不支持css2再做特殊处理。也就是通过javascript来弥补ie6下的不足。
全文阅读 »

CSS使图片、文字垂直居中对齐

2009/07/27 09:43  |  分类:Css

我们一般会使用标记的align属性使其周围的文字按某种方式对齐,
但是align是外观属性,在Web标准盛行的今天,这个属性已经是不推荐使用了。

程序代码

全文阅读 »

10个很有用但是IE浏览器不支持的CSS属性

2009/07/20 21:57  |  分类:Css

尽管我们对CSS已经非常熟悉,应付日常的工作或在各个浏览器中搞定CSS的兼容性已经很得心应手,但是并不是所有的CSS属性都是那么的常用。在本文中,让我们看看10个可能非常有用但是在该死的IE浏览器中(主要是IE6和IE7)却不能使用的CSS属性。看完了该文,你可能会更加讨厌IE浏览器吧。

(请注意,本文发表时尚未测试这些属性在IE8中的表现。我稍后会做一个测试页面,用来测试这些属性在所以IE浏览器中的表现。)
1. Outline在调试CSS问题的时候,我常常在指定元素上添加border来精确的查看该元素会发生什么并帮助确定问题的来源。这常常是有效的,因为它可以在布局上给我更加具体的可视性。但是如果是块级元素,这可能会发生某些错误——在任何块级元素上添加1px的边框很可能会影响到布局,它会让这个元素的宽度额外增加2px。
outline 属性是完美的替代者,因为它可以在不影响文档流的情况下呈现该对象。但是IE6 和IE7 不支持 outline 属性,所以,它不能在这两个浏览器中用于调试。
2. Inherit (值)在CSS开发中有很多这样的例子:通过在特定元素上设置某些样式来告诉该元素来“继承”它父级元素的所有已添加的属性,这样你就可以避免相当多的键盘输入。
这可以通过设置 inherit 来很容易的实现。这可能很有用。比如,当重写 background 属性的时候,常常会有很多的文字在该属性中(色彩、图片的URL地址、位置等)。所以,与其重新写这些值,你可能仅仅想要考虑中的元素和其父级元素有相同的背景属性,一个 inherit 值就可以搞定一切——这显然大大的节省了键盘输入。
不幸的是, inherit 值在IE6和IE7不被支持(除了用于 direction (文字方向) 和 visibility 属性)。
某人说,代码就像女人的裙子——越短越好,看来IE会阻碍我们这个愿望的实现。
全文阅读 »

CSS:表单元素不继承body的字体属性

2009/07/17 11:27  |  分类:Css

我想大家都是在body中加样式来控制全局字体的样式,像字体、大小、颜色等。这些写可以减少代码,其实并不然,像表单里面元素就无法继承body的字体属性。

下面是BODY样式写法:

表单里文本框的字面和表格字体并不是一样的效果,为什么会这样呢?是因为所有的表单元素都不继承body的字体属性,需要单独设置,如:

input, label, select, option, textarea, button, fieldset, legend {

font-size:12px;

}

全文阅读 »

首先,我们需要预先制作一个图标文件,大小为16*16像素。文件扩展名为ico,然后上传到相应目录中。在HTML源文件“<head></head>”之间添加如下代码:<Link Rel=”ICON NAME” href=”http://图片的地址(注意与刚才的目录对应)”>,当然如果用户使用IE5或以上版本浏览时,就更简单了,只需将图片上传到网站根目录下,即可自动识别!转自渔人码头

一个倒数计时效果

2009/07/14 21:24  |  分类:Css

<DIV id=time_conter 
style=”DISPLAY: none; bgcolor:#ccffff; FONT-WEIGHT: bold; WIDTH: 100%; COLOR: #cc0000; PADDING-TOP: 150px; FONT-FAMILY: arial; TEXT-ALIGN: center;”>

<P style=”font-size:12px;”>离国庆节倒计时还有</P>


<DIV style=”FONT-SIZE: 38px”><SPAN id=h></SPAN>小时<SPAN id=m></SPAN>分<SPAN 
id=s></SPAN>秒<SPAN id=ms></SPAN>微秒</DIV>
</DIV>

全文阅读 »

关于图文混合排版的一个补充

2009/07/10 16:01  |  分类:Css

期间大家肯定为这个问题困扰过,就是图文混合居中的排版方式。

渔人码头这里有一个方法:

XML/HTML代码:

  1. <div class=“ver-center”>
  2. <span class=“edge”></span>
  3. <span class=“container”>
  4. <img src=“http://www.css88.com/attachments/month_0805/b2008526221238.jpg” alt=“” />
  5. <span class=“bli”>妈妈对我说,这个无论你加了多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少个字,他都是居中的,很棒哦~</span>
  6. </span>
  7. </div>

全文阅读 »

关于css的书写顺序

2009/07/10 10:40  |  分类:Css

其实这个问题在于WEB前端的的开发者每天都会遇到的事情,大家肯定经过长期的工作建立了自己的一套CSS书写习惯。其实之前也在CSS书写上比较没有规律性,想到哪写到哪里,但是这样的弊端就是在以后的修改中很难迅速的定位到要修改的位置。从而降低了开发的便捷性,影响了工作进度。

今天我也大概总结一下:

全文阅读 »

Pages: Prev 1 2 3 4 5 6 7 8 ...30 31 32 Next