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

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <style type="text/css">

         #div1 {

             width:100px;

             height:50px;

             padding:;

             margin:;

             background-color:white;

             border:1px solid;

             display:none;

         }

     </style>

 </head>

 <body>

     <label><input  type="checkbox" onmouseover="document.getElementById('div1').style.display='block'" onmouseout="document.getElementById('div1').style.display='none'" />自动登录</label>

     <div id="div1">

         将会为您提供新的服务

     </div>

 </body>

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

（1）

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        div{

            width:100px;

            height:100px;

            background-color:blue;

        }

        .box {

            width: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{

            width:100px;

            height:100px;

            background-color:blue;

        }

        .box {

            width: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{

            width:100px;

            height:100px;

            background-color:blue;

        }

        .box {

            width: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>

Js网站开发学习第一天的更多相关文章

  1. .net 网站开发学习资源

    慕课网 前端基础学习 http://www.imooc.com/course/list?c=fe 了解需求 例子之一 http://wenku.it168.com/d_000517899.shtml ...

  2. 使用Google App Engine开始新的网站开发学习

    继长时间的迷茫后,我发现还是回归php网站开发更适合我,或者没有那么深刻,但至少要做点事情.不知道以后将从事什么样的工作,但现在找点事情做还是很好的.所以,为了激发我学习的热情,我在网上搜了一下免费云 ...

  3. 网站开发学习Python实现-Django项目部署-介绍(6.2.1）

    @ 目录 1.第一步:找源码 2.第二步:在windows中更改代码 2.第三步:同步到linux中 3.第三步:部署 4.第四步:运行 关于作者 1.第一步:找源码 从github上找一个djang ...

  4. 网站开发学习Python实现-Django学习-自学注意(6.1.3）

    @ 目录 1.配置文件相关 2.应用创建相关 3.项目相关 4.模板相关 5.其他 关于作者 1.配置文件相关 1.可以更改时间,地区相关(国际化) 2.BASE_DIR很重要,一个工程要有很好的移植 ...

  5. 网站开发学习Python实现-Django学习-介绍(6.1.1）

    @ 目录 1.MVT 2.ORM 关于作者 1.MVT 主要的目的是为了快速,简便的开发数据库驱动的网站,强调代码的复用,多个组件可以很方便以插件的方式服务于整个框架,采用的是MVT设计模式(差不多的 ...

  6. .NET CAD二次开发学习第一天

    基于浩辰CAD2019 需求: 开发线转圆简单命令.命令过程:1) 请选择图中直线(要求支持一次选多个):2) 弹出对话框,输入圆的图层名和半径3) 点对话框中确定按钮,结束命令.命令执行效果:所选每 ...

  7. Vue.js 项目开发学习路线图

    1. 思维导图 源文件:Vue路线图.xmind 参考文献 [1]. VueJs2.0建议学习路线 - lavyun - 博客园 [2]. Vue学习路线图 - 个人文章 - SegmentFault ...

  8. android unity3d开发学习第一步

    1:下载unitysetup 开发环境 http://unity3d.com/unity/download/download-windows 2:下载三维制作软件 制作我们需要的场景 http://u ...

  9. 网站开发学习Python实现-Django的models学习-生鲜项目(6.3.2）

    @ 目录 1.说明 2.模型类的设计 3.代码的具体实现 4.详情地址 关于作者 1.说明 models是django的很重要的部分,所以深入研究. 本文章的所研究项目为黑马教育python课程中的项 ...

随机推荐

  1. LoadRunner之录制你的第一个脚本

    LoadRunner安装完成之后,肯定就迫不及待的想要上手试用了.下面就是讲一下LR脚本录制的流程和基本的设置. 1.先放一张脚本录制以及运行的流程图 2.脚本录制步骤 1)以管理员身份打开LR软件, ...

  2. Java算法 -- 桶排序

    桶排序(Bucket sort)或所谓的箱排序,是一个排序算法,工作的原理是将数组分到有限数量的桶里.每个桶再个别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序).桶排序是鸽巢排序 ...

  3. jdk1.7 64位官方下载

    平时要新装一个系统环境,或者下载最新的jdk,就需要到oracle官网去下载一个jdk,而目前生产环境都是1.7的环境下开发完成的,需要下载1.7版本的jdk,oracle官方网站的默认下载页面是1. ...

  4. 【SSH进阶之路】Hibernate映射——一对多关联映射（七）

    上上篇博文[SSH进阶之路]Hibernate映射——一对一单向关联映射(五),我们介绍了一对一的单向关联映射,单向是指只能从人(Person)这端加载身份证端(IdCard),但是反过来,不能从身份 ...

  5. [转帖]Redis、Memcache和MongoDB的区别

    Redis.Memcache和MongoDB的区别 https://www.cnblogs.com/tuyile006/p/6382062.html >>Memcached Memcach ...

  6. gitlab升级备份

    一.备份有关备份和恢复的操作,详见我的另一篇博客:Gitlab的备份与恢复在开始升级之前,一定要做好备份工作,并记录好版本号.1.查看当前Gitlab的版本号 [root@gitlab ~]# cat ...

  7. 【转】基于FPGA的Sobel边缘检测的实现

    前面我们实现了使用PC端上位机串口发送图像数据到VGA显示,通过MATLAB处理的图像数据直接是灰度图像,后面我们在此基础上修改,从而实现,基于FPGA的动态图片的Sobel边缘检测.中值滤波.Can ...

  8. SAS学习笔记60 统计SAS实例之T检验

    单样本 H0:服从正态分布 P=0.0988>0.05不拒绝H0,服从正态分布 H0:等于140t=-2.14,P=0.0397 P<0.05,拒绝H0,差异有统计学意义 均值x=130. ...

  9. quartz2.3.0（二）触发器Trigger花式Scheduler调度job

    任务类 package org.quartz.examples.example2; import java.util.Date; import org.slf4j.Logger; import org ...

  10. VirtualBox安装文档教程

    1找到安装包双击打开 2 3 这里可以更改安装路径 4 5 6 7 等待安装 8