如题,要设它们的高度为0,不是一件容易的事,可看过这篇文章之后,就是灰常容易的事。

我们必须要设的东西有:

height:0px;
font-size:0px;
line-height:0px;

然后就可以搞定啦。有时候或许还需要在标签里面加注释

<li><!–noHeight–></li>

 

通常我们把ul和li的margin和padding都设为0,宽高度都正常,可在IE6、7里,那li就是有间距

此时,要消去间距,我们可以在每个li里面设 vertical-align: bottom; 灰常有效。

 

网上搜了一下,个人再总结一下。

id是有含义的,一般用于区分结构和内容,有特定的意义。而class就只有一个外壳,就像一件衣服,披到谁身上都是一个样,没有像id拥有的意义。虽然很多时候用class比id方便,但是还是得按标准语义来。

id和class等选择器是有权重之分的,就像:important的权重是1000,id的权重是100,class的权重是10,标签选择器就是1 ……

id与class的使用技巧:

1、一般大结构、特殊身份的,就用id,比如:头部、尾部、导航、边栏、主体内容等。

2、重用性强的用class,或者可以总结成一份reset.css,这里是笔者自己目前最新的reset.css

3、一般按级别是id包含class,仅仅一般,特殊时候特殊处理。

4、命名时子级id或类包含父级id或class(全称或缩写)作为开头,这样级别就分明了。

id与class命名规则:

页头
header
登录条
loginBar
标志
logo
侧栏
sideBar
主导航 mainNav
导航
nav
子导航
subNav
边导航 sidebar
子菜单
subMenu
菜单
menu
滚动
scroll
页面主体
main
内容
content
标签页
tab
文章列表
list
提示信息
msg
小技巧
tips
栏目标题
title
加入
joinus
指南
guild
服务
service
热点
hot
新闻
news
下载
download
注册
regsiter
状态
status
按钮
btn
投票
vote
合作伙伴
partner
友情链接
friendLink
页脚
footer
版权
copyRight
商标 label
外套 wrap 整个页面 content 标题
title
广告
Banner 搜索 search 左导航
leftsideBar
标语 Banner 菜单内容 menu1Content
右导航
rightsideBar
菜单容量 menuContainer 边导航图标 sidebarIcon 注释 note
面包屑 breadCrumb 容器 container 内容 content
登陆 login 功能区 shop 当前的 current
注册 logon 关注  follow

 

 

一般来说,直接设input的border为none,在IE6下是没作用的,border还是在的。

这是,我们要设一下background才行,无论设什么都好,只要设成你想要的效果,即使是none也要设,这样border:none才会有效

 

解决办法:
1、先定义一个CSS规则,然后this.className=”
2、document.getElementByIdx_x(“a”).style.cssText=”border-collapse:collapse;border-spacing:1;border:1 solid #0B2565;background-color:white;color:black;text-align=’center’;”
JS操作css的float属性的特殊写法
使用js操作css属性的写法是有一定的规律的:
1、对于没有中划线的css属性一般直接使用style.属性名即可。
如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。
2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。
如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等。
这个规律我想大多数的前端开发者也都熟知。但在css中有一个特殊的属性其js使用方法比较特殊。
这个特殊的属性就是:float。我们不能直接使用obj.style.float来使用,这样操作是无效的。
其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器:obj.style.cssFloat。

