一个基于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. bootstrap-下拉菜单

    <!-- 1.给父级添加class为dropdown,或者给父级添加定位属性 2.给button添加data-toggle="dropdown"属性,并添加dropdown- ...

  2. oc 中随机数的用法（arc4random( ) 、random( )、CCRANDOM_0_1( )

    来源:http://www.cnblogs.com/jay-dong/archive/2012/07/23/2604916.html 1).arc4random() 比较精确不需要生成随即种子 使用方 ...

  3. [Java] 02 String的常用方法

    public class TestString{ public static void main(String[] args){ String str1 = "123"; Stri ...

  4. [ActionScript 3.0] Away3D 官网实例

    /* Dynamic tree generation and placement in a night-time scene Demonstrates: How to create a height ...

  5. MySql中增加一列

    如果想在一个已经建好的表中添加一列,可以用诸如: alter table TABLE_NAME add column NEW_COLUMN_NAME varchar(20) not null; 这条语 ...

  6. 用HTML代码加载Unity内容

    Unity内容在浏览器通过Unity网络播放器插件加载.HTML代码与这个插件通常不直接通信,而是通过UnityObject的脚本帮助.其主要任务是Unity的内容嵌入一个非常简单的任务,通过从各种浏 ...

  7. C++容器类概述

    原文转自:http://blog.csdn.net/wangxiaolong_china/article/details/8362540 什么是容器 首先,我们必须理解一下什么是容器,在C++ 中容器 ...

  8. js对象3.1--什么是类，对象--杂志

    先来吹吹牛 大家都见过那种做的很精致的小蛋糕吧,给我的感觉就是(很精致,很好看,不经吃太少了,还忒TM的贵).那么这些蛋糕是怎么做出来的呢,反正我不相信是一个一个的扭出来的(除非老板不想赚钱了,那个一 ...

  9. RC振荡器与有源滤波器1

    自我总结,有错误欢迎指出! 一.振荡器原理: 对于正反馈,有如下公式: 讨论: 1.当A*F(jw)=1时 Af→∞(物理意义:自激振荡): 2.在f0上,F(jw)相移为0或2n∏:(因此,在f0处 ...

  10. HTTP 错误 500（Internal Server Error）

    今天在用ajax请求页面的时候出现了这么一个错误:HTTP 错误 500(Internal Server Error) 由于提示较少,过了好一阵子才找到答案:ajax请求中调用了一个不存在的函数⊙﹏⊙ ...