怎样通过css属性隐藏页面中的div?

html-css013

怎样通过css属性隐藏页面中的div?,第1张

用display属性,想隐藏那一段就把代码加在那一段,例子如下

<div style="display:none">

   <h1></h1>

   <ul>

       <li></li>

        <li></li>

   </ul>

</div>

记录一下日常开发...

之前开发隐藏 div 滚动条,都是通过设置外出 div 为 overflow: hidden , 然后设置内层 div 的宽度略大于外层 div ,这种做法限制很多,需要确定内外层 div 的宽度,没办法自适应多种分辨率的屏幕,而且开发调试起来很麻烦。

总结一下,隐藏 div 滚动条的几种方式

(1)1、js方法,这是一般网站常用的方法。

优点:兼容性好,易管理。

实现方式:按钮

onclick

触发

目标div

显示/隐藏。

代码有很多。

2、纯css方法:这是为了应付考试,掌握灵活性而用

缺点:需要支持css3的浏览器,兼容性不佳。

实现方法:利用css的伪类选择,将整个一体放到一个div中,包括

触发按钮、标题、内容。在div的css上写高度、overflow:hidden,在hover或active伪类上写新的高度即可,并不太实用。特意为你写的示例:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

#box { width:400pxheight:30pxborder:1px #666666 solidpadding:10pxoverflow:hidden}

#box h5{ border:1px #666666 solidheight:30pxmargin:0padding:0}

#box p{ border:1px #666666 solid}

#box:hover { height:100px}

</style>

</head>

<body>

<div id="box">

<h5>+ 标题</h5>

<p>这里是内容,也可以用 #box:active { height:100px},这是鼠标按下的效果。</p>

</div>

</body>

</html>

(2)CSS是用级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。