【代码笔记】Web-CSS-CSS Display

本文深入讲解了CSS中Display属性的应用,包括如何使用display:none隐藏元素,display:inline使元素以行内方式显示,以及display:block将元素设置为块级元素。通过实例展示了不同display值对页面布局的影响。

一,效果图。

二,代码。

复制代码
<!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>
复制代码

 

参考资料:《菜鸟教程》

转载于:https://www.cnblogs.com/yang-guang-girl/p/10344761.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值