我已经把代码写出来了 跟老师的效果一样 但不知道对不对
HTML内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扁平化风格博客</title>
<link rel="stylesheet" type="text/css" href="css/rest.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<nav>
<div><a href="#">张小窝</a></div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">联系我</a></li>
</ul>
</nav>
<div id="banner">
<div>
<div><h1>张小窝</h1></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<button>养我</button><!-- button按钮 -->
<div>更多</div>
</div>
</div>
</header>
<div></div>
<footer></footer>
</body>
</html>
CSS内容
nav{ height: 50px; background:#ccc;}
nav ul{ list-style: none; margin: 0;float: right;}
nav ul li,nav .logo{ display: inline-block; line-height: 50px; margin-right: 20px;}
a{text-decoration: none;}
nav ul li a{ line-height: 50px; display: inline-block; height:inherit; /*继承母元素属性*/ color: #fff;}
nav .logo{ float: left; line-height: 50px; height: 50px; margin-left: 20px;}
#banner{ background: #777; height: 700px; color: #fff;}
#banner .inner{ max-width: 300px;/*最大宽度*/ text-align: center;/*文字居中*/ margin: 0 auto; position: relative;top: 160px;}
#banner .inner h1{ margin: 0; line-height: 60px;}
button{ border:none; background: #333; color: #eee; padding: 10px;}
#banner button{ padding: 14px 60px;}
#banner .inner .more{ margin-top: 180px;}
.b_text{ line-height: 30px; margin: 50px;}
.logo{ font-size: 20px; font-weight: 700;/*字重，加粗的感觉*/ letter-spacing: 2px;/*文字之间的间距，字距*/ }
.logo a{color: #fff;}
.title1{ border-top: 5px solid #fff; border-bottom: 5px solid #fff; height: 60px;}
最终效果图
望各位给点优化意见
