HTML5 code base ---- beginner Case Summary

Language 2020-03-11 10:27:54 views: null

We are learning HTML5, learn while more of it, the underlying code case summary. I'm here with the school's official website for the topic of the page.

1. The basic framework page (containing article, aside, section, header, footer tag)

Note: two pull-down menu implemented by the function code JS

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding:0px;margin:0px;}
		header{background:#ff9900;width:100%;height:100px;margin-bottom: 5px;position: relative;}
		/*article{background: #123456;width:32%;height:600px;float:left; }*/
		.c01{background:#654321;width:37%;height:600px;float:left;margin-right:10px;}
		.c02{background: #86f;width:37%;height:600px;float:left;}
		aside{background: #12ff56;width:24%;height:600px; float:right;}
		section{height:600px;}
		footer{background:#cc9900;width:100%;height:100px;clear:both;margin-top:5px;}
		nav{position:absolute;left:160px;bottom:5px;	color:blue;font-weight: bold}
		
		ul{list-style: none;}
		ul li{float:left;position:relative;}
		ul li a{display:block;
			   text-decoration: none;
				color:#fff;
				background: #00f;
				height:40px;
				line-height: 40px;
				/*margin-right:2px;*/
				padding:0px 10px;

		}
		ul li a:hover{background: green;}
		ul li ul li{float:none;width:150px;}
		ul li ul{position:absolute;display:none;}
		/*ul li:hover ul{display:block;}*/
	</style>
</head>
<body>
	<header>
		
		<nav>
			<ul>
				<li><a href="#">学校概况</a></li>
				<li><a href="#">管理机构</a></li>
				<li οnmοuseοver="showmenu(this)" οnmοuseleave="hidemenu(this)"><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></li>
			</ul>

		</nav>

	</header>

	<section>
		<article class=c01></article>
		<article class=c02></article>
		<aside></aside>
	</section>
	<footer></footer>
	<script>
		function showmenu(obj){
			var submenu=obj.getElementsByTagName("ul")[0];
			submenu.style.display="block";
		}
		function hidemenu(out){
			var submenu=out.getElementsByTagName("ul")[0];
			submenu.style.display="none";
		}
	</script>
	</body>
</html>

 2. The only ul li achieve three drop-down menu (several times ul li ul li ul li nested achieve three drop-down menu)

  • CSS code to achieve three drop-down menu
  • JS code to achieve three drop-down menu
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三级下拉菜单CSS实现</title>
	<style>
		*{padding: 0px;margin: 0px;}
		html{background: #9370db;}
		div{margin:40px 160px;}
		ul{list-style: none;}
		ul li{float: left;position: relative;cursor: pointer;}
		ul li a{
			text-decoration: none;
			text-align: center;
			display: block;
			height: 40px;
			width: 160px;
			line-height: 40px;
		    color: white;
		    background: #48d1cc;
	    	margin-right: 1px;
			padding: 0px 30px;
			font-weight: bold;
			border-bottom: 1px solid pink;
		}
		a:hover{background: #f90;}
		ul li ul{position: absolute;display: none;}
		ul li ul li{float: none;width: 150px;position: relative;}
		ul li:hover .school{display: block;}
		/*鼠标悬停在二级菜单时，显示三级下拉菜单*/
		ul li ul li ul{display: none;position: absolute;left: 221px;top:0px;}
		/*一开始不能实现，加上相对位置之后就可以实现三级下拉菜单的显示*/
		ul li ul li:hover ul{display: block;}
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#">学校概况</a></li>
			<li><a href="#">管理机构</a></li>
			<li><a href="#">学院设置</a>
				<ul class="school">
					<!-- 定义一个类名区别其他级的ul li，否则会在鼠标悬浮一级菜单时同时显示二三级下拉菜单 -->
					<li><a>电气学院</a></li>
					<li><a>计算机科学与技术学院</a>
						<ul>
							<li><a>学院概况</a></li>
							<li><a>近期活动</a></li>
							<li><a>课程安排</a></li>
						</ul>
					</li>
					<li><a>安全学院</a></li>
					<li><a>材料学院</a></li>
					<li><a>化工学院</a></li>
				</ul>
			</li>
			<li><a href="#">招生就业</a></li>
			<li><a href="#">科学研究</a></li>
		</ul>
	</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三级下拉菜单JS实现</title>
	<style>
		*{padding: 0px;margin: 0px;}
		html{background: #9370db;}
		div{margin:40px 160px;}
		ul{list-style: none;}
		ul li{float: left;position: relative;cursor: pointer;}
		ul li a{
			text-decoration: none;
			text-align: center;
			display: block;
			height: 40px;
			width: 160px;
			line-height: 40px;
		    color: white;
		    background: #48d1cc;
	    	margin-right: 1px;
			padding: 0px 30px;
			font-weight: bold;
			border-bottom: 1px solid pink;
		}
		a:hover{background: #f90;}
		ul li ul{position: absolute;display: none;}
		ul li ul li{float: none;width: 150px;position: relative;}
		/*ul li:hover ul{display: block;}*/
		ul li ul li ul{display: none;position: absolute;left: 221px;top:0px;}
		/*一开始不能实现，加上相对位置之后就可以实现三级下拉菜单的显示*/
		/*ul li ul li:hover ul{display: block;}*/
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#">学校概况</a></li>
			<li><a href="#">管理机构</a></li>
			<li οnmοuseοver="showmenu(this)" οnmοuseleave="hidemenu(this)"><a href="#">学院设置</a>
				<ul>
					<li><a>电气学院</a></li>
					<li οnmοuseοver="showmenu(this)" οnmοuseleave="hidemenu(this)"><a>计算机科学与技术学院</a>
						<ul>
							<li><a>学院概况</a></li>
							<li><a>近期活动</a></li>
							<li><a>课程安排</a></li>
						</ul>
					</li>
					<li><a>安全学院</a></li>
					<li><a>材料学院</a></li>
					<li><a>化工学院</a></li>
				</ul>
			</li>
			<li><a href="#">招生就业</a></li>
			<li><a href="#">科学研究</a></li>
		</ul>
	</div>
	<script>
		// 定义两个JS函数，用于监视鼠标的状态，showmenu用于显示下拉菜单(鼠标悬停时)
		function showmenu(obj){
			var submenu=obj.getElementsByTagName("ul")[0];
			submenu.style.display="block";
		}
		// hidemenu函数用于隐藏下拉菜单(鼠标离开时)
		function hidemenu(out){
			var submenu=out.getElementsByTagName("ul")[0];
			submenu.style.display="none";
		}
	</script>
</body>
</html>

3. The realization of four lines of three structures

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的网页制作</title>
	<style>
		*{padding:0px;margin:0px;}
		header{background: #ff7f50;width: 100%;height: 100px;margin-bottom: 4px;position: relative;}
		.c01{background:#567;width:33%;height:200px;float:left;margin-right:5px;margin-bottom: 5px;}
		.c02{background: #db7093;width:33%;height:200px;float:left;margin-bottom: 5px;}
		article{border: 1px solid #000;}
		aside{background: #0ff;width:33%;height:200px; float:right;border: 1px solid #000;}
		section{height:600px;}
		footer{background:#9370db;width:100%;height:100px;clear:both;margin-top:5px;}
		nav{position:absolute;left:200px;bottom:5px;color:#00bfff;font-weight:bold;}
		
		ul{list-style: none;margin: 0px auto;}
		ul li{float:left;position:relative;}
		ul li a{display:block;
			   	text-decoration: none;
				color:#fff;
				background: #00f;
				height:50px;
				line-height: 50px;
				padding:0px 10px;
				width: 160px;
				text-align: center;

		}
		ul li a:hover{background: green;}
		ul li ul li{float:none;}
		ul li ul{position:absolute;display:none;}
		/*ul li ul li a:visited{background: grey;}*/
		ul li:hover ul{display:block;}
	</style>
</head>
<body>
	<header>
		
		<nav>
			<ul>
				<li><a href="#">推荐歌曲</a>
					<ul>
						<li><a href="https://music.163.com/#/song?id=1400256289&market=360qk">你的答案</a></li>
						<li><a href="#">这就是爱吗</a></li>
						<li><a href="#">嚣张</a></li>
						<li><a href="#">欧若拉</a></li>
					</ul>
				</li>
				<li><a href="#">经典歌曲</a>
					<ul>
						<li><a href="#">你的名字</a></li>
						<li><a href="#">云烟成雨</a></li>
						<li><a href="#">年少有为</a></li>
						<li><a href="#">有何不可</a></li>
					</ul>
				</li>
				<li><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>
					<ul>
						<li><a href="https://www.so.com/s?ie=utf-8&src=hao_360so_b&shb=1&hsid=d5cfd277ba1e5f68&eci=undefined&nlpv=zzdt_aa_1&q=%E5%91%A8%E6%9D%B0%E4%BC%A6">周杰伦</a>
						</li>
						<li><a href="https://www.so.com/s?q=%E5%BC%A0%E9%9F%B6%E6%B6%B5&src=srp&fr=hao_360so_b&psid=7afc34118eb441f4f799be004f4a6ebd">张韶涵</a></li>
						<li><a href="#">林俊杰</a></li>
						<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>

		</nav>

	</header>

	<section>
		<article class="c01"></article>
		<article class="c02"></article>
		<aside></aside>
		<article class="c01"></article>
		<article class="c02"></article>
		<aside></aside>
		<article class="c01"></article>
		<article class="c02"></article>
		<aside></aside>
		<article class="c01"></article>
		<article class="c02"></article>
		<aside></aside>
	</section>
	<footer></footer>
	</body>
</html>

 4. Navigation Bar: When implementing hover Chinese to English function

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Chinese To English</title>
	<style>
		*{padding:0px;margin: 0px;}
		html{background: #ddd;}
		div{margin:40px 160px;}
		ul{list-style: none;overflow: hidden;}
		ul li{float: left;}
		ul li a{display:block;
				background: #00f;
				color: white;
				font-weight: bold;
				text-align: center;
				text-decoration: none;
				/*height: 40px;*/
				line-height: 40px;
				padding: 0px 10px;
				margin-right: 1px;

		}
		ul li a:hover{background: #f90;margin-top: -40px;}
		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>Rresearch</span></a></li>
	</ul>
	</div>
</body>
</html>

 To be continued ~

Hello Tomorrow,,
Published 27 original articles · won praise 50 · views 40000 +
Private letter concerns

Guess you like

Origin blog.csdn.net/baidu_41774120/article/details/104789867
Recommended
微软回应中国区AI团队“打包赴美”传闻
Ranking
How to use ChatGPT to write 100,000+ hot articles for public accounts (includes prompt words)
sudo echo command execution Permission denied
ADO: Using Transactions to Operate Oracle Database
[Java] [Class and Object] equals, hashCode, clone methods
Linux virtual host function
Порт управления rabbitmq открыт
on,where
jQuery WeUI
How can there be a weed pilot in Hangzhou?
tcp / ip model four
Daily
More
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)

Code World

© 2018 codetd.com