利用css解决居中问题

同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋,下面让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。

CSS常见的让元素水平居中显示方法

用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。

1.使用自动外边距实现居中

CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是,必须为该容器指定宽度:

div#container{ margin-left:auto; margin-right:auto; width:168px; }

在大多数主流浏览器中,这种方法都非常有效,即使是Windows平台上的IE6,在其标准兼容模式(compliancemode)下也能够正常显示。但不幸的是,在更低版本的IE中,这种设置却并不能实现居中效果。所以若想在实际项目中使用这种方法,那么就要确保用户的IE浏览器版本不低于6.0。

尽管在支持上不尽如人意,但大多数设计师都建议尽可能地使用这种方法。该方法也被认为是在各种用CSS实现元素水平居中方法中最正确、最合理的一种。

2.使用text-align实现居中

另一种实现元素居中的方法是使用text-align属性,将该属性值设置为center并应用到body元素上即可。这种做法是彻头彻尾的hack,但它却能兼容大多数浏览器,所以在某些情况下也自然必不可少。

之所以说它是hack,是因为这种方法并没有将文本属性应用到文本上,而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后,我们要按照如下代码为body应用text-align属性:

body{ text-align:center; }

之后会出现什么问题吗?body的所有子孙元素都会被居中显示。

因此,我们就需要用再写一条规则,让其中的文本回到默认的居左对齐:

p{ text-align:left; }

可以想象这条附加的规则将带来一些不便。另外,真正完全遵循标准的浏览器并不会改变容器的位置,而只会让其中的文字居中显示。

3.组合使用自动外边距和文本对齐

因为文本对齐居中方式有着良好的向下兼容性,且自动外边距方式也被大多数当代浏览器支持,所以很多设计师将二者组合起来使用,以期让居中效果得到最大限度的跨浏览器支持:

body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; border:1pxsolidred; width:168px; text-align:left }

可是这始终是个hack,无论如何也算不上完美。我们还是需要为居中容器中的文本编写附加的规则,但至少在各个浏览器中看起来都不错。

4.负外边距解决方案

负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。

下面是该方案的具体实现方法。首先,创建一个包含居中元素的容器,然后将其绝对定位于相对页面左边边缘50%的位置。这样,该容器的左外边距将从页面50%宽度的位置开始算起。

然后,将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; position:absolute; left:50%; width:760px; margin-left:-380px; }

看,没有任何hack!虽然这并不是首选的解决方案,但也是个不错的方法,且适用性极广—甚至在NetscapeNavigator4.x中都没有任何问题,很令人吃惊,不是吗?所以若想得到最广泛的浏览器支持,那么这种方法将会是最好的选择。

css画三角形

1、新建一个元素,随便什么元素,不过我习惯性的会用块元素来做。如果行内元素就display:block它。

 

<div></div>

 

2、把它的宽高设置为height:0px; width:0px;

 

3、设置边框border属性,用来实现三角形。

 

首先要了解border具体是怎么样的,我写了一个这样的样式:

 

border:50px solid #000; border-color:#f00 #000 #f0f #00f;

 

在FF下面显示效果如下:

 

用CSS画三角形

出现4个三角形合并成一个正方形。到这里就很清晰了,只要把想要的保留,其它的设置为透明就可以达到三角形的效果,那么:

 

border:50px solid #000; border-color:#f00 transparent transparent transparent;

 

在FF就可以看到一个红色三角形如下:

 

用CSS画三角形

但是IE呢,尤其是坑爹的IE6会怎样? 如图:

 

用CSS画三角形

这是因为它不支持transparent,所以不会透明,那么可以这样:

 

border:50px solid #000; border-color:#f00 transparent transparent transparent; border-style:solid dashed dashed dashed;

 

在你想它透明的地方对应的把border-style设置为dashed,IE6就可以达到跟FF一样的效果了。

 

那这样也就只是实现了4个方向的三角形,那如果要直角对着45斜线方向的呢?那么可以用两个正方向的三角形并在一起来实现,如下图:

 

用CSS画三角形

代码:

 

border:50px solid #000; border-color:#f00 #000 transparent transparent; border-style:solid solid dashed dashed;

 

只要把颜色统一,就形成一个45斜线方向三角形,而在IE6却会是这样一种显示:

 

用CSS画三角形

这是因为IE6有个行高撑开了,把行高设置为0就跟FF一样了:line-height:0px;

让你的ie浏览器支持box-shadow

方法一:

ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。

它的使用方法是:下载它并放到你的服务器目录

在你的<head></head>里面写入下面的代码:

<!--[if IE]> 
<style type="text/css"> img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);} </style> 
<![endif]-->

蓝色部份输入要使用box-shadow属性的选择器,绿色部份输入ie-css3.htc的绝对路径,或相对路径,反正要保证能访问得到。