CSS 和 JavaScript 标签 style 属性对照表:(ps:以下只是其中一种,仍没考虑兼容性

盒子标签和属性对照
CSS语法(不区分大小写)	JavaScript语法(区分大小写)
border			border
border-bottom		borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color		borderColor
border-left		borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right		borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style		borderStyle
border-top		borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width		borderWidth
clear			clear
float			floatStyle
margin			margin
margin-bottom		marginBottom
margin-left		marginLeft
margin-right		marginRight
margin-top		marginTop
padding			padding
padding-bottom		paddingBottom
padding-left		paddingLeft
padding-right		paddingRight
padding-top		paddingTop

颜色和背景标签和属性对照
CSS 语法(不区分大小写)	JavaScript 语法(区分大小写)
background		background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
color			color

样式标签和属性对照
CSS语法(不区分大小写)	JavaScript 语法(区分大小写)
display			display
list-style-type		listStyleType
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style		listStyle
white-space		whiteSpace

文字样式标签和属性对照
CSS 语法(不区分大小写)	JavaScript 语法(区分大小写)
font			font
font-family		fontFamily
font-size		fontSize
font-style		fontStyle
font-variant		fontVariant
font-weight		fontWeight

文本标签和属性对照
CSS 语法(不区分大小写)	JavaScript 语法(区分大小写)
letter-spacing		letterSpacing
line-break		lineBreak
line-height		lineHeight
text-align		textAlign
text-decoration		textDecoration
text-indent		textIndent
text-justify		textJustify
text-transform		textTransform
vertical-align		verticalAlign

转自:http://blog.sina.com.cn/s/blog_7de0b6230100z55x.html

 

相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下。当然,兼容所有浏览器的滚动条样式目前是不存在的。

IE下的滚动条样式

IE是最早提供滚动条的样式支持,嗯,好多年了,但是其它浏览器一直没有支持,IE独孤求败了。

这些样式规则很简单:

  • scrollbar-arrow-color: color; /*三角箭头的颜色*/
  • scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/
  • scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
  • scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/
  • scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
  • scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
  • scrollbar-track-color: color; /*立体滚动条背景颜色*/
  • scrollbar-base-color:color; /*滚动条的基色*/

大概就这些,你也可以定义cursor来定义滚动条的鼠标手势。

这里,很久以前danger做了个基于Flash的可视化工具,简单但是好用:

选中CSS选项即可自动生成CSS样式,这里不再过多的介绍了。嗯,多谢大猫老湿推荐。

webkit的自定义滚动条样式

yes,这里才是今天要重点介绍的。

从上一部分的样式名中就可以看到,IE只能定义相关部分的color等属性,这样太不灵活了。

webkit最近实现了对滚动条的支持,先看一个简单的demo:

不过,webkit不再是用简单的几个CSS属性,而是一坨的CSS伪元素

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-button 滚动条两端的按钮
  • ::-webkit-scrollbar-track 外层轨道
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  • ::-webkit-scrollbar-thumb (拖动条?滑块?滚动条里面可以拖动的那个,肿么翻译好呢?)
  • ::-webkit-scrollbar-corner 边角
  • ::-webkit-resizer 定义右下角拖动块的样式

通过这些伪元素,可以完全的重写一个网站的滚动条样式。

当然webkit提供的不止这些,还有很多伪类,可以更丰富滚动条样式:

  • :horizontal – horizontal伪类应用于水平方向的滚动条
  • :vertical – vertical伪类应用于竖直方向的滚动条
  • :decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)
  • :increment – increment伪类和decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)
  • :start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
  • :end – 类似于start伪类,标识对象是否放到滑块的后面。
  • :double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。
  • :single-button – 类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。
  • :no-button – 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。
  • :corner-present – 用于所有滚动条轨道,指示滚动条圆角是否显示。
  • :window-inactive – 用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

另外,:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

关于具体的demo,这里不再做了,网上已经有很多demo可以参考,比如,webkit官方的这个,具体的线上项目中也有现成的例子,比如,QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。

值得一提的是,webkit的这个伪类和伪元素的实现很强大,虽然类目有些多,但是我们可以把滚动条当成一个页面元素来定义,也差不多可以用上一些高级的CSS3属性,比如渐变、圆角、RGBa等等,当然有些地方也可以用图片,然后图片也可以转换成Base64,总之,可以尽情发挥了。

PS:中间部分术语翻译不到位,欢迎斧正。

转自:http://www.qianduan.net/css-custom-scroll-bar-style.html/comment-page-2#comments 前端观察

参考文章:

 

之前说到CSS Expression,然后网上查了一查,发现这是属于CSS中的行为。

众所周知,网页三要素就是结构,表现,行为,也就是说HTML是结构,CSS是表现,JavaScript是行为。

这里所说的CSS中的行为,就是说,在CSS里面使用JavaScript语言。

CSS Expression和Behavior属于CSS中的行为,也就是说,通过这两种方法,我们可以在CSS里面使用JS语言。

其中Expression的用法可以看这里 ,而Behavior的用法大概是这样的:

behavior:url(css/PIE.htc);

