新闻中心

Success Stories

头条新闻

推荐内容

当前位置: 首页 > 新闻中心 > 网页设计

自己整理的DIV+CSS网页布局实用技巧笔记

时间:2012-08-07 20:48来源: 作者:admin 点击:
1、最小高度 min-height:100px; /*高度最小值设置为:100px*/ height:auto !important; /*兼容FF,IE7也支持 !important标签*/ height:100px; /*兼容ie6*/ 2、 meta http-equiv=X-UA-Compatible content=IE=7 / 的意思:将IE8使用IE7进行渲染,使网站在IE8上显

1、最小高度
 

min-height:100px; /*高度最小值设置为:100px*/
 

height:auto !important; /*兼容FF,IE7也支持 !important标签*/
 

height:100px; /*兼容ie6*/
 


 

2、<meta http-equiv="X-UA-Compatible" content="IE=7" />的意思:将IE8使用IE7进行渲染,使网站在IE8上显示正常
 


 

(X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令,都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说,它是首选的兼容性模式。
 

目前IE8尚在测试版中,所以为了避免制作出的页面在IE8下面出现错误,建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码:<meta http-equiv="X-UA-Compatible" content="IE=7" />(如:淘宝网);
 

这样我们才能使得页面在IE8里面表现正常!
 


 

3、兼容FF与IE的透明度设置:
 

filter:Alpha(Opacity=50);
 

opacity:0.5;
 


 

4、使网页变灰色,只需要一句 css 代码。使用 css 的滤镜:
 

view plaincopy to clipboardprint?
 

html { filter:Gray; }
 

html { filter:Gray; }或 view plaincopy to clipboardprint?
 

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
 

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }注:样式加在 body 不能使 Google Adsense 等用 script 输出的内容变灰,加在 html 上则可以。
 


 

5、去掉链接(包括图片链接)的虚线边框
 

/* for IE */
 

a,area { blr:expression(this.onFocus=this.blur()) }
 

/* for Firefox */
 

:focus { outline: none; }
 


 

6、左右结构,一边固定另一边自适应
 

a、左边固定,右边自适应
 

<div>
 

<div style="float:right;margin:0 0 0 -30px; width:100%">
 

<div style="margin:0 0 0 30px; background:#e4e4e4">这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内这里是<Br />右边的内容</div>
 

</div>
 

<div style="float:left;width:30px; background:#669999">这里左边部分</div>
 

</div>
 


 

b、右边固定,左边自适应
 

<div>
 

<div style="float:right;width:200px; background:#669999">这里右边部分</div>
 

<div style="float:left;margin:0 -215px 0 0; width:100%">
 

<div style="margin:0 215px 0 0; background:#e4e4e4">这里是左边的内容</div>
 

</div>

</div>


 

7、图片背景与颜色背景同时起效技巧

background: url(Bg.gif) no-repeat;
background-position: center 0px;
background-color: #cfe4a3;

(责任编辑:admin)

顶一下
()
%
踩一下
()
%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
php语法报错,请【点击参考教程】 php语法报错,请【点击参考教程】
php语法报错,请【点击参考教程】
最新评论 进入详细评论页>>