HTML--二级菜单的实现

最新推荐文章于 2024-07-05 14:02:55 发布

lkfmiaomiao

最新推荐文章于 2024-07-05 14:02:55 发布

阅读量5.6k

点赞数 3

本文链接：https://blog.csdn.net/lkfmiaomiao/article/details/100573995

版权

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级菜单操作</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			li{
				list-style:none;
			}
			a{
				text-decoration:none;
			}
			.nav{
				font-size:0px;
			}
			
		.nav>li{
			    display:inline-block;
			    /*垂直对齐方式*/
			   vertical-align:top;
				width:100px;
				height:30px;
				line-height:30px;
				color:black;
				background:pink;
				text-align:center;
				font-size:16px;
			}
			.subNav{
				display:none;
			}
			.nav li:hover .subNav{
				display:block;
				
			}
			.subNav li:hover{
				color:black;
				background-color:lightblue;
				font-size:25px;
			}
			.subNav li:active{
				background:yellow;
				color:green;
				
			}
			
			</style>
	</head>
	<body>
		
		<ul class="nav">
	   <li>
	   	<a href="#">首页</a>
	   	<ul  class="subNav">
	   		<li>文综</li>
	   		<li>理综</li>
	   	</ul>
	   	</li>
	<li>
		<a href="#">文综</a>
		<ul  class="subNav">
			<li>政治</li>
			<li>历史</li>
			<li>地理</li>
		</ul>
	</li>
	<li>
		<a href="#">理综</a>
	  	<ul  class="subNav">
	  		<li>物理</li>
	  		<li>化学</li>
	  		<li>生物</li>
	  	</ul>
	</li>
	
</ul>

	</body>
</html>

效果图如下所示：
访问前：
在这里插入图片描述
鼠标经过时：

鼠标点击时：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				background: dimgray;
			}
			.box{
				width:1200px;
				height:60px;
				background-color:white;
				border:2px solid white;
				margin:100px auto;
				padding:20px; 
				font-size:0px; 
		}
		
		
		.box div{
			   width:230px; 
			   height:60px; 
			   background-color:pink; 
			   border-right:2px solid red; 
			   display:inline-block; 
				
				
			
		}
		.box .last{
			border-right:none; 
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div ></div>
			<div ></div>
			<div ></div>
			<div ></div> 
			<div class="last"></div>
		</div>

	</body>
</html>

效果图如下所示：
在这里插入图片描述
知识点：
盒模型
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 : 元素不显示

lkfmiaomiao

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML--二级菜单的实现

二级菜单练习练习使用displaydisplay:none;/block;/inline-block;练习代码如下所示：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>二级菜单操作</title> <style> *...
复制链接

扫一扫