css字体单位、背景、光标悬停离开事件、替换img路径

最新推荐文章于 2021-11-30 20:19:24 发布

童心（成都）

最新推荐文章于 2021-11-30 20:19:24 发布

阅读量300

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_40237472/article/details/94734224

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

字体单位：

然而在CSS中，W3C文档把尺寸单位划为为两类：相对长度单位和绝对长度单位。然而相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。字体相对单位有：em、ex、ch、rem；视窗相对单位则包含：vw、vh、vmin、vmax几种。绝对定位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。

px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位；
em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
%：百分比，它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半

背景图片自适应（全屏）：

方案一：

       html,body{height: 100%;width: 100%;margin:0;padding:0;}
       body{
           background:url(img/首页.png)no-repeat;
       width:100%;
       height:100%;
       background-size:100% 100%;
       position:absolute;
       filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-login.png',sizingMethod='scale');
           }

方案二：

css:

#web_bg{
       position:fixed;
       top: 0;
       left: 0;
       width:100%;
       height:100%;
       min-width: 1000px;
       z-index:-10;
       zoom: 1;
       background-color: #fff;
       background-repeat: no-repeat;
       background-size: cover;
       -webkit-background-size: cover;
       -o-background-size: cover;
       background-position: center 0;
       }

html:

垂直居中：

光标悬停离开事件：

属性   此事件发生在何时…
onmouseout   鼠标从某元素移开。
onmouseover   鼠标移到某元素之上。

html:

js:

   function oncode(){
       document.getElementById('imgcode').style.display = '';
       document.getElementById('imgcd').src = "img/二维码按钮按下.png"; //替换img路径
   }
   function upcode(){
       document.getElementById('imgcode').style.display = 'none';
       document.getElementById('imgcd').src = "img/二维码按钮.png";//替换img路径
   }