Css的學習：ul li 問題收集

原創

2020-02-21 11:38

問題：* {margin:0;padding:0;}

    * 是表示針對HTML的所有元素。 margin表示邊框外面留的空白，後面的0表示不留空白。 padding表示邊框內部帶內容之間填充，後面的0表示不留空白。 border表示邊框，後面的0px表示邊框寬度爲0像素，邊框繪製方式none表示不繪製邊框。

問題：ul{list-style:none; padding:0;}

list-style:none 不使用項目符號設置列表的格式爲none。也就是沒有格式。列表格式有好幾種。有前面是圓點的。有是小正方快的等等。 padding:0 padding是內邊距內邊距=0

問題：ul li{background: #888;display: none;}

	display: none;隱藏對象。與 visibility 屬性的hidden值不同，其不爲被隱藏的對象保留其物理空間

下面是演示代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>1-3</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	
	<style type="text/css">
		#menu{
			width: 300px;
		}
		
		.has_children{
			background: #69c;
			color: #fff;
			cursor: pointer;
		}
		
		.highlight{
			color: #fff;
			background: green;
		}
	
		ul{
			list-style:none;
			padding:0;
		}
		
		ul li{
				background: #888;
				display: none;
		}
	</style>
  </head>
  
  <body>
    <div id="#menu">
    
    	<ul class="has_children">中國
    		<li>北京</li>
    		<li>上海</li>
    		<li>天津</li>
    		<li>重慶</li>		
    	</ul>
    	
    	<ul class="has_children">美國
    		<li>紐約</li>
    		<li>華盛頓</li>
    		<li>拉斯維加斯</li>
    	</ul>
    	
    	<ul class="has_children">日本
    		<li>東京</li>
    		<li>名古屋</li>
    		<li>仙台</li>
    	</ul>
    
    </div>
  </body>
</html>