关闭

关于js和div的简单应用

259人阅读 评论(0) 收藏 举报

第一部分

------------------------------------------------------------------------------------------------------------------------------------------------

<html>
  <head>
     <title>JS测试</title>
  </head>
  <style>
    body{
   padding:0;
   spacing:0;
 }
    #top{
   width:800px;
   height:50px;
   background-color:#336699;
   display:block;
 }
 #content{
   spacing-top:1px;
   width:800px;
   height:200px;
   background-color:#336699;
 }
 #foot{
   width:800px;
   height:200px;
   background-color:green;
   border:1 solid red;
 }
  </style>
  <script language="javascript">
    function mo(){
     document.getElementById('content').style.visibility="hidden";
 }
 function no(){
     document.getElementById('content').style.visibility="visible";
 }
 function mo1(){
     document.getElementById('top').style.display="none";
  document.getElementById('content').style.background="yellow";
 }
 function no1(){
     document.getElementById('top').style.display="block";
  document.getElementById('content').style.background="#336699";
 }
 function con(){
     document.getElementById('foot').innerHTML='<font color="red">这个世界很美好!</font><br><input type="text" value="你是个好人" />';
 }
  </script>
  <body>
     <div id="top" onmouseover="mo1();" onmouseout="no1();">
     这是头部
  </div>
  <div id="content" onmouseover="mo();" onmouseout="no();">
     这是内容部分<BR>
  
  </div>
  <div id="foot" onmouseover="con();">
     foot
  </div>
  </body>
</html>

第二部分

----------------------------------------------------------------------------------------------------------------------------------------------

<html>
  <head>
     <title>JS测试</title>
  </head>
  <style>
    #top{
   width:800px;
   height:50px;
   background-color:#336699;
   display:block;
 }
 #foot{
   width:800px;
   height:100px;
   border:1 solid blue;
   text-align:center;
 }
 
  </style>
  <script language="javascript">
  
 function mo1(){
     document.getElementById('top').style.background="red";
 }
 function no1(){
     document.getElementById('top').style.background="#336699";
 }
 function getHTML(){
     var setHTML = document.getElementById('top').innerHTML;
  document.getElementById('foot').innerHTML = setHTML;
 }
  </script>
  <body>
     <div id="top" onmouseover="mo1();" onmouseout="no1();">
     这是头部,你好!
  </div>
  <div id="foot">
    <button onclick="getHTML();">内容</button>
  </div>
  </body>
</html>

第三部分

------------------------------------------------------------------------------------------------------------------------------------------

<html>
<head>
  <title>页面内容不能被复制</title>
</head>
<style>
@media print{
  body{
  display:none;
  }
}
</style>
<body oncontextmenu="return false"
      ondragstart="return false"
   onselectstart="return false"
   onselect="document.selection.empty()"
   oncopy="document.selection.empty()"
   onbeforecopy="return false"
   onmouseup="document.selection.empty()">
  
   好好学习,天天向上!
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:12202次
    • 积分:205
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:1篇
    • 译文:0篇
    • 评论:3条
    文章分类
    文章存档