然后这样就OK了。但还是有几点需要注意的是:

  • 当你使用了这个htc文件后,你的CSS里面,只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种,IE就会渲染。
  • 当使用了这个htc文件后,你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
  • 不支持RGBA值中的alpha透明度。
  • 不支持inset内阴影。
  • 不支持阴影扩展。
  • 阴影在IE中只会显示为黑色,不管你设置成其它什么颜色。

但是,这个脚本了仅仅是让IE支持了部份的box-shadow值。

方法二:
在<head></head>标签里加入如下代码:
<style type=”text/css”>
img{background: #fff;

-ms-filter:”progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)”;

*filter: 
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6);
}
</style>
其中:color是投影的颜色,direction是顺时针的角度值,strength是投影的大小值。

前端开发必备技能之CSS布局方法

我们都知道一个网页或者是整个网站,肯定包含多个DIV或者其它HTML对象,如果你想让你网页看起来更美观,那么你就要对页面所有的对象进行布局。网页布局难么?新手该如何去布局?什么样的布局能够真正吸引用户的眼球?下面就带着这些问题开始今天的话题CSS布局方法。

从CSS参考手册可以看出,CSS布局(Layout)语法主要有display、float、clear、visibility、clip、overflow、overflow-x、overflow-y(其中后两个是CSS3新添加)8个属性,供开发者们在实际项目中使用。这些属性各自的作用范围都不同,因此,在布局的时候可以单独的使用某一个属性,也可以多个组合使用,具体要如何选,要看项目的需求和个人喜好。这8个属性的具体介绍和使用方法如下。

display(显示控制)

该属性主要作用是设置或检索指定对象是否以及如何显示,其取值主要有:none、inline block、list-item。none:隐藏对象,与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间,inline: 指定对象为内联元素。block: 指定对象为块元素。 list-item: 指定对象为列表项目。inline-block: 指定对象为内联块元素。

float(浮动控制)

标准的HTML语法一般都是从上到下显示每一个对象,如果你想对此作出改变可以使用float属性,该属性主要是对对象进行浮动设置,何为浮动?以我的理解就是,让对象从左到右显示,或者是从右到左,而不是标准的文档结构从上到下显示。该属性有none、left、right3个属性值,none:设置对象不浮动、left:设置对象浮在左边、right:设置对象浮在右边,默认值为none。当float语法设置为left时,对象将从左向右显示,直到对象的大小超出显示范围时,从下一行开始从左到右显示对象,取值为right时则完全相反。

clear(清除浮动)

上面的float可以设置对象为浮动,但是如果我不想一个模块内的对象全部设置浮动的时候,就可以使用clear语句,该语句的作用就是使上一个对象设置的float语法不再生效。该语法有4个取值,分别为none、both、right、left,none就是没有的意思,也就是允许对象两边都可以有浮动对象,both意为二者都,选择该取值时也就是说该对象左右两边都不允许浮动。相应的right和left都是只允许左右某一边不能有浮动对象。

visibility(显示控制)

visibility属性主要是设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间。也就是说,对象显示与否,对象占据的位置不会发生变化。该属性有visible、

hidden、collapse等3个取值。其中visible:设置对象可视,hidden:设置对象隐藏。collapse:主要用来隐藏表格的行或列,隐藏的行或列能够被其他内容使用,对于表格外的其他对象,其作用等同于hidden(IE6及以下不支持此参数值)。

clip(裁剪对象)

检索或设置对象的可视区域。区域外的部分是透明的。必须将position的值设为absolute,此属性方可使用。该属性有:auto和rect(|auto |auto |auto |auto)
两个属性值,auto表示对象无剪切,rect则依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。使用clip属性,可以裁剪对象大小。

具体示例:clip:rect(auto 50px 20px auto);

示例说明:对象上边不剪切,右边从第50个像素开始剪切直至最右边,下边从第20个像素开始剪切直至最底部,左边不剪切。

补充说明:IE7及以下浏览器只支持rect()的方式,其它浏览器还支持rect(,,,)加逗号的方式。

overflow(裁剪对象)

overflow属性主要是检索或设置当对象要显示的内容超过其指定高度及宽度时如何管理内容。该属性有visible、hidden、scroll、auto四属性值。

取值说明
visible:不剪切内容。
hidden:将超出对象尺寸的内容进行裁剪,将不出现滚动条。
scroll:将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。
auto:在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。

overflow-x、overflow-y(裁剪超出宽度和高度)

这两个属性就是对overflow的分解,主是作用是检索或设置当对象的内容超过其指定宽度或高度时如何管理内容。这两个属性同样有visible、hidden、scroll、auto四属性值。

