欢迎进入悦阁网络,做靠谱的公司,做靠谱的网站! 【登录】 【注册】 【新版官方网站】 全国7*24热线电话: 0757-89375359 18824129793、 020-89375359
悦阁观点
悦阁软著证书
div css教程
html教程-H5
百度竞价教程
SEO推广教程
网站售后文档
建站沙漠风云
网站建设知识
微信营销知识
微信营销技巧
投诉建议
投诉中心受理方式:
电话:13928792327
邮箱:hefc@yuegekeji.cn
CSS display 【css显示 隐藏块】属性教程

CSS display 【css显示 隐藏块】属性教程


CSS display none block inline显示隐藏对象

我们常常使用display样式设置对象及对象内容显示与隐藏。

一、display语法

Block 块对象的默认值。用该值为对象之后添加新行
None 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
Inline 内联对象的默认值。用该值将从对象中删除行

二、常用display

1、div{display:block} 有换行作用。

2、div{display:None } 隐藏对象及对象内容。

3、div{display:inline } 在一排显示。
代表案例,对li列表默认一排显示li{display:Inline }

三、display显示与隐藏案例

我们重点讲解常用的display显示对象内容(display:block)与隐藏对象内容(display:None),通过案例介绍。

通常默认html内容是显示,但有时我们想前期他隐藏,鼠标经过一个触发地方,便显示被隐藏内容,这个时候开始时候我们运用display:None,当鼠标经过触发地方时,JS对应调用display:block样式的CSS显示内容。常见Tab滑动门选项卡(鼠标经过栏目,对应内容显示)。

因为HTML在不设置CSS display样式,本身内容是显示的,所以我们这里就只实践通过CSS div display隐藏对象。

1、隐藏案例说明
我们使用css display:none隐藏一个DIV与此DIV标签内的内容。

2、CSS代码片段

 

3、HTML代码片段

我显示 第一排
我被隐藏 第二排
我显示 第三排

四、display总结

这里特别要说明使用display:none是比较方便的隐藏对象内容方法,比如他们在网页插入第三方统计时候,便会显示CNZZ的图标或文字内容,为了又统计网页网站访问流量,又要通过CSS隐藏掉,我们即可以使用此样式实现;对于一些SEO来说隐藏链接,使用display:none将是一个错误选择,无论display:none是在html标签内使用还是,CSS文件引入,搜索引擎都会识别你使用此属性,搜索引擎也不会读取或索引你此样式里的内容。



作者:@悦阁网络科技 

悦阁网络科技有限公司专业为中小企业提供精致的佛山网站建设佛山网站设计佛山网站制作及相关网络营销等服务,是广佛地区最好的网络科技公司之一,在广佛做网站开发就找悦阁网络科技!

您对建网站有需求?请回到首页“悦阁网络”官网  查找您想建哪种类型的网站,然后联系我们客服QQ,我们将竭诚为您服务!


Copyright © 2011 All rights reserved 佛山市悦阁网络科技有限公司版权所有 粤ICP备14100185号 技术支持:悦阁科技 佛山网站建设11111 | 在线助手高新企业证书编号:GR201744001793

× 悦阁网络科技有限公司-在线助手

你好!
悦阁网络科技有限公司在线助手,请输入你要想知道的问题关键字