# 首頁頭部開發
## 1.開始吧！
**根據我們之前的分析，header部分氛圍nav和header兩個小部分。**
```CSS
header{
background-color: rgba(0,0,0,0.4);
}
nav{
background:transparent;
height: 50px;
}
a{
text-decoration: none;
}
nav ul{
list-style-type: none;
margin: 0;
float: right;
}
nav ul li,nav .logo{
display: inline-block;
line-height:50px;
margin-right: 20px;
}
nav ul li a{
line-height:inherit;
text-decoration: none;
display: inline-block;
height: inherit;
color: #fff;
}
nav .logo{
font-size: 20px;
font-weight: 800;
letter-spacing: 1px;
float: left;
}
nav .logo a{
color: #fff;
}
#banner{
height: 700px;
background-color: rgba(0,0,0,0.2);
}
#banner .inner{
width:300px;
text-align: center;
margin: 0 auto;
position: relative;
top: 150px;
color: #FFFFFF;
}
#banner .inner h1{
margin: 0;
border-top: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
padding: 12px;
}
button{
border: none;
background: #333;
padding: 14px 60px;
border-radius: 5px;
color: #FFFFFF;
}
#banner .inner .more{
margin-top: 250px;
color: #FFFFFF;
font-size: 12px;
}
.sub-heading{
line-height: 30px;
margin: 30px 0;
}
```
1.**在編寫CSS時，注意提煉出通用的CSS樣式**
2.**圓角button的制作**
3.**通過rgba()設置，區分開nav和banner**
