正在学习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 ο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. 只用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 ο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. 四行三列结构的实现
<!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=周杰伦">周杰伦</a> </li> <li><a href="https://www.so.com/s?q=张韶涵&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>未完待续~
来源：https://www.icode9.com/content-4-655551.html联系客服