而JS语言就写在了htc文件里面。里面大概可以像这个例子changeColor.htc:

<public:attach event="onmouseover" onevent="before()" />
<public:attach event="onmouseout" onevent="after()" />

<script type="text/javascript">
    function before(){
    this.style.backgroundColor="#7FFFAA";
    this.style.color="red";
    this.style.cursor="pointer";
    }
    function after(){
    this.style.backgroundColor="";
    this.style.color="";
    this.style.cursor="";
    }
</script>

然后在CSS文件里面这样用

li{behavior:url(css/changeColor.htc);}

expression和behavior的重要说明

1:只有IE才可以使用

css中的行为,expression和behavior只有IE才有效,FireFox无效,而且IE也只有IE5以上的版本才支持。

2:不推荐使用expression和behavior

在页面渲染的过程中,expression和behavior需要大量的计算,会大量地耗费客户端资源。所以不到迫不得已,请不要使用expression和behavior。

3:expression和behavior的现实意义

上面两点,好像已经判了expression和behavior死刑。其实,并不是,它们依然有着现实意义——就是用另外一种途径解决IE6的兼容性问题(IE5已经基本退出市场,可以不用考虑)。例如:IE7以上的版本、FireFox、Opera、Safari都已经支持透明PNG图片,但是IE6却不能支持。这是IE6天生的缺陷,但是为了能让IE6也能够兼容我们的设计效果,那么这时候behavior便有了用武之地。

总的来说,expression和behavior在逐渐的没落,但是只要IE6还是浏览器市场上占有一席之地,expression和behavior就依然有着旺盛的生命力。

 

在上一篇文章“CSS控制图片自适应”里面提及到CSS 的Expression。

CSS Expression也称为CSS表达式,它是动态设置CSS属性的强大方法,但也存在着一定的危险性。

在CSS Expression中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

这里的CSS属性可以是元素固有的属性,也可以是自定义属性。

CSS Expression在其它浏览器中不起作用,因此在跨浏览器的编码中单独针对IE设置时会比较有用。

从IE5开始支持CSS Expression。我们看下面的代码:

background-color: expression( (new Date()).getHours()%2 ? "#F00" : "#00F" );

上面的代码是使用CSS Expression,实现隔一个小时切换一次背景颜色。

CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

一个减少CSS Expression计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS Expression。

如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS Expression,一定要记住它们要计算成千上万次并且可能会对页面的性能产生影响。

 

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?

可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示。

 

一、   对于标准浏览器(如Firefox),或者最新都IE7浏览器,直接使用max-width,max-height;或者min-width,min-height的CSS属性即可。如:

我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码:

img{
max-width:100px;
max-height:100px;
overflow:hidden;
}

二、对于IE6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code中嵌入javascript code来实现图片的缩放:

img{
width:expression(this.width>150?"150px":this.width);
height:expression(this.height>150?" 150px":this.height);
}

三、完美解决方案

img{
border:0;
margin:0;
padding:0;
max-width:150px;
width:expression(this.width>150?"150px":this.width);
max-height:150px;
height:expression(this.height>150?" 150px":this.height);
}

转自:http://wendesign.net/blogs330.html

 

 

当容器里面所有的子容器都float了,容器的高度不会随着内容的增多而增大,这个时候就需要清除浮动了。

.clearfix:after{ content: "."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix{display:inline-block;}
*html.clearfix{ height:1%;}
.clearfix{ display:block;}

清除浮动有很多种方法,其中上面这一段是笔者在《编写高质量代码–Web前端开发修炼之路》一书中学到的,既不影响布局,也不增加无意义的标签,破坏语义化。

而下面这个是网上搜回来的,简洁一点。

.clearfix:before,.clearfix:after{ content:""; display:table;} .clearfix:after{ clear:both;} .clearfix{ zoom:1;}

以上的方法是笔者觉得清除浮动最好的方法。笔者测试过没问题。

至于第二个,为什么要用before还不知道,因为笔者尝试过把它删除掉,但是效果还是可以做到clear,而且效果跟有写before是一样的(如下)。所以如果有知情人请爆一下料。

.clearfix:after{ content:""; display:table; clear:both;} .clearfix{ zoom:1;}
© 2012 Hedgehog Suffusion theme by Sayontan Sinha