HTML--二级菜单的实现

二级菜单练习
练习使用display
display:none;/block;/inline-block;
练习代码如下所示：

	
		
		
		
	
	
		
		

	   

	   	首页
	   	

	   		
文综
	   		
理综
	   	
	   	
	

		文综
		

			
政治
			
历史
			
地理
		
	
	

		理综
	  	

	  		
物理
	  		
化学
	  		
生物
	  	
	
	


	

效果图如下所示：
访问前：

鼠标经过时：

鼠标点击时：

实现盒子模型的代码如下：

效果图如下所示：

知识点：
盒模型
width
height
border : 1px solid red;
border-top
border-right
border-bottom
border-left
margin(外边距：盒子之间的距离)
margin-top
margin-right
margin-bottom
margin-left
padding(内边距：盒子边缘与内容之间的距离)
padding:10px；四个方向一样
padding:20px 10px；上下 / 左右
padding: 10px 20px 30px;上 / 左右 / 下
padding: 10px 20px 30px 40px;上右下左
display:block/inline/inline-block/none;
block : 将元素转换成块级元素
inline : 将元素转换成行内元素
inline-block : 将元素转换成行内块元素
none : 元素不显示