我已經把代碼寫出來了 跟老師的效果一樣 但不知道對不對
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;}
最終效果圖
望各位給點優化意見
2016-04-22
html復制錯了
2016-04-22
nav .logo{
?? ?float: left;
?? ?line-height: 50px;
?? ?height: 50px;
?? ?margin-right: 20px;
?? ?
}
2016-04-22
這里不起作用
2016-04-22
非常棒，話說最下面的title1在html哪