一，效果图。

二，代码。

<!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. Linux jdk 环境变量配置

    备忘,引用自:http://blog.csdn.net/lzwglory/article/details/54233248 1. 永久修改,对所有用户有效  # vi /etc/profile //按 ...

  2. ASP.NET Core知多少（7）：对重复编译说NO -- dotnet watch

    ASP.NET Core知多少系列:总体介绍及目录 1. 引言 我们一般的开发过程,就是编码-->编译-->运行-->调试-->定位问题--->修改代码-->编译- ...

  3. Docker 搭建pxc集群 + haproxy + keepalived 高可用（一）

    一.首先需要安装好docker,安装方法可以参考之前一篇博文Centos7安装docker [root@localhost ~]# systemctl start docker [root@local ...

  4. tensorflow、cuda、cudnn之间的版本对应关系

    原文链接 tensorflow-gpu v1.9.0 | cuda9.0 |  cuDNN7.1.4可行  | 备注:7.0.4/ 7.0.5/ 7.1.2不明确 tensorflow-gpu v1. ...

  5. 【Spark篇】---SparkSQL on Hive的配置和使用

    一.前述 Spark on Hive: Hive只作为储存角色,Spark负责sql解析优化,执行. 二.具体配置 1.在Spark客户端配置Hive On Spark 在Spark客户端安装包下sp ...

  6. TLS 1.3 VS TLS 1.2，让你明白 TLS 1.3 的强大

    HTTPS 加密时代已经来临,近两年,Google.Baidu.Facebook 等互联网巨头,不谋而合地开始大力推行 HTTPS, 2018 年 7 月 25 日,Chrome 68 上线,所有 H ...

  7. Solr 11 - Solr集群模式的部署(基于Solr 4.10.4搭建SolrCloud)

    目录 1 SolrCloud结构说明 2 环境的安装 2.1 环境说明 2.2 部署并启动ZooKeeper集群 2.3 部署Solr单机服务 2.4 添加Solr的索引库 3 部署Solr集群服务( ...

  8. 《HelloGitHub月刊》第 09 期

    <HelloGitHub>第 09 期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 前言 转眼就到年底了,月刊做到了第09期,感谢大家一路的支持和帮助

  9. 学习springboot

    一般而言,写个Javaweb应用搭建环境都可能要几十分钟,下载个tomcat服务器,再加上各种xml配置等等,很烦躁,而且每个web应用的配置还差不多,都是什么web.xml,application. ...

  10. DocX开源WORD操作组件的学习系列一

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...