【CSS学习笔记十二】菜单制作

最新推荐文章于 2024-06-06 10:41:53 发布

思索与猫

最新推荐文章于 2024-06-06 10:41:53 发布

阅读量171

点赞数

分类专栏： CSS学习文章标签： CSS 学习笔记

本文链接：https://blog.csdn.net/qq_28997735/article/details/100027237

版权

CSS学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.水平菜单

灵活应用之前所学到的知识，注意点都写着注释里了。

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			ul
			{
				list-style-type:none;
				margin:0;
				padding:0;
				width:100%;		/*水平*/			
				background-color:lightgrey;
				position:fixed; /*固定菜单栏位置*/
				top:0;			/*永远在上方*/
				overflow:auto;
			}
			li
			{
				float:left;			   /*向左浮动*/
				border:1px solid white;/*添加白色分割线*/
			}
			li a
			{
				display:block;		/*块级元素*/
				padding:16px 8px;
				color:#000;
				text-decoration:none;	
			}
			li a:hover				/*伪元素，鼠标移动到选项的那一刻为蓝色白字*/
			{
				color:white;
				background-color:blue;
			}
			li a.active				/*class选择器，激活的时候为绿色白字*/
			{
				color:white;
				background-color:green;
			}
		</style>
		<meta charset = "utf-8"/>
		<title>菜单</title>
	</head>
	<body>		 
		 <ul>
			<li><a class = "active" href = "#home">主页</a></li>
			<li><a href = "#nextpage">下一页</a></li>
			<li><a href = "#lastpage">上一页</a></li>
			<li style = "float:right"><a class = "active" href = "#about">关于</a></li> 
						<!--向右对齐-->
		 </ul>
		 
		 <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;width:100%;">
			<h1>An Title about...</h1>
			<h2>An Title about...</h2>
			<h2>An Title about...</h2>

			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
		</div>
	</body>
</html>

结果：
在这里插入图片描述

2.下拉菜单

关键点就是运用：hover

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			/*下拉菜单按钮设置*/
			.dropbutton 
			{
				background-color:green;
				color:white;
				padding:10px;
				border:1px solid black;
			}
			/*div区域设置*/
			.dropdown
			{
				position:relative;
				display:inline-table;
			}
			/*下拉内容*/
			.dropdown-content 	
			{
				/*默认隐藏*/
				display:none;	
				position:absolute;
				background-color:lightgrey;
				min-width:160px;				
			}
			/*下拉内容里的链接*/
			.dropdown-content a		
			{
				display:block;		
				color:black;
				text-decoration:none;
				padding:8px 16px;
			}
			/*鼠标移动到链接时*/
			.dropdown-content a:hover
			{
				background-color:grey;
			}
			/*移动到div区域时，隐藏内容显现，可以根据需要改变显现的位置*/
			.dropdown:hover .dropdown-content
			{
				display:block;
			}
		</style>
		<meta charset = "utf-8"/>
		<title>下拉菜单</title>
	</head>
	<body>		 
		 <div class="dropdown">
			  <button class="dropbutton">下拉菜单</button>
			  <div class="dropdown-content">
				<a href="#home">主页</a>
				<a href="#lastpage">上一页</a>
				<a href="#nextpage">下一页</a>
			  </div>
		 </div>
	</body>
</html>

结果：
在这里插入图片描述

3.提示语句

不仅提示语句，你甚至可以插入图片

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
		     /*提示容器*/
			 .tooltip
			 {
				position:relative;
				display:inline-block;
				border-bottom:1px solid green;
			 }
			 /*提示语句*/
			 .tooltip .tooltiptext
			 {
				/*可见性隐藏*/
				visibility:hidden;
				width:300px;
				background-color:lightgrey;
				color:black;
				text-align:center;
				padding:5px 10px;
				
				/*定位*/
				position:absolute;				
				z-index:1;	/*优先级高*/
				/*具体位置设置*/
				top:100%;
				left:50%;
				margin-left:-160px;
			 }
			 /*鼠标移动到提示容器时，内容显现*/
			 .tooltip:hover .tooltiptext
			 {
				visibility:visible;
			 }
			 img
			 {
				display:block;
				margin:auto;
			 }
		</style>
		<meta charset = "utf-8"/>
		<title>提示语句</title>
	</head>
	<body style = "text-align:center">
		<h1>没错我又迫害你了</h1>
		 <div class = "tooltip">
			钢板
			<span class = "tooltiptext">露西亚<img src = "露西亚.jpg" height = "400px"></span>
		 </div>
	</body>
</html>

结果：
在这里插入图片描述

思索与猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS学习笔记十二】菜单制作

一.水平菜单灵活应用之前所学到的知识，注意点都写着注释里了。实例：<!DOCTYPE html><html> <head> <style> ul { list-style-type:none; margin:0; padding:0; width:100%; /*水平*/ ba...
复制链接

扫一扫

专栏目录