整理收集的XHTML+CSS制作网页的小技巧

流星玛丽 · 发表于 2011-9-27 20:38:01

发布的时候搞错了
怎么成这样了
真是郁闷那

流星玛丽 · 发表于 2011-9-26 15:26:07

css|xhtml|技巧|网页
1.鼠标移上去是出现一个window的保存收藏打印的那个小框框，能不能限制它的出现？
在HEAD中加入
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
2. 图片上用新属性galleryimg
<img width=500 height=500 src=http://www.webjx.com/htmldata/2007-06-04/a.gif galleryimg="no">
3.div实现滚动条 (某些情况下可以替代iframe)
<style>
.gb { overflow:auto; white-space:normal; height:100px; padding:3px;}
</style>
<div class="gb"></div>
其中高度height和overflow是必须设置的！
ps:在IE下有的时候水平滚动条会出来，但是事实上，水平滚动条不没有实际的用途，貌似这个是IE的ｂｕｇ，解决方法：overflow-x: hidden
　加上这个．把水平滚动条隐藏掉～
4.用css来实现三角形
HTML代码
<style>
.t{
  width:50px;
  border-style:solid;
  border-color:#a6a2f7 #fff;
  border-width:0 50px 50px 50px;
}
</style>
<span class="t"></span>
5. 用vml来画圆角...
HTML代码
<html xmlns:v>
<head>
<style>
v\:* {behavior: url(#default#VML);}
#lone {
width:200;
height:70px;
}
</style>
</head>
<body>
<v:RoundRect id="lone" strokecolor="#000" strokeweight="4px" arcsize="0.8" fillcolor="#ff0000">

</body>
</html>
6 . IE下,当使用了FLOAT之后.用margin-left和margin-right 会变成用双倍的数值,例子:
margin-left:10px; 实际的效果是20PX;
解决的方法

1),用display:inline;(2)用clear:float
方法1适应的范围比较广一些,(2)的话.只适合那些可以清除浮动的元素.不能清除的,不能用~
7.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
8.IE5和IE6的BOX解释不一致IE5下
div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE**其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改:
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
这个/**/是IE5和firefox都支持但IE6不支持.
9.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}
10.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为
<script type="text/javascript">
11.JS 的页面跳转脚本
HTML代码
<script language="javascript">
location.assign ("<a href="HTTP://webjx.com" target="_blank">HTTP://webjx.com</a>")
</script>

12. IE下用JS去掉所有链接和图片的焦点(因点击而产生的虚线框)
function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
</script>
13. 屏蔽右键类的代码
<body>
14。div＋css布局用了float之后背景不能延伸的解决方案
<div style="clear: both; font-size: 0;"></div>
原因：背景的自适应高度并不继承float的高度，背景会继承float底线所在容器中的位置高度，所以背景一定会找到最后一个标签去测定，这样我们在如上的标签，这个标签中什么也不放。也就是一个没有高度的空容器，这样它就可以把背影拉下来了。
15.用JS来处理图片变形的问题，等比例缩放图片，还能防止图片在加载过程中因为图片太大而引起的变形
<script language="JavaScript" type="text/javascript">

</script>
应用：
<img src="XXXX" alt="自动缩放后的效果" width="200" height="200" 200","200");" />
这里给图片设置了固定的大小。用了JS函数之后，不影响效果：）
16.用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/
IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数。
17.未知大小的图片在一个已知大小容器中的水平和垂直居中
这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape，为IE和非IE分别写了二套简单的样式。
IE使用inline-blocks，非IE使用table-cell and vertical-align。
CSS
/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8;
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}
18 .在IE里面元素浮动之后.原来的边距(margin)会加倍,但是FF等就不会.解决方法
在浮动的元素的代码中加入：display: inline;，可使浮动被忽略，IE中不至于产生双倍距离.
19. 首页下沉的效果:
.post-body:first-letter {font-size:2.5em; float:left; padding:0 2px 0 0; line-height:1em; font-family:"楷体_GB2312"; font-weight:bold; color:#b00;}
20.半透明的效果
HTML代码
<div style="width:100px;height:100px;background-color:#f00;filter:alpha(opacity=50); /* IE */ ; -moz-opacity:0.5; /* Moz + FF */ ; opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/">我在任何浏览器里都是半透明的
</div>

		自动登录	找回密码
密码			立即注册

[分享] 整理收集的XHTML+CSS制作网页的小技巧

评分

站长推荐 /1