zoukankan      html  css  js  c++  java
  • 转:整理收集的div+css制作网页的一些小实例技巧

    1.鼠标移上去是出现一个window的保存收藏打印的那个小框框,能不能限制它的出现?

    在HEAD中加入

    <META HTTP-EQUIV="imagetoolbar" CONTENT="no">

    2. 图片上用新属性galleryimg

    <img width=500 height=500 src=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的bug,解决方法:overflow-x: hidden

     加上这个.把水平滚动条隐藏掉~

    4.用css来实现三角形

     HTML代码

    <style>
    .t{
      50px;
      border-style:solid;
      border-color:#a6a2f7 #fff;
      border-0 50px 50px 50px;
    }
    </style>
    <span class="t"></span>

    5. 用vml来画圆角...

     HTML代码

    <html xmlns:v>
    <head>
    <style>
    v\:* {behavior: url(#default#VML);}
    #lone {
     200;
     height:70px;
    }
    </style>
    </head>
    <body>
    <v:RoundRect id="lone" strokecolor="#000" strokeweight="4px" arcsize="0.8" fillcolor="#ff0000">
    <!--arcsize 弧度值 fillcolor 圆的填充色 strokecolor 圆的边框色 strokeweight 边框大小-->
    </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{300px;margin:0 10px 0 10px;}

    div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改:

    div{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://www.jzxue.com" target="_blank">HTTP://www.jzxue.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 oncontextmenu="return false">

    14。div+css布局用了float之后背景不能延伸的解决方案

    <div style="clear: both; font-size: 0;"></div>

    原因:背景的自适应高度并不继承float的高度,背景会继承float底线所在容器中的位置高度,所以背景一定会找到最后一个标签去测定,这样我们在如上的标签,这个标签中什么也不放。也就是一个没有高度的空容器,这样它就可以把背影拉下来了。

    15.用JS来处理图片变形的问题,等比例缩放图片,还能防止图片在加载过程中因为图片太大而引起的变形

    <script language="JavaScript" type="text/javascript">
    <!--
    function DrawImage(ImgD,FitWidth,FitHeight){
    var image=new Image();
    image.src=ImgD.src;
    if(image.width>0 && image.height>0){
    if(image.width/image.height>= FitWidth/FitHeight){
    if(image.width>FitWidth){
    ImgD.width=FitWidth;
    ImgD.height=(image.height*FitWidth)/image.width;
    }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
    }
    } else{
    if(image.height>FitHeight){
    ImgD.height=FitHeight;
    ImgD.width=(image.width*FitHeight)/image.height;
    }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
    }
    }
    }
    }
    //-->
    </script>

    应用:

    <img src="XXXX" alt="自动缩放后的效果" width="200" height="200" onload="javascript:DrawImage(this,"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 {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="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>

    转:http://mb.5151doc.com/wzsj/ShowArticle.asp?ArticleID=103

  • 相关阅读:
    JavaScript连等赋值
    vue入坑总结
    form表单与后台请求的关系
    JavaScript构造函数、继承的理解
    前端知识未学习点
    js垃圾回收机制
    前端闭包
    html中strong与b,em与i标签的区别(转帖)
    Docker 搭建开源跳板机_jumpserver (运维开源堡垒机_jumpserver) Centos_7.0
    python EasyUI + Django--整合 CSRF 防护去除
  • 原文地址:https://www.cnblogs.com/shiningrise/p/817891.html
Copyright © 2011-2022 走看看