一，效果图。

二，代码。

<!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#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图

    先上结果: 之前 在公司业务中用过java+Selenium+ChromeDriver ,使用起来非常顺手,可以完美模拟真实的用户浏览行为.最近休息的时候想用C#也试一下,于是有了本文. 实现原理一样 ...

  2. Spring Cloud 微服务架构全链路实践

    阅读目录: 1. 网关请求流程 2. Eureka 服务治理 3. Config 配置中心 4. Hystrix 监控 5. 服务调用链路 6. ELK 日志链路 7. 统一格式返回 Java 微服务 ...

  3. 【安富莱专题教程第2期】uC/Probe简易使用说明，含MDK和IAR，支持F103，F407和F429开发板

    说明:1. 在uCOS工程调试时,这个软件还是非常给力的,方便查看各种信息,可以认为是MDK或者IAR调试功能的图形化版本,使用JLINK连接可以随时连接查看,无需目标端代码.2. 当前教程中,我们使 ...

  4. [Swift]LeetCode62. 不同路径 | Unique Paths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  5. [Swift]LeetCode665. 非递减数列 | Non-decreasing Array

    Given an array with n integers, your task is to check if it could become non-decreasing by modifying ...

  6. [Swift]LeetCode873. 最长的斐波那契子序列的长度 | Length of Longest Fibonacci Subsequence

    A sequence X_1, X_2, ..., X_n is fibonacci-like if: n >= 3 X_i + X_{i+1} = X_{i+2} for all i + 2 ...

  7. Java中 Linux下安装Redis

    1.连接上虚拟机之后,选择/usr/local目录,将redis-4.0.6.tar.gz放入/usr/local目录. 1.1:使用Xftp将redis-4.0.6.tar.gz放入/usr/loc ...

  8. jquery配合.NET实现点击指定绑定数据并且能够一键下载

    最近在做培训管理系统中遇到一个问题,需求需点击绑定的数据,将指定的附件下载下来,并且是批量下载(绑定的数据非datagrid,后台拼接的绑定). 效果图如下: 大体思路: 1.jquery得到选中的绑 ...

  9. TCP的三次握手与四次挥手（个人总结）

    序列号seq:占4个字节,用来标记数据段的顺序,TCP把连接中发送的所有数据字节都编上一个序号,第一个字节的编号由本地随机产生:给字节编上序号后,就给每一个报文段指派一个序号:序列号seq就是这个报文 ...

  10. Git中用vim打开、修改、保存文件（转）

    一.vim 有两种工作模式: 1.命令模式:接受.执行 vim操作命令的模式,打开文件后的默认模式: 2.编辑模式:对打开的文件内容进行 增.删.改 操作的模式: 3.在编辑模式下按下ESC键,回退到 ...