zoukankan html css js c++ java

Js网站开发学习第一天

1、登录时，记住密码单选框，鼠标移上去显示div里的内容，移开则消失；

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 3     <title></title>
 4     <style type="text/css">
 5         #div1 {
 6             100px;
 7             height:50px;
 8             padding:0;
 9             margin:0;
10             background-color:white;
11             border:1px solid;
12             display:none;
13         }
14     </style>
15 </head>
16 <body>
17     <label><input  type="checkbox" onmouseover="document.getElementById('div1').style.display='block'" onmouseout="document.getElementById('div1').style.display='none'" />自动登录</label>
18     <div id="div1">
19         将会为您提供新的服务
20     </div>
21 </body>

2、div鼠标移上去自动变颜色，移开后变为原色

（1）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div{
            100px;
            height:100px;
            background-color:blue;
        }
        .box {
            200px;
            height:200px;
            background-color :green;
        }
    </style>
</head>
<body>
    <div id="div1" onmouseover="document.getElementById('div1').className='box';" onmouseout="document.getElementById('div1').className='';">
 </div>
</body>

（2)用Js函数

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
       #div1{
            100px;
            height:100px;
            background-color:blue;
        }
        .box {
            200px;
            height:200px;
            background-color :green;
        }
    </style>
    <script type="text/javascript">
        function toGreen() {
            document.getElementById('div1').style.width = '200px';
            document.getElementById('div1').style.height = '200px';
            document.getElementById('div1').style.backgroundColor = 'green';
        }
        function tored() {
            document.getElementById('div1').style.width = '100px';
            document.getElementById('div1').style.height = '100px';
            document.getElementById('div1').style.backgroundColor = 'red';
        }
    </script>
</head>
<body>
    <div id="div1" onmouseover="toGreen()" onmouseout="tored()">
 </div>
</body>

（3）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
       #div1{
            100px;
            height:100px;
            background-color:blue;
        }
        .box {
            200px;
            height:200px;
            background-color :green;
        }
    </style>
    <script type="text/javascript">
        function toGreen() {
            var oDiv1 = document.getElementById('div1');
            oDiv1.style.width = '200px';
            oDiv1.style.height = '200px';
            oDiv1.style.backgroundColor = 'green';
        }
        function tored() {
            var oDiv1 = document.getElementById('div1');
            oDiv1.style.width = '100px';
            oDiv1.style.height = '100px';
            oDiv1.style.backgroundColor = 'red';
        }
    </script>
</head>
<body>
    <div id="div1" onmouseover="toGreen()" onmouseout="tored()">
 </div>
</body>

查看全文

相关阅读:
RGB888转RGB666
bmp文件格式详细解析
 Qt 5简介
 IntelliJ IDEA 快捷键
 猫猫学iOS之小知识之_xcode插件的删除方法_自己主动提示图片插件KSImageNamed有时不灵_分类或宏之类不能自己主动提示，
sql server 2008出现远程过程调用失败
 Oracle-31-对视图DML操作
 uva 11127(暴力)
各种排序算法的分析与实现
 我的Android进阶之旅------>怎样解决Android 5.0中出现的警告： Service Intent must be explicit:

原文地址：https://www.cnblogs.com/wjr0117/p/6791993.html