一，效果图。

二，代码。

<!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. C#嵌套类

    { "children" : [{ "children" : [{ "children" : [], "name" : ...

  2. 发现了学校教务处官网的两个BUG

    许久没有写博客了,感觉自己技术还差的好多-_-好像没啥好写的,之前学完了某易的WEB安全基础视频教程,自认对WEB安全入了门,忍不住就想拿学校教务处官网来练练手 教务处登录界面如图所示(为保护隐私,部 ...

  3. python Cookie Session 相关用法

    Cookie一.前言1.http协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响 应情况直接影响,也不会直接影响后面的请 ...

  4. go 使用 c接口

    在使用go语言时, 有时为了方便可以直接调用c语言的接口与库, 不需要重复编写. 那就来说说在go语言里面如何调用c的接口 首先编写好c语言的源文件与头文件,这里举一个简单的例子,实现一个字符串大小写 ...

  5. Java提高篇（三）：内部类和匿名内部类

    一,内部类 其实内部类是十分简单的,我们根据其字里行间的意义就可以知道内部类应该是一个类当中的一个类,相当于一个类进行了嵌套,就如同循环的嵌套一般. 内部类有一个特征:内部类当中可以调用外部类当中的属 ...

  6. JavaScript 实现textarea限制输入字数， 输入框字数实时统计更新，输入框实时字数计算移动端bug解决

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...

  7. [Swift]LeetCode151. 翻转字符串里的单词 | Reverse Words in a String

    Given an input string, reverse the string word by word. Example: Input: "the sky is blue", ...

  8. 交叉编译 tcpdump

    目录 1. 下载 tcpdump 2. 交叉编译 3. 相关说明 1. 下载 tcpdump 官网:http://www.tcpdump.org/ 2. 交叉编译 交叉编译libpcap: $ wge ...

  9. hive中beeline取回数据的完整流程

    这里我们从BeeLine.execute讲起. 接下来来到BeeLine.dispatch,这里的入参就是sql语句.方法的最后调用了Commands.sql,然后调用到了Commands.execu ...

  10. 解决 python 读取文件乱码问题（UnicodeDecodeError）

    解决 python 读取文件乱码问题(UnicodeDecodeError) 确定你的文件的编码,下面的代码将以'utf-8'为例,否则会忽略编码错误导致输出乱码 解决方案一 with open(r' ...