div css中的clearfloat
[
2008/11/24 11:37 | by Else ]
2008/11/24 11:37 | by Else ]
如果经常用div +css 难免会用到
clear:both;
我们会写一个.class 然后放链接到div上去,
今天还是要建个.class
下面怎么用呢!
这样不是是省了代码,而又不会因为少另一边出了问题?!
clear:both;
我们会写一个.class 然后放链接到div上去,
今天还是要建个.class
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
下面怎么用呢!
这样不是是省了代码,而又不会因为少另一边出了问题?!
IE的if条件Hack
[ 2008/10/04 20:51 | by Else ]
2008/10/04 20:51 | by Else ]
IE的if条件Hack
找这个出来的原因就是怕还有用98的机子,一些国家可能还有在用吧!以前做好一个网页后,后来发现对方用的是98,ie5 还有在这里还是要记一下
找这个出来的原因就是怕还有用98的机子,一些国家可能还有在用吧!以前做好一个网页后,后来发现对方用的是98,ie5 还有在这里还是要记一下
<!--[if IE]> Only IE <![endif]-->
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别
ie下的3px bug两种方法
[ 2008/09/30 22:18 | by Else ]
2008/09/30 22:18 | by Else ]
这个是官方推荐的方法,通过dw的验证
这里的代码
ie下会多3px;
加head上面加这个,加zoom
ps.........................................................
昨天的排版,今天挖错,我的排版中是用4px和8px,在fw下对比,左右两边正常!无逢链接!
这里的代码
ie下会多3px;
.cls6_1,.cls5_1{margin-left:8px;}
加head上面加这个,加zoom
<!--[if IE]>
<style type="text/css">
.cls6_1,.cls5_1{margin-left:5px;zoom:1;}
.cls5_2{margin-left:298px;margin-right:254px;zomm:1;}
.cls6_2,.cls5_3{margin-right:5px;zoom:1;}
</style>
<![endif]-->
<style type="text/css">
.cls6_1,.cls5_1{margin-left:5px;zoom:1;}
.cls5_2{margin-left:298px;margin-right:254px;zomm:1;}
.cls6_2,.cls5_3{margin-right:5px;zoom:1;}
</style>
<![endif]-->
ps.........................................................
昨天的排版,今天挖错,我的排版中是用4px和8px,在fw下对比,左右两边正常!无逢链接!
div左邊固定，右邊自適應的排法
[ 2008/09/03 13:15 | by Else ]
2008/09/03 13:15 | by Else ]
其實這樣的例子很多，在dw cs3裡就就有很多我也是看那例子的
顯示地址
顯示地址
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
height:100%;
}
.top {
height: 100px;
background-color:#FFC
}
.left {
height: 600px;
width: 150px;
float: left;
background-color:#CCCccc;
}
.main {
height: 600px;
margin-left: 160px;
background-color:#F2F2F2;
}
.bottom {
height: 100px;
/*clear: both;可以不用吧*/
background-color:#FFC
}
body {
margin: 0px;
}
div {
border: 1px solid #C0C0C0;
}
</style>
</head>
<body>
<div class="top">
</div>
<div>
<div class="left">
</div>
<div class="main">aaa
</div>
</div>
<div class="bottom">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
height:100%;
}
.top {
height: 100px;
background-color:#FFC
}
.left {
height: 600px;
width: 150px;
float: left;
background-color:#CCCccc;
}
.main {
height: 600px;
margin-left: 160px;
background-color:#F2F2F2;
}
.bottom {
height: 100px;
/*clear: both;可以不用吧*/
background-color:#FFC
}
body {
margin: 0px;
}
div {
border: 1px solid #C0C0C0;
}
</style>
</head>
<body>
<div class="top">
</div>
<div>
<div class="left">
</div>
<div class="main">aaa
</div>
</div>
<div class="bottom">
</div>
</body>
</html>
關於網站灰色的css
[ 2008/05/19 13:02 | by Else ]
2008/05/19 13:02 | by Else ]
原來用的
這個css在打開之後占客戶的cpu比較高
這個css只是占用一下，就下來了!所以推薦你用第二個
<style type="text/css">
<!--
*{filter:Gray;}
-->
</style>
<!--
*{filter:Gray;}
-->
</style>
這個css在打開之後占客戶的cpu比較高
<style>
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
</style>
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
</style>
這個css只是占用一下，就下來了!所以推薦你用第二個
清除浮动“clear:both;”的应用
[ 2008/04/13 20:47 | by Else ]
2008/04/13 20:47 | by Else ]
在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both;
CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。比如：
如果不用清除浮动，那么第3列文字就会和第1、2列文字在一起 ，所以我们在第3个这列加一个清除浮动 clear:both;
CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。比如：
代码：
复制代码 | 运行代码 | 另存代码
<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p>这个是第3列。</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p>这个是第3列。</p>
如果不用清除浮动，那么第3列文字就会和第1、2列文字在一起 ，所以我们在第3个这列加一个清除浮动 clear:both;
代码：
复制代码 | 运行代码 | 另存代码
<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p style="clear:both;">这个是第3列。</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p style="clear:both;">这个是第3列。</p>
用CSS控制图片自适应大小
[ 2008/04/13 20:39 | by Else ]
2008/04/13 20:39 | by Else ]
图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制。
代码：
[codes=CSS].img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}[/codes]
代码：
[codes=CSS].img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}[/codes]
最近这几天没有去哪里玩，也不去玩什么！所以在家里把网站给改版了!
十一的时候去玩了一天！走了一天，感觉好累，呵呵！
cuku.net前台模板了！本来很早要做的内容，没有想到弄到现在，罪过罪过
网址：www.cuku.net
名称：酷库网
十一的时候去玩了一天！走了一天，感觉好累，呵呵！
cuku.net前台模板了！本来很早要做的内容，没有想到弄到现在，罪过罪过
网址：www.cuku.net
名称：酷库网
acbd的排版 原创
[ 2007/06/05 09:10 | by Else ]
2007/06/05 09:10 | by Else ]
下面的是css文件images/css.css 两个代码要合起来!
@charset "utf-8";
/* CSS Document */
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
margin:0;
padding:0;
background: #CCCCCC;
}
/* CSS Document */
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
margin:0;
padding:0;
background: #CCCCCC;
}
对IE6、IE7、FF兼容性的详细CSS HACK介绍
[ 2007/05/21 03:24 | by Else ]
2007/05/21 03:24 | by Else ]
这个问题把我鳖了好久了，最近终于找到了解决的方法，经过我测试是完全OK的，和大家共享。
以下为引用：
现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
以下为引用：
现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
