DIV+CSS网页布局实用技巧笔记

最新推荐文章于 2024-10-18 21:23:17 发布

纯属偶然

最新推荐文章于 2024-10-18 21:23:17 发布

阅读量198

点赞数

分类专栏： HTML+CSS 文章标签： css div ie filter html float

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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="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="margin:0 215px 0 0; background:#e4e4e4">这里是左边的内容</div>

</div>

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

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