一个基于CSS+dIV的网页层，用JavaScript结合Input按钮进行控制，点击后显示或隐藏，网页上常用到的特效之一，实用性较强，相信对大家的前端设计有帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>层隐藏，层点开</title>

</head>

<body>

<div id="box" style="border:1px solid #000; height:300px; width:300px;" ><a href='http://www.100sucai.com' target='_blank'>http://www.100sucai.com</a></div>

<input name="" type="button"  value="点击隐藏"  id="btn" onclick="btn()"  style="position:absolute; left:320px; top:10px;">

</body>

<script type="text/javascript">

var btn1=document.getElementById('btn');

var box1=document.getElementById('box');

function btn(){ if(btn1.value=="点击隐藏"){box1.style.display='none';btn1.value="点击显示";

}else{box1.style.display='';btn1.value="点击隐藏";

}

}

</script>

</html>

　　

基于CSS+dIV的网页层，点击后隐藏或显示的更多相关文章

  1. 基于CSS的个人网页

    前端时间做的CSS作业:基于CSS的个人网页 基于CSS的个人网页 效果图: 代码: <!DOCTYPE html> <html> <head> <meta ...

  2. CSS：CSS+DIV布局网页

    现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...

  3. CSS 小结笔记之元素的隐藏与显示

    在网站上经常会有一些需要一定操作才会显示或隐藏的元素,这时会用到元素的隐藏与显示.主要通过以下三种属性实现. 1.display :none|block |inline |inline-block d ...

  4. CSS文本超出2行就隐藏并且显示省略号

    今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...

  5. css文本超出2行就隐藏并显示省略号

    之前在网上看到过这样的代码,感觉有的时候还是挺有用的,故留个笔记. display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -webkit-box-orient:vertica ...

  6. css 文本超出n行就隐藏并且显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  7. [Javascript] 层控制(隐藏、显示、卷起、展开)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css 文本超出2行就隐藏并且显示省略号

    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webk ...

  9. [置顶] CSS+DIV总结

         HTML在Web飞速发展的过程中起着重要作用,有着重要地位.HTML初衷是为了表达标签(<p>.<table>)的内容信息.同时文档布局由浏览器来完成,不使用任何格式 ...

随机推荐

  1. winform窗体的关闭与资源的释放

    单纯的this.Dispose(); this.Close();有时候并不能释放出所用资源.因为Dispose()方法,虽然能释放当前窗体的资源,却不能强制结束循环,  要想强制突出当前程序要用:Sy ...

  2. Gatling的进阶一

    转载:http://www.51testing.com/html/10/26810-852966.html 首先 抄袭一个Gatling的介绍 Gatling是一款基于Scala 开发的高性能服务器性 ...

  3. struts2常用的常量constant

    常用的常量配置  struts.serve.static.browserCache 该属性设置浏览器是否缓存静态内容.当应用处于开发阶段时,我们希望每次请求都获得服务器的最新响应,则可设置该属性为fa ...

  4. 菜鸟-手把手教你把Acegi应用到实际项目中(6)

    在企业应用中,用户的用户名.密码和角色等信息一般存放在RDBMS(关系数据库)中.前面几节我们采用的是InMemoryDaoImpl,即基于内存的存放方式.这节我们将采用RDBMS存储用户信息. Us ...

  5. 动手学servlet(四) cookie和session

    Cookie   cookie是保存在客户端的一个“键值对”,用来存储用户的一些信息 cookie的应用: -在电子商务会话中标识用户 -对网站进行定制,比如你经常浏览哪些内容,就展示哪些页面给你 - ...

  6. TextView里的文 html

    一.[Android实例]实现TextView里的文字有不同颜色 转eoe:http://www.eoeandroid.com/thread-4496-1-1.html import android. ...

  7. TortoiseSVN期望文件系统格式在“1”到“6”之间;发现格式“7”

    安装好Subversion和TortoiseSVN之后.检出和浏览版本库的时候一直报错 "期望文件系统格式在"1"到"6"之间;发现格式"7 ...

  8. Java基本概念（未完）

    仅简单总结~辅助快速回忆~ 一.JVM 1,Java类加载机制 Java程序由多个类文件组成,按需加载. Java的动态扩展是由运行期动态加载和动态链接实现的.——动态绑定,多态. 加载步骤: 1)装 ...

  9. sqlserver 常用sql语句

    SELECT COUNT(*) FROM WeixinUser SELECT COUNT(*) FROM WeixinUser WHERE datediff(day, CreateTime,getda ...

  10. HTML5中querySelector()和querySelectorAll()

    HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器 ...