【第四次网页前端培训笔记】

最新推荐文章于 2024-03-27 14:34:45 发布

qq_52940113

最新推荐文章于 2024-03-27 14:34:45 发布

阅读量105

点赞数

文章标签：前端 javascript 前端框架

本文链接：https://blog.csdn.net/qq_52940113/article/details/122822406

版权

1.学习资料

CSS 下拉菜单 | 菜鸟教程 (runoob.com)

2.视频例子截图

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#h{
			width: 100px;
			height: 100px;
			background: chartreuse;
		}
		#h0{
			width: 100px;
			height: 100px;
			background: blueviolet;
		}
		</style>
	</head>
	<body>
		<div id="h"></div>
		<div id="h0"></div>
	</body>
</html>

如果想要左右在一起，只需float就好

代码如下

#h{
			width: 100px;
			height: 100px;
			background: chartreuse;
			float: left;
		}
		#h0{
			width: 100px;
			height: 100px;
			background: blueviolet;
			float: left;
		}

3.作业截图

关键代码部分

<style>
		.dropbtn {
		    background-color: #1A4481;
		    color: #ffffff;
		    padding: 5px;
		    font-size: 16px;
			font: "楷体";
		    border: none;
		    cursor: pointer;
		}
		
		/* 容器 <div> - 需要定位下拉内容 */
		.dropdown {
		    position: relative;
		    display: inline-block;
		}
		
		/* 下拉内容 (默认隐藏) */
		.dropdown-content {
		    display: none;
		    position: absolute;
		    background-color: #1A4481;
			font: "楷体";
		    min-width: 100px;
		    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		}
		
		/* 下拉菜单的链接 */
		.dropdown-content a {
		    color: #ffffff;
		    padding: 5px 5px;
			margin: 0;
			font-size: 10px;
		    text-decoration: none;
		    display: block;
		}
		
		/* 鼠标移上去后修改下拉菜单链接颜色 */
		.dropdown-content a:hover {background-color: #f1f1f1}
		
		/* 在鼠标移上去后显示下拉菜单 */
		.dropdown:hover .dropdown-content {
		    display: block;
		}
		
		/* 当下拉内容显示后修改下拉按钮的背景颜色 */
		.dropdown:hover .dropbtn {
		    background-color: #1A4481;
		}
		 #h1{
			 padding: 0;
			 margin: 0;
		 }
		 #h2{
			 margin: 0;
			 padding: 0;
		 }
		 #h3{
			 
			 background-image: url(img/水印.jpg);
			 background-position: right;
			 background-repeat: no-repeat;
		 }
		 
		ul
		{
			list-style-type:none;
			margin:0;
			padding:0;
			overflow:hidden;
		}
		li
		{  
			float:left;
		}
		#h5{
			width:90%;
		}
		
			 
		 
		</style>

下拉菜单：（举例说明）

<div class="dropdown">
		  <button class="dropbtn"><a href="http://www.zzuli.edu.cn/159/list.htm"><font color="floralwhite" face="楷体" >学校概况</font>  </a></button>
		  <div class="dropdown-content">
		    <a href="http://www.zzuli.edu.cn/160/list.htm"><font color="floralwhite" face="楷体" >学校简介</font></a>
		    <a href="http://www.zzuli.edu.cn/161/list.htm"><font color="floralwhite" face="楷体" >校规校训</font></a>
		    <a href="http://www.zzuli.edu.cn/xfjfxf/list.htm"><font color="floralwhite" face="楷体" >校风教风学风</font></a>
			<a href="http://www.zzuli.edu.cn/xg/list.htm"><font color="floralwhite" face="楷体" >校歌</font></a>
			<a href="http://www.zzuli.edu.cn/162/list.htm"><font color="floralwhite" face="楷体" >现任领导</font></a>
			<a href="http://www.zzuli.edu.cn/163/list.htm"><font color="floralwhite" face="楷体" >校园风光</font></a>
		  </div>
		</div>

4.总结

相对来说，还行吧

qq_52940113

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【第四次网页前端培训笔记】

1.学习资料CSS 下拉菜单 | 菜鸟教程 (runoob.com)2.视频例子截图代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #h{ width: 100px; height: 100px; background: chartreuse; }
复制链接

扫一扫