html的flex布局导航条下拉框

最新推荐文章于 2024-06-13 09:00:00 发布

逸曦穆泽

最新推荐文章于 2024-06-13 09:00:00 发布

阅读量2.4k

点赞数 2

分类专栏： web前端 javascript_jQuery 文章标签：下拉框导航条 flex布局

本文链接：https://blog.csdn.net/qq_41408081/article/details/80669345

版权

web前端同时被 2 个专栏收录

65 篇文章 2 订阅

订阅专栏

javascript_jQuery

21 篇文章 0 订阅

订阅专栏

代码放下了，jQuery自己引用本地的js ,记得改一下哦！<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>导航栏</title>  
<style type="text/css">  
/* 现在看看，那时写的真的有点low */
body{ margin:0;padding:0;}
.dv {width:100vw;height:100vh;/*vw和vh视图的宽和高*/ background-color: #339933; }  /*整体的div的颜色*/  
.dv-tb {display:flex;justify-content:center;/*自动适应 居中了 哈哈*/ color:white;font-size: 20px; }  
.dv-tr {display:flex;justify-content:center;align-items:center;width:150px;height:70px; position: relative;}  
.dv-tr:hover { color:orange; cursor: pointer;/*鼠标的形状为一只食指的手*/ }  
.menu { position: absolute; top:50px;background-color: #ffcccc; display: none;/*display: none;*/} 
ul, li { list-style: none; width:120px; color:#F9F9F9;/*去掉小原点*/  }  
li { padding:10px 0; /*设置li内容的内边距，上下为10px，左右为0*/ }
li:hover{color:#6633cc;}

/* 页面的整体布局 */  
#content { #margin:10px auto;width:100%;height:500px;text-align:center; display:flex;}   /* 让块级的元素在同一行显示 也可以用display：flex */
#left { width:20%;height:500px;background-color: #ff66cc; }  
#middle { width:60%;height:500px;background-color: #cc33cc; }  
#right { width:20%;height:500px;background-color: #ffcc33; }  
/*结尾栏*/  
#footer { height:40px;background-color: #cccc33;text-align:center;}  
  
</style>  
 <!--<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>-->
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>  
<body>  
<!-- 导航 -->  
<div  class="dv">
	<div class="dv-tb">
		<div class="dv-tr">首页</div>  
		<div class="dv-tr">课程  
			<ul class="menu">  
				<li>web</li>  
				<li>HTML</li>  
				<li>PHP</li>  
				<li>JAVA</li>  
			</ul>  
		</div>  
		<div class="dv-tr">精英  
			<ul class="menu">  
				<li>喜洋洋</li>  
				<li>懒洋洋</li>  
				<li>沸羊羊</li>  
			</ul>  
		</div>  
		<div class="dv-tr">学校  
			<ul class="menu">  
				<li>青青草原</li>  
				<li>灰太狼堡</li>  
				<li>太空学院</li>  
			</ul>  
		</div>  
		<div class="dv-tr">视频  
			<ul class="menu">  
				<li>腾讯课堂</li>  
				<li>慕课网</li>  
				<li>菜鸟视频</li>  
			</ul> 	 
		</div>  
		<div class="dv-tr">风采  
			<ul class="menu">  
				<li>师生互动</li>  
				<li>艺术赏析</li>  
			</ul>  
		</div>  
	</div>  
 
	<!-- 内容 -->  
	<div id="content">  
		<div id="left">left</div>  
		<div id="middle">middle</div>  
		<div id="right">right</div>  
	</div>  
	<!-- 底部 -->  
	<div id="footer">footer</div>  
</div> 
 <script type="text/javascript">
	var	ist = true;
	$(document).ready(function(){
        // 最好自己去了解一下这两对的鼠标事件用法，有一对是冒泡的
		/*$(".dv-tr").mouseover (function(){ 
			$(this).children('.menu').show();
		});
		$(".dv-tr").mouseout(function(){ 
			$(this).children('.menu').hide(); 
		});*/
		$(".dv-tr").mouseenter(function(){ 
			$(this).children('.menu').show();
		});
		$(".dv-tr").mouseleave(function(){ 
			$(this).children('.menu').hide(); 
		});
		// $(this).children('.menu').slideToggle("slow");
	})
 </script>
</body>  
</html>

浏览器的效果图：

可以把这行的宽高改为百分比（%），试试看效果

<span style="color:#ff0000">.dv {width:100vw;height:100vh;/*vw和vh视图的宽和高*/ background-color: #339933; }  /*整体的div的颜色*/  </span>

.dv {width:100%;height:100%; background-color: #fff; }  /*整体的div的颜色*/

写多了就会发现有很多东西可以自己根据实际情况写；

1、适配手机的 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

2、有适配手机样式的媒体查询样式 @media

3、可以根据 max-width,min-width 调整宽度；max-height,min-height 控制高度

4、id 与 for 的应用代替

5、后台可能用到：<a href="javascript:" target=‘right’>标签</a> =》 <iframe name="right">

逸曦穆泽

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
2
评论
html的flex布局导航条下拉框

代码放下了，jQuery自己引用本地的js ,记得改一下哦！就是这行引入jq：<script type="text/javascript" src="../js/jquery-1.8.3.js"></script><!DOCTYPE html> <html> <head> <meta charset="...
复制链接

扫一扫