一，效果图。

二，代码。

<!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. powerdesigner 不能自动生成注释的解决方法(三步解决)

    解决power designer 不能自动生成注释的解决办法只需要3步: 一.快捷键 Ctrl+Shift+X 打开脚本编辑器:(快捷键不能执行的话可以从这个路径执行:Tools --> Exc ...

  2. NeuChar 平台使用及开发教程 索引

    什么是 NeuChar? NeuChar 是由盛派(Senparc)团队发布的新一代跨平台服务系统,其中包含了开放的跨平台通讯标准及核心计算模块(Senparc.NeuChar.dll)以及配套的云管 ...

  3. 最新手机号正则表达式 java 、javascript版正则表达式验证是否为11位有效手机号码

    最近在做注册登陆页面,都要涉及到验证11位有效手机号码,这里贴出代码,希望能帮到有这个开发需求的朋友. function isPoneAvailable($poneInput) { var myreg ...

  4. 混合物App开发中，在移动设备上调试查看日志，重写window.console

    (function(){ var print={ lock:true, log:function(param){ if(this.lock){ var element=document.createE ...

  5. emWin收音机，含uCOS-III和FreeRTOS两个版本

    第11期:收音机配套例子:V6-919_STemWin提高篇实验_收音机(uCOS-III)V6-920_STemWin提高篇实验_收音机(FreeRTOS) 例程下载地址: http://forum ...

  6. [Swift]LeetCode583. 两个字符串的删除操作 | Delete Operation for Two Strings

    Given two words word1 and word2, find the minimum number of steps required to make word1 and word2 t ...

  7. [Swift]LeetCode827. 最大人工岛 | Making A Large Island

    In a 2D grid of 0s and 1s, we change at most one 0 to a 1. After, what is the size of the largest is ...

  8. OpenOCD的概念，安装和使用

    概念: OpenOCD是一个运行于PC上的开源调试软件,它可以控制包括Wiggler之内的很多JTAG硬件:我们可以将它理解为一种GDB服务程序.OpenOCD的源码只能通过SVN下载,地址是:svn ...

  9. solr索引报错(java.lang.OutOfMemoryError：GC overhead limit exceeded)

    配置文件修改如下: <dataSource driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost:3 ...

  10. Android--MediaPlayer高级

    前言 之前博客里已经将了MediaPlayer的简单应用,如何使用MediaPlayer在Android应用中播放音频.这篇博客在MediaPlayer使用的基础上,讲解一下MediaPlayer的一 ...