# 首页头部开发
## 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**
