src/css/常见的CSS样式/display样式(隐藏列表).html

<!--
  ~ Copyright (c) 2021/7/3 上午10:04 @程云博 <2484720940@qq.com> All Rights Reserved
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display样式(隐藏列表).html</title>
	
	<!-- 样式块 -->
	<style type="text/css">
		.citys {
			/* 
				display样式：
					1.属于布局样式
					2.用来设置显示或者隐藏
					3.隐藏：none
					4.显示：block或者inline-block
						block：以块的形式展示
						inline-block：以块的形式展示，但是不会独自占用一行。
			 */

			/*可以将列表隐藏起来*/
			display:none;
		}

		#mytext{
			/*可以将文本框隐藏起来*/
			display:none;
		}

	</style>
</head>
<body>
	<!-- 无序列表 -->
	<ul>
		<li>中国
			<!-- 嵌套二级无序列表 -->
			<ul class="citys">
				<li>上海</li>
				<li>北京</li>
				<li>河北</li>
			</ul>
		</li>
		<li>美国
			<!-- 美国中嵌套二级标题 -->
			<ul class="citys">
				<li>华盛顿</li>
				<li>芝加哥</li>
				<li>波士顿</li>
			</ul>
		</li>
		<li>日本</li>
	</ul>

	<input type="text" id="mytext" style="border: solid 1px red"/>
</body>
</html>