HTML5初學(xué)----基礎(chǔ)代碼案例匯總

印度阿三17 2020-03-11

展開全文

正在學(xué)習(xí)HTML5，邊學(xué)邊更吧，基礎(chǔ)代碼案例匯總。我這里以學(xué)校的官網(wǎng)為網(wǎng)頁的主題。

1. 網(wǎng)頁基本框架（包含article、aside、section、header、footer標(biāo)簽）

注：二級(jí)下拉菜單通過JS函數(shù)代碼實(shí)現(xiàn)

<!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="#">學(xué)校概況</a></li>
				<li><a href="#">管理機(jī)構(gòu)</a></li>
				<li οnmοuseοver="showmenu(this)" οnmοuseleave="hidemenu(this)"><a href="#">學(xué)院設(shè)置</a>
					<ul>
						<li><a>電氣學(xué)院</a></li>
						<li><a>計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院</a></li>
						<li><a>安全學(xué)院</a></li>
						<li><a>材料學(xué)院</a></li>
						<li><a>化工學(xué)院</a></li>
					</ul>
				</li>
				<li><a href="#">招生就業(yè)</a></li>
				<li><a href="#">科學(xué)研究</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. 只用ul li實(shí)現(xiàn)三級(jí)下拉菜單（多次ul li ul li ul li嵌套實(shí)現(xiàn)三級(jí)下拉菜單）

CSS代碼實(shí)現(xiàn)三級(jí)下拉菜單

JS代碼實(shí)現(xiàn)三級(jí)下拉菜單

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三級(jí)下拉菜單CSS實(shí)現(xiàn)</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;}
		/*鼠標(biāo)懸停在二級(jí)菜單時(shí)，顯示三級(jí)下拉菜單*/
		ul li ul li ul{display: none;position: absolute;left: 221px;top:0px;}
		/*一開始不能實(shí)現(xiàn)，加上相對(duì)位置之后就可以實(shí)現(xiàn)三級(jí)下拉菜單的顯示*/
		ul li ul li:hover ul{display: block;}
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#">學(xué)校概況</a></li>
			<li><a href="#">管理機(jī)構(gòu)</a></li>
			<li><a href="#">學(xué)院設(shè)置</a>
				<ul class="school">
					<!-- 定義一個(gè)類名區(qū)別其他級(jí)的ul li，否則會(huì)在鼠標(biāo)懸浮一級(jí)菜單時(shí)同時(shí)顯示二三級(jí)下拉菜單 -->
					<li><a>電氣學(xué)院</a></li>
					<li><a>計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院</a>
						<ul>
							<li><a>學(xué)院概況</a></li>
							<li><a>近期活動(dòng)</a></li>
							<li><a>課程安排</a></li>
						</ul>
					</li>
					<li><a>安全學(xué)院</a></li>
					<li><a>材料學(xué)院</a></li>
					<li><a>化工學(xué)院</a></li>
				</ul>
			</li>
			<li><a href="#">招生就業(yè)</a></li>
			<li><a href="#">科學(xué)研究</a></li>
		</ul>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三級(jí)下拉菜單JS實(shí)現(xiàn)</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;}
		/*一開始不能實(shí)現(xiàn)，加上相對(duì)位置之后就可以實(shí)現(xiàn)三級(jí)下拉菜單的顯示*/
		/*ul li ul li:hover ul{display: block;}*/
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#">學(xué)校概況</a></li>
			<li><a href="#">管理機(jī)構(gòu)</a></li>
			<li οnmοuseοver="showmenu(this)" οnmοuseleave="hidemenu(this)"><a href="#">學(xué)院設(shè)置</a>
				<ul>
					<li><a>電氣學(xué)院</a></li>
					<li οnmοuseοver="showmenu(this)" οnmοuseleave="hidemenu(this)"><a>計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院</a>
						<ul>
							<li><a>學(xué)院概況</a></li>
							<li><a>近期活動(dòng)</a></li>
							<li><a>課程安排</a></li>
						</ul>
					</li>
					<li><a>安全學(xué)院</a></li>
					<li><a>材料學(xué)院</a></li>
					<li><a>化工學(xué)院</a></li>
				</ul>
			</li>
			<li><a href="#">招生就業(yè)</a></li>
			<li><a href="#">科學(xué)研究</a></li>
		</ul>
	</div>
	<script>
		// 定義兩個(gè)JS函數(shù)，用于監(jiān)視鼠標(biāo)的狀態(tài)，showmenu用于顯示下拉菜單(鼠標(biāo)懸停時(shí))
		function showmenu(obj){
			var submenu=obj.getElementsByTagName("ul")[0];
			submenu.style.display="block";
		}
		// hidemenu函數(shù)用于隱藏下拉菜單(鼠標(biāo)離開時(shí))
		function hidemenu(out){
			var submenu=out.getElementsByTagName("ul")[0];
			submenu.style.display="none";
		}
	</script>
</body>
</html>

3. 四行三列結(jié)構(gòu)的實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的網(wǎng)頁制作</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 >你的答案</a></li>
						<li><a href="#">這就是愛嗎</a></li>
						<li><a href="#">囂張</a></li>
						<li><a href="#">歐若拉</a></li>
					</ul>
				</li>
				<li><a href="#">經(jīng)典歌曲</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 >周杰倫</a>
						</li>
						<li><a >張韶涵</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="#">電臺(tái)音頻</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. 導(dǎo)航欄：實(shí)現(xiàn)鼠標(biāo)懸停時(shí)中文轉(zhuǎn)英文功能

<!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="#">學(xué)校概況<span>About hpu</span></a></li>
		<li><a href="#">管理機(jī)構(gòu)<span>Departments</span></a></li>
		<li><a href="#">院系設(shè)置<span>Schools</span></a></li>
		<li><a href="#">招生就業(yè)<span>Enrollment</span></a></li>
		<li><a href="#">科學(xué)研究<span>Rresearch</span></a></li>
	</ul>
	</div>
</body>
</html>

?未完待續(xù)~

來源：https://www./content-4-655551.html

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：印度阿三17 > 《開發(fā)》

舉報(bào)/認(rèn)領(lǐng)