HTML第二次作业

最新推荐文章于 2022-11-09 11:37:38 发布
最新推荐文章于 2022-11-09 11:37:38 发布
阅读量437 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyingshudian/article/details/104777696
版权

谈一谈你对CSS中绝对定位和相对定位的认识

一般而言，父采用相对定位，子采用绝对定位

绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。


绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。


相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2、纯CSS三级菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding: 0px;margin: 0px;}
		header{background:#ee82ee;width:100%;height:100px;margin-bottom: 2px;position: relative;}
		/*article{background: #123456;width:32%;height:600px;float:left; }*/
		.c01{background:#eee35a;width:37%;height:150px;float:left;margin-right:10px;margin-bottom: 2px;}
		.c02{background:#f2e68c;width:37%;height:150px;float:left;margin-bottom: 2px;}
		.b01{background:#f08380;width:24%;height:150px; float:right;margin-bottom: 2px;}

		.c03{background:#eee35a;width:37%;height:150px;float:left;margin-right:10px;margin-bottom: 2px;}
		.c04{background:#f2e68c;width:37%;height:150px;float:left;margin-bottom: 2px;}
		.b02{background:#f08380;width:24%;height:150px; float:right;margin-bottom: 2px;}

		.c05{background:#eee35a;width:37%;height:150px;float:left;margin-right:10px;margin-bottom: 2px;}
		.c06{background:#f2e68c;width:37%;height:150px;float:left;margin-bottom: 2px;}
		.b03{background:#f08380;width:24%;height:150px; float:right;margin-bottom: 2px;}

 		.c07{background:#eee35a;width:37%;height:150px;float:left;margin-right:10px;}
		.c08{background:#f2e68c;width:37%;height:150px;float:left;margin-top:2px;}
		.b04{background:#f08380;width:24%;height:150px; float:right;margin-bottom: 2px;}
		
		section{height:600px;}
		footer{background:#cc9900;width:100%;height:100px;clear:both;margin-top:10px;}
		nav{position:absolute;left:250px;bottom:5px;color:blue;font-weight: bold}
		ul{list-style: none;}
		ul li{float: left;}
		ul li a{text-decoration: none;
               color:#fff;
               background: #00f;
               height: 40px;  
               display: block;
               line-height: 40px;
               margin-right: 2px;
               padding: 0px 10px;
		}
         ul li a:hover{background: green;}
         ul li ul li{position: relative;float:none;width: 150px;border-top:1px solid white;}
         ul li ul{position:absolute;width: 190px;display: none;}
         ul li:hover ul{display: block;}

         ul li:hover ul li ul{display: none;}/*一级菜单下需隐藏三级菜单*/

         ul li ul li ul{position:absolute;left:150px;top: 0px;display: none;}/*三级菜单设置*/
         ul li ul li:hover ul{display: block;}/*鼠标放在二级菜单上出现三级菜单*/
	</style>
</head>
<body>
	<header>
    
	    <nav>
	 	    <ul>
	 		    <li><a href="#">学校概况</a></li>
       			    <li><a href="#">管理机构</a></li>
       			    <li><a href="#">学院设置</a>
       				    <ul>
       					    <li><a>电器学院</a></li>
       					    <li><a>能源学院</a></li>
       					    <li><a>计算机科学与技术学院</a>
       					    	<ul>
       					        	<li><a href="#">信息</a></li>
       					        	<li><a href="#">优化</a></li>
       					        	<li><a href="#">自然</a></li>
       					        </ul>
       					    </li>

       					    <li><a>矿业学院</a></li>
       					    <li><a>化工学院</a></li>
       					       
       				    </ul>
       			    </li>
       			    <li><a href="#">招生就业</a></li>
       			    <li><a href="#">科学研究</a></li>
	 	    </ul>

	    </nav>
	 
	</header>

	<section>
		<article class=c01></article>
		<article class=c02></article>
		<aside class=b01></aside>
		<article class=c03></article>
		<article class=c04></article>
		<aside class=b02></aside>
		<article class=c05></article>
		<article class=c06></article>
		<aside class=b03></aside>
		<article class=c07></article>
		<article class=c08></article>
		<aside class=b04></aside>
	</section>
	<footer></footer>
</body>
</html>

3、纯js三级菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="shortcut icon" href="hpu.png">
	<style>
	*{padding:0px;margin:0px;}
	header{background:#8f0;
		   width:100%;
		   height:100px;
		   margin-bottom:3px;
		   position:relative;
		   }
	 section{
		   width:100%;
		   height:600px;
			/*margin-bottom:5px;*/
		}
	#a1{background:cyan;
		width:30%;
		height:600px;
		float:left;
		margin-right:5px;
	    }
	#a2{background:#d45;
		width:39.5%;
		height:600px;
		float:left;
	}
	aside{background: purple;
		  width:29.5%;
		  height:600px;
		  float:right;
		}
	footer{background:#a50;
		   width:100%;
		   height:100px;
		   clear:both;
		   margin-top:5px;
		}
	nav{position:absolute;
		left:200px;
		top:55px;
	}

	ul{list-style: none;}
	ul li{float:left;}
	ul li a{display:block;
		text-decoration: none;
			background:#05f;
			color:#fff;
			font-weight: bold;
			height:40px;
			line-height:40px;
			margin-right: 1px;
			padding:0px 10px; 
	}
	ul li a:hover{background:#f90;}
	ul li ul{margin-top:1px;display:none;}
	ul li ul li{position: relative;float:none;}
	ul li ul li a{border-bottom:1px solid white;}


	/*ul li:hover ul{display:block;}*/
	ul li ul li ul{position:absolute;left:86px;top: 0px;width: 100px;margin-top:0px;display:none;}  /*三级菜单设置*/
	ul li ul li ul li{float:none;}
	ul li ul li ul li a{border-bottom:1px solid white;}
	</style>
</head>
<body>
	
	<header>
		<nav>
			<ul>
				<li><a href="#">学校概况</a></li>
				<li><a href="#">管理机构</a></li>
				<li onmouseover=showmenu(this) onmouseout=hidemenu(this)><a href="#">院系设置</a>   
					<ul >
						<li><a href="#">电气学院</a></li>
						<li><a href="#">安全学院</a></li> 
						<li onmouseover=showmenu(this) onmouseout=hidemenu(this)><a href="#">材料学院</a>  
							<ul>
       					        <li><a href="#">信息</a></li> 
       					        <li><a href="#">优化</a></li>
       					        <li><a href="#">自然</a></li>
       					    </ul>
						</li>
						<li><a href="#">能源学院</a></li>
						<li><a href="#">资环学院</a></li>
					</ul>
				</li>
				<li><a href="#">招生就业</a></li>
				<li><a href="#">科学研究</a></li>
			</ul>
		</nav>
	</header>
	
		<section>
		<article id="a1"></article>
		<article id="a2"></article>
		<aside></aside>
	</section>
	<footer></footer>
	<script >
		function showmenu(obj){
			var submenu=obj.getElementsByTagName("ul")[0];
			submenu.style.display="block";
		}

		function hidemenu(obj){
			var submenu=obj.getElementsByTagName("ul")[0];
			submenu.style.display="none";
		}
        function showmenu(obj){   /*显示三级菜单函数*/
			var submenu=obj.getElementsByTagName("ul")[0];
			submenu.style.display="block";
		}

		function hidemenu(obj){    /*隐藏三级菜单函数*/
			var submenu=obj.getElementsByTagName("ul")[0];
			submenu.style.display="none";
		}

	</script>
</body>
</html>

4、中英文菜单切换（span是行标签，放在a标签内部使用）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CHS-ENG菜单切换</title>
	<style>
		*{padding:0px;margin:0px;}
		html{background: #ccc;}
		div{margin:40px 160px;}
		ul{list-style: none;}
		ul li{float:left;overflow:auto;    /*overflow溢出隐藏掉*/border-bottom: 5px /*红色下划线*/solid red;}
		ul li a{display:block;
				background: #00f;
				color:white;
				font-weight: bold;
				//height:40px;  /*高度得去掉*/
				line-height: 40px;
				text-align: center;
				margin-right:1px;
				padding:0px 10px;
				text-decoration: none;
		}
		ul li a:hover{background: #f90;margin-top:-40px;}   /*magin-top作用是使中文上移*/
		ul li a span{display:none;}
		ul li a:hover span{display:block;}
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#">学校概况<span>About hpu</span></a></li>
			<li><a href="#">管理机构<span>Departments</span></a></li>
			<li><a href="#">院系设置<span>Schools</span></a></li>
			<li><a href="#">招生就业<span>Enrollment</span></a></li>
			<li><a href="#">科学研究<span>Research</span></a></li>
		</ul>
	</div>
</body>
</html>

5、子菜单鼠标下滑不显示原因：HTML里面那个z-index，默认是0，调大就可以显示出来了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vertical-submenu</title>
	<style>
	*{padding:0px;margin:0px;}
	html{background: #ccc;}
	div{margin:30px 50px;float:left;}
	ul{list-style: none;}
	ul li a{display:block;
			text-decoration: none;
			background: #a00;
			width:180px;
			color:white;
			/*font-weight: bold;*/
			height:40px;
			line-height: 40px;
			border-bottom: 1px solid white;
			text-align: center;
	}
	ul li a:hover{background: #f90;}
	ul li{position: relative;}
	ul li ul{position:absolute;left:181px;top:0px;display:none;z-index:1;}
	ul li:hover ul{display:block;}
	#hpu{width:100px;height:100px;background: cyan;float:right;display: none;}

	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#">学校概况</a></li>
			<li><a href="#">管理机构</a></li>
			<li><a href="#">院系设置</a>
					<ul>
						<li><a>电气学院</a></li>
						<li><a>计算机科学与技术学院</a></li>
						<li><a>安全学院</a></li>
						<li><a>材料学院</a></li>
						<li><a>化工学院</a></li>
					</ul>
			</li>
			<li><a href="#">招生就业</a></li>
			<li><a href="#">科学研究</a>
					<!-- <ul>
						<li><a>基础研究</a></li>
						<li><a>应用研究</a></li>
						<li><a>国际合作</a></li>
						<li><a>校内基金</a></li>
						<li><a>杰出贡献</a></li>
					</ul> -->
			</li>
		</ul>
	</div>
	<div id="hpu"></div>
</body>
</html>

 

 

流萤数点
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
第二章作业
hao19980524的博客
10-24 749
1.无序列表、有序列表和定义列表适用的场合分别是什么？ 有序列表使用编号来记录项目的顺序（那种有1- 2- 3-顺序的列表可以用这个） 无序列表使用项目符号来记录无序的项目（一般表示并列项） 自定义列表它由两个部分组成：定义条件和定义描述。 2.表格的跨行、列表分别使用什么属性？要实现一个3行2列的单元格需要哪些步骤？ 一般而言，跨行或跨列操作时，需要以下两个步骤。 （1）在需要合并的第一个单元格...
HTML第二次作业笔记
qq_20521729的博客
02-05 300
一、表单（form）标签 <form></form>(自动换行) 将数据传输给服务器 二、字符实体
北大青鸟6.0HTML第二章作业
09-13
北大青鸟S16.0HTML第二章作业参考
第二次css作业
aa8869138的博客
02-23 209
三页合一          h2{            font-style:oblique; color:#0a0;     }               .a{                         width:600px;background-image:url(bg.jpg);  margin:0 auto; text-align:center;      
HTML标签概述及＜html＞,＜head＞,＜title＞,＜link＞,＜form＞,＜meta＞详细介绍
share something here
09-26 7520
Web概述与创建介绍Web出发创建自己的Web后记三级目录 介绍 web（World Wide Web）是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。 超文本：是计算机处理文本信息的方法，不同空间的电子文档通过超链接组织起来成为一个“网”，这个文档“网”称为“超级文本”，简称“超文本”。 HTTP：全称Hyper Text Transfer Protocol（超文本传输协议）。经过多年的发展，现在HTTP能够传输图片等多媒体文件，是Web世界的中流砥柱，应用非常广泛 W
第二次作业.html
11-16
第二次作业.html
231041231 陈媛 第二次作业.docx
11-17
二、IndexServlet IndexServlet是一个Servlet组件，用于处理用户的登录请求。该Servlet的主要功能是： 1. 检查用户是否已经登录：如果用户已经登录，Servlet将显示欢迎信息，并提供退出链接。 2. 设置Cookie：如果...
xml第二次作业
11-14
【XML第二次作业详解】 XML（eXtensible Markup Language）是一种用于标记数据的语言，它允许开发者自定义标签来描述数据的结构和意义。本作业主要涉及XML的基本应用，包括创建XML文档、定义DTD（Document Type ...
第二次网页设计作业.zip
05-21
在这个“第二次网页设计作业”中，我们聚焦于HTML5和CSS3这两种现代网页开发的核心技术。HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，它为网页开发带来了许多新特性，而CSS3则是层叠样式表...
陈文老师作业第二次作业
04-09
作业2-1： 1、给定可供选择的N，利用M取值[N/e]或[N/e]+1计算M（ home_work_01 ） 2、逐个计算P（M），M=1,2,3,…N,通过找出最大值，计算M（ home_work_02） 编程规范： ...
HTML 基础
wgchen
10-17 512
HTML 基础
HTML页面布局
fakerking的博客
08-21 3282
前端页面布局
css中绝对定位和相对定位的区别
qq_43621905的博客
03-06 474
一：绝对定位 position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层...
HTML5的<aside>标签怎么用？
weixin_45587319的博客
04-15 4727
<aside>标签是HTML5中的新标签，用于以较短的方式描述网页的主要对象；它基本上标识了与网页主要内容相关的内容，但不构成主页的主要意图。该<aside>标签主要包含作者信息、链接、相关内容等。 <aside>和<div>这两个标签具有相同的行为和不同的含义。 ●　<div>：它在网页中定义或创建分区或部分。 ●　&l...
JSP第二次作业_8小题
HWP
05-06 2407
8.实现简单聊天室。要求以B/S方式实现多人聊天，可以保留聊天者的昵称和聊天内容。 I DO: 8，实现简单聊天室。要求以B/S方式实现多人聊天，可以保留聊天者的昵称和聊天内容。 login.jsp： <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> &lt...
web开发常见问题和解决方法
07-16 2883
 一检查是否为首页 @media all {   IE/:HOMEPAGE {behavior:url(#default#homepage)} } function fnVerify(){   sQueryHome = oHomePage.isHomePage(oHomeHref.value);   alert(sQueryHome);   event.returnValue = fal
jsp实现简单聊天室
热门推荐
angula
03-13 1万+
实现简单聊天室。要求以B/S方式实现多人聊天，可以保留聊天者的昵称和聊天内容。 主要由7个jsp页面组成 main.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE html PUBLI...
学校官网制作
m0_65665796的博客
11-09 2776
校园官网
html一元二次方程
最新发布
05-25
在 HTML 中，可以使用数学标签 <math> 和 <mrow> 来表示一元二次方程的数学公式，例如： <mi>a</mi><mo>⋅</mo><msup><mi>x</mi><mn>2</mn></msup> <mo>+ <mi>b</mi><mo>⋅</mo><mi>x <mo>+ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

流萤数点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值