一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS Display(显示)</title>

    <style>

    h1.hidden {

        display: none;

    }

    li {

        display: inline;

    }

    span {

        display: block;

    }

    </style>

</head>

<body>

    <h1>this is a visible heading</h1>

    <h1 class="hidden">this is a hidden heading</h1>

    <p>notice that the hidden heading still takes up space.</p>

    <ul>

        <li><a href="/html" target="_blank">HTML</a></li>

        <li><a href="/css/" target="_blank">CSS</a></li>

        <li><a href="/js/" target="_blank">JavaScript</a></li>

        <li><a href="/xml/" target="_blank">XML</a></li>

    </ul>

    <h2>nirvana</h2>

    <span>Record: MTV Unplugged in New York</span>

    <span>Year: 1993</span>

    <h2>Radiohead</h2>

    <span>Record: OK Computer</span>

    <span>Year: 1997</span>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS Display的更多相关文章

  1. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  2. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  3. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  4. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  5. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  6. CSS的display属性

    网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...

  7. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  8. Web开发——CSS基础

    参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...

  9. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  10. CSS的display显示

    CSS的display显示 1. 行内元素和块级元素关系 块级元素:1.标题标签:h1~h6:2.段落标签:p1~p6:3.div:4.列表:等 行内元素:1.span:2.a:3.img:4.str ...

随机推荐

  1. 5 个免费的受欢迎的 SQLite 管理工具【申明：来源于网络】

    5 个免费的受欢迎的 SQLite 管理工具 包含内容: SQLite Expert – Personal Edition SQLite Expert 提供两个版本,分别是个人版和专业版.其中个人版是 ...

  2. Xaml Controls Gallery 的五个没有用的控件

    HyperlinkButton 功能:这个控件可以实现点击按钮后跳到另一个按钮的功能. 我觉得这个功能有些多余,据我了解,一些深受欢迎的游戏大都具备的一个特点,那就是操作简单,界面中不会出现冗余的东西 ...

  3. 安卓开发学习笔记（一）：如何用Android Stuidio导出apk文件？

    一,首先,我们在菜单栏上找到这一栏: 然后点击build,再点击generate apk,然后出现以下界面: 由于之前我们并没有进行apk文件的生成,因此需要这个apk key做一个验证,以防您的ap ...

  4. 【RL-TCPnet网络教程】第31章 Telnet远程登录基础知识

    第31章      Telnet远程登录基础知识 本章节为大家讲解Telnet (Teletype Network) 的基础知识,方便后面章节的实战操作. (本章的知识点主要整理自网络) 31.1   ...

  5. Volatile的那些事

    上一篇中,我们了解了Synchronized关键字,知道了它的基本使用方法,它的同步特性,知道了它与Java内存模型的关系,也明白了Synchronized可以保证"原子性",&q ...

  6. ActiveMq主从机制

    搭建mq主从时会在数据库创建3张关于mq的表: 下面介绍ACTIVEMQ_LOCK这张表的作用: Although the JDBC Store does not offer the best per ...

  7. linux系统安全设置策略

    1.检查是否设置口令长度至少8位,并包括数字,小写字符.大写字符和特殊符号4类中至少2类. 在文件/etc/login.defs中设置 PASS_MIN_LEN 不小于标准值 修改/etc/pam.d ...

  8. asp.net core系列 23 EF模型配置(概述, 类型和属性的包含与排除)

    一.模型配置概述 EF使用一组约定基于实体类的定义来构建模型. 可指定其他配置以补充或替代约定的内容.本系列介绍的配置可应用于面向任何数据存储的模型,以及面向任意关系数据库时可应用的配置. 数据库提供 ...

  9. CentOS 6下安装Python2.7

    安装方法 如果在CentOS上自己编译安装过python2.7,使用过程中会发现有些标准库没有安装之类的问题. 逛别人博客的时候发现,一个便捷的方法:使用RHSCL的全称是Red Hat Softwa ...

  10. Java设计模式学习总结

    设计模式基础学习总结 这篇总结主要是基于我之前设计模式基础系列文章而形成的的.主要是把重要的知识点用自己的话说了一遍,可能会有一些错误,还望见谅和指点.谢谢 更多详细内容可以查看我的专栏文章:设计模式 ...