一个基于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. crm plugin 未能加载文件或程序集“xxxx,”或它的某一个依赖项。系统找不到指定的文件。

    plugin运行出错. 1  plugin文件如果是 注册到disk,应该是注册到 C:\Program Files\Microsoft Dynamics CRM\Server\bin\assembl ...

  2. [HDU 5074] Hatsune Miku (动态规划)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5074 题目大意是给你m个note,n个数,得分是v[a[i]][a[i+1]]的总和,如果说a[i]是 ...

  3. ASP.NET MVC开发微信（四）

  4. ajax跨域提交

    ajax跨域提交     如果在两个网站之间进行异步互动想要通过ajax时不可能的,因为header不支持xmlhttprequest这种方式的跨域提交. 但是jquery的ajax同时还提供了jso ...

  5. Android下实现控件的叠加显示

    <FrameLayout android:layout_width="fill_parent" android:layout_height="match_paren ...

  6. [神器推荐]node-webkit:跨平台桌面web应用的神器,非常有用(转)

    11月8号在清华拍的银杏树 http://finalshares.com/read-931

  7. 翻译的技巧（The Technique of Translation）——前言

    曰:你要发文章才能毕业! 答:谨遵圣命-- 缘起 研三了,要找工作了,要离开学校了,又要像浮萍般飘荡在世上了,还是学校好呀!本以为写个毕业论文就可以了,谁知老板幽幽地说写篇文章发了吧.我竟无言以对.不 ...

  8. 计数排序（Count Sort ）与插入排序（Insert Sort）

    计数排序法:计数数组适用于当前数组密集的情况.例如(2,3,5,4,2,3,3,2,5,4) 方法:先找出最大值最小值,之后统计每个数出现的次数,根据次数从小到大往数组里添加 计数排序法是一种不需要比 ...

  9. 【测试】自行建表并演示append+nologging，并描述数据写入后产生的效果

    ①创建表: SQL> create table t4 as select * from all_objects; Table created. ②设置t4处于nologging: SQL> ...

  10. C# Exception 对象的属性

    关于 C# 中 Exception 对象的属性,在程序出现异常时,需要记录异常的信息,并把信息保存起来或输出,以方便准确定位异常的根源,以下是 Exception  对象的属性 名称          ...