css隐藏div(用div横排做导航栏)

css隐藏div

在咱们平时布局网站的时分，想要把div进行躲藏，但是很多人不知道css控制div显现躲藏？下面咱们来讲解一下css怎么让div躲藏。
1、运用display:none来躲藏div
咱们能够运用display:none特点来躲藏所有的信息，包含文本和图片，语法为：
<divstyle=”display:none;”>这儿你是看不到的div>
当咱们运用div中的css款式，咱们就能够运用display:none特点对内容进行躲藏，而且经过浏览器也是看不到的，一起被躲藏的内容是不被占用空间的，躲藏之后的内容搜索引擎是不读取的，一般咱们都是用运用js统计代码去躲藏显现的图标。
2、运用visibility:hidden;躲藏div
visibility特点规定元素是否可见。
这个特点指定是否显现一个元素生成的元素框。这意味着元素仍占有其本来的空间，不过能够彻底不行见。值collapse在表中用于从表布局中删去列或行。
特点值：
visible默认值。元素是可见的。
hidden元素是不行见的。
collapse当在表格元素中运用时，此值可删去一行或一列，但是它不会影响表格的布局。被行或列占有的空间会留给其他内容运用。如果此值被用在其他的元素上，会呈现为“hidden”。
<divstyle=”visibility:hidden;”>这儿你是看不到的div>
3、运用opacity:0躲藏div
opacity特点的意思是设置一个元素的透明度。它不是为改动元素的边界框（boundingbox）而规划的。
这意味着将opacity设为0只能从视觉上躲藏元素。而元素本身仍然占有它自己的方位并对网页的布局起作用。这和上面的visibility:hidden相似。

用div横排做导航栏

先码好导航栏所需要的基本的HTML代码
这个就不必多说详细的代码如下：
横向导航栏
下面咱们通过CSS来改变他的款式。
首要咱们先让导航在浏览器的中心。不过在让他居中前得先设置一个宽度，没有宽度就无法居中，这个的原因我就不必赘述了吧！
现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的款式，原因我就不在这多废话了）咱们在这就用980吧。
办法是在之间参加如下代码来改变他的宽度。为了让成果显着，咱们给它又加了一个边框。
接下来咱们让他居中。咱们在款式中参加以下代码。
.navul{
width:980px;/*设置元素宽度为980px*/
border:1pxsolid#000;/*设置一个颜色为#000，宽度为1px的边框*/
margin:0pxauto0pxauto;/*也可以简写为margin:0auto*/
}
由于咱们要做的是横向的导航栏，所以现在咱们要把它变成横向摆放。咱们在款式中参加以下代码。
.navulli{
float:left;/*让li元素左浮动*/
}
咱们看到测验成果如图4。
边框之所以挤到一起了是由于浮动以后li就变成了联级元素，就没有宽和高了，所以也就无法把边框撑起来了啊。（详细的原因想知道可以百度）当然稍后咱们可以给ul或.nav加上高度。
接下来，咱们通过给元素添加款式，让他更美观。参加以下代码。
.navullia{
width:80px;/*设置元素宽为80px*/
height:28px;/*设置高度为28px*/
line-height:28px;/*设置行距为28px，让文字在每行的中心方位*/
background:red;/*设置元素的背景为红色*/
color:#FFF;/*文字颜色是白色*/
margin:5px10px;
font-size:12px;/*用12号字*/
display:block;/*这个比较要害，由于a自身便是联级元素，自身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/
text-align:center;/*让文本居中*/
text-decoration:none;/*去掉下划线*/
}
咱们再参加点互动，当访客鼠标放到某个元素上的时分，这个元素要有别于其他元素。要实现这个咱们就要用到:hover这个伪类。在款式中参加以下代码。
.navullia:hover{/*这个大概的意思便是当鼠标放到这个a元素的上面时，这个a元素的款式就按下面的代码履行*/
width:78px;
height:26px;
line-height:28px;
border:1pxsolidred;
color:red;
background:#FFF;
}
最终稍微整理一下代码
.navul{
width:980px;
margin:0pxauto;
height:38px;
padding:0;
}
.navulli{
float:left;
}
.navullia{
width:80px;
height:28px;
line-height:28px;
background:red;
color:#FFF;
margin:5px10px;
font-size:12px;
display:block;
text-align:center;
text-decoration:none;
}
.navullia:hover{
width:78px;
height:26px;
line-height:28px;
border:1pxsolidred;
color:red;
background:#FFF;
}