以上就是有关布局的所有CSS属性以及属性取值说明,网站开发或者网站改版的时候,可能会用到这些属性,没有学过用过,或者是不熟悉的朋友都来看看吧。

前端技术之如何网页中使用CSS样式表

CSS英文全称Cascading Style Sheet,中文翻译为:层叠样式表单。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 是网站前端开发必备的技术。CSS/DIV布局设计已经完全替代过去的table布局,并被纳入W3C标准。作为一名前端开发人员或者即将踏入前端开发行业的你是否熟练掌握这一技能,能够熟练运用CSS进行网页设计呢?不管你熟练或者不熟练请先来看看下文,我将给大家简短的介绍如何在前端网页开发中使用CSS技术。

目前,你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

1、外部调用样式表文件

你可以先建立外部样式表文件(xxx.css),然后通过HTML的link方法,将其链接到要使用到的网页。示例如下:
<head>
<title>the title</title>
<link rel=stylesheet href=”xxx.css” type=”text/css”>
</head>

请记住,使用这种方法一定要注意引用路径问题,引用路径出错样式表文件就不会作用于当前网页。如果外部引入的CSS文件非常大,可能会影响到网页的加载速度,这时候如果你比较精通CSS的话,可以对样式文件进行精简瘦身,也可以使用压缩工具来压缩CSS文件。压缩工具网站上有,有兴趣的朋友可以上网上去搜一搜。

2、内部定义样式文件

你也可以在当前网页的头部文件<head></head>之间插入<style>…</style>块对象。定义方式请参阅样式表语法。示例如下:
<head>
<style type=”text/css”>
body {font:14px “Arial”}
h1{size:100%;color:#eee}
a{color:#333;text-decoration:none}
p{font:12px “宋体”;color: black}
</style>
</head>

请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单。通常是都要写全的,如果不加上可能会发生意外错误。

3、HTML对象元素内部定义CSS样式

内部定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。内部定义样式表语法:<element style=”property: value”></element>。参数说明:element——HTML对象;property:value——样式表定义属性和属性值之间用冒号(:)隔开、定义之间用分号(;)隔开。示例文件如下:
<body>
<p style=”font-size:12px “Verdana”;color:red”>xxxooo</p>
</body>

以上三种样式表的优先级是:内嵌样式表>内部样式表>外部样式表。当然优先级高的并不一定代表是最好的,在实际开发过程中我们可以灵活来运用,如果你一定要问我哪种方法用得最多,我会告诉你是前面两种。

css浮动元素无法对齐

有时候在一行中两个元素,一个元素固定,一个元素使用了浮动,此时若浮动之后两个元素无法在一行内对齐可以将两个元素互换位置,问题解决!

css固定浮动层的实现

在css中要实现固定浮动层可以使用{position: fixed;top:0px;}来实现,但是在ie6下不支持position: fixed属性要实现这个效果可以使用

{height:36px;background:url(../images/top_bg.jpg); position: fixed;z-index: 1000;width: 100%; top:0px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}

在ie6下使用inline-block

css中display:inline-block在ie8才开始支持,要让ie6具备这个属性可以是用一下两种办法:

1、可以先触发layout,再设置为inline,需要注意的是这两个display必须在两个CSS声明中才有效

div {
width:400px;
height:200px;
display:inline-block;
}
div {
display:inline;
}

2、直接设置为inline,再利用zoom来触发layout来实现类似效果

div {
width:400px;
height:200px;
*display:inline;
*zoom:1;
}

js圆角插件

1、在页面中引用js源文件
< script type=”text/JavaScript” src=”rounded_corners.js”></script >

2、然后创造一个DIV。如果您已有DIV使用圆角,只要给这个DIV一个id就可以.

< DIV id=”myDiv”></DIV >

3、我们需要添加一段JavaScript来预载。在您的网页的顶头部分增加以下代码:

<script type=”text/JavaScript”>
window.onload = function() //radius表示半径,数值越大,圆角就越大,各角可以不同大小.
{                                        //tl=左上角  tr=右上角  bl=左下角  br=右下角
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: false
}

var divObj = document.getElementById(“myDiv”);

var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}
</script>

下载地址:js圆角插件

js特殊字符转义

点的转义:. ==> \\u002E
美元符号的转义:$ ==> \\u0024
乘方符号的转义:^ ==> \\u005E
左大括号的转义:{ ==> \\u007B
左方括号的转义:[ ==> \\u005B
左圆括号的转义:( ==> \\u0028
竖线的转义:| ==> \\u007C

右方括号转义:] ==> \\u005D
右圆括号的转义:) ==> \\u0029

星号的转义:* ==> \\u002A
加号的转义:+ ==> \\u002B
问号的转义:? ==> \\u003F
反斜杠的转义:\ ==> \\u005C