HTML5初學----基礎代碼案例彙總

原創 你好，明天，， 2020-06-17 13:53

正在學習HTML5，邊學邊更吧，基礎代碼案例彙總。我這裏以學校的官網爲網頁的主題。

1. 網頁基本框架（包含article、aside、section、header、footer標籤）

注：二級下拉菜單通過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 onmouseover="showmenu(this)" onmouseleave="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. 只用ul li實現三級下拉菜單（多次ul li ul li ul li嵌套實現三級下拉菜單）

  • CSS代碼實現三級下拉菜單
  • JS代碼實現三級下拉菜單
<!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 onmouseover="showmenu(this)" onmouseleave="hidemenu(this)"><a href="#">學院設置</a>
				<ul>
					<li><a>電氣學院</a></li>
					<li onmouseover="showmenu(this)" onmouseleave="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. 四行三列結構的實現

<!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. 導航欄：實現鼠標懸停時中文轉英文功能

<!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>

 未完待續~

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

惡補HTML基礎

HTML格式化 標籤 描述 定義粗體文字 <big 定義大號字體 em 定義着重問題 i 定義斜體 small 定義小號字體 strong 定義加重語氣 sub 定義下表文字 sup 定

yasenRK 2020-07-06 05:39:45

7.跑馬燈

第七節跑馬燈 跑馬燈:標籤 behavior:滾動方式 slide:從一段滾動到另外一段,不重複 alternate:表示兩端之間來回滾動 scroll:表示從一段滾動到另外一段 direction:表示滾動方向 down:

Alan and fish 2020-06-27 02:22:36

3.超鏈接

第三節超鏈接 1.基本寫法 超鏈接的兩個屬性 1.懸停顯示備註,title 2.打開性的頁面,target ​ <a href=“www.baidu.com” title=“百度” target="_blank">百度 2

Alan and fish 2020-06-27 02:22:36

9.表單

第九節表單 表單 代碼: <form> <fieldset> <legend>表單域的標題</legend> 文本域:<textarea rows="20" cols="40"></textarea><br

Alan and fish 2020-06-27 02:22:36

8.表格

第八節表格 1.標準的表格 table:表格標籤 aligh:對齊方式 cellpading:規定單元邊沿與其內容之間的空白。 cellspacing:屬性規定的是單元之間的空間 tr:行 td:列 th:表頭 橫向合併 cols

Alan and fish 2020-06-27 02:22:36

HTML常用標籤之格式標籤

           首先我們把HTML的常用標籤分爲一下幾類: 格式標籤, 文本標籤, 超鏈接標籤, 錨點標籤, 圖像標籤, "地圖"標籤. 一. 格式標籤 1. 作用: 用於定義網頁中的佈局, 縮進, 位置, 換行列等等 2. 各屬

怅然入梦 2020-06-26 16:50:32

加載，渲染，繪製

瀏覽器加載過程(1)、瀏覽器通過DNS獲取域名對應IP(2)、建立TCP連接(3)、發送http請求(4)、html邊下載邊渲染(5)、碰到內嵌JS 和 CSS，啓動新的連接下載，阻塞渲染和JS執行(因此要把腳本放後面)(6)、獲取到CS

真真-真真 2020-06-20 17:45:38

HTML第四節（Web設計基礎）

一 電腦上安裝的字體 二 我喜歡的網頁風格 界面較簡單的  三 視覺設計原則 ①重複 ②對比 ③近似 ④對齊 具體的還沒有實踐 待實踐後完善 四  無障礙設計的熱潮  ①可感知 ②可操作 ③ 可理解 ④足夠健壯

qq_24249259 2020-06-19 11:31:50

HTML第十二節（CSS基礎詳解一）

在學習HTML+CSS這門課程中，在成爲高手前，總在積累很多屬性。 類似CSS中的字體，文本屬性，對齊和縮進，寬度和高度，具體基礎知識 書上都有詳解，在這裏我不做具體介紹 不過   min-width屬性配置元素的內容在瀏覽器可視區域的

qq_24249259 2020-06-19 10:19:29

HTML第十二節（盒模型與Web圖片樣式基礎）

盒模型   一   二 GIF,PNG,JPEG 三種web圖片的區別   三 圖片鏈接 格式 四  背景圖片的漸進式增強          

qq_24249259 2020-06-19 10:19:29

HTML第九節（css樣式基本知識）

一 二 三 四 例如下面展示了這三種樣式的代碼      

qq_24249259 2020-06-19 10:19:29

HTML第七節（表單標籤）

一 使用表單標籤，與用戶交互       例如這樣的形式                                                                                          

qq_24249259 2020-06-19 10:19:29

HTML 第十一節（CSS選擇器）

一 二 類選擇器 三 四               五 六 七 八 常用CSS僞類 注：僞類必須按照這種順序進行編碼 九

qq_24249259 2020-06-19 10:19:29

HTML5、CSS3------顏色代碼彙總

爲了方便選用合適的顏色，我總結一下：                    

你好，明天，， 2020-06-17 13:53:29

HTML5 動畫效果 ------ 旋轉的小球、CSS旋轉木馬3D相冊效果

css3實現動畫效果 基本知識點： Css3常用到的幾個屬性：transform（變形），transition（過渡），animation（動畫）      transform translate：平移，移動，水平方向、垂直方向（tra

你好，明天，， 2020-06-17 13:53:29