<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>响应式布局</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<!--[if lte IE8]>
<p class="browserupgrade">您的浏览器版本老的可笑,请到<a href="http://browsehappy.com/">这里</a>更新,以获取最佳的体验效果!</p>
<![endif]-->
<header>
<nav class="top">
<span class="tel">理财热线 :400-888-8888</span>
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">快速注册</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">捐赠</a></li>
<li><a href="#">APP</a></li>
</ul>
</nav>
<nav class="main">
<a href="#" class="brand"><img src="" alt=""></a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">理财频道</a></li>
<li><a href="#">投资频道</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#">安全保障</a></li>
</ul>
</nav>
</header>
<div>
</div>
<footer>
</footer>
</body>
</html>
在书写css之前我们需要统一css样式,建议使用Normalize.css来完成样式初始化!