1，写页面div 标准的布局形式
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>标准的布局形式</title>
</head>
<body>
<div id=”container” style=”width:500px”>
<div id=”header” style=”background-color:#FFA500;”>
<h1 style=”margin-bottom:0;”>主要的网页标题</h1>
</div>
<div id=”menu” style=”background-color:#FFD700;height:200px;width:100px;float:left;”>
<b>菜单</b><br> HTML
<br> CSS
<br> JavaScript
</div>
<div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left;”>
内容在这里</div>
<div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”>
版权</div>
</div>
</body>
</html>
2，使用浮动，绝对定位，相对定位，进行布局。
3，使用flex进行布局 自适应。
4，写内容标题部分
h1 + p +span 的形式
5，写导航的注意事项1
div包裹 + a 的形式。
<div class=”topnav” id=”myTopnav”>
<a href=”#home”>主页</a>
<a href=”#news”>新闻</a>
<a href=”#contact”>联系方式</a>
<a href=”#about”>关于我们</a>
<a href=”javascript:void(0);” style=”font-size:15px;” class=”icon” onclick=”myFunction()”>☰</a>
</div>
6，写导航的注意事项2
div 包裹 按钮使用 button 下拉菜单使用 div + a
<div class=”dropdown”>
<button onclick=”myFunction()” class=”dropbtn”>下拉菜单</button>
<div id=”myDropdown” class=”dropdown-content”>
<a href=”#home”>Home</a>
<a href=”#about”>About</a>
<a href=”#contact”>Contact</a>
</div>
</div>
7，写导航的注意事项3
div包裹（外层） + a 菜单 + a下边的 div包裹 + a
<div class=”container”>
<a href=”#home”>主页</a>
<a href=”#news”>新闻</a>
<div class=”dropdown”>
<button class=”dropbtn” onclick=”myFunction()”>下拉菜单</button>
<div class=”dropdown-content” id=”myDropdown”>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
</div>
</div>
<h3>导航栏中的下拉菜单</h3>
<p>点击按钮显示下拉菜单</p>