页面头部代码练习1_头部页面代码-优快云博客

这篇博客展示了如何使用CSS进行页面头部的设计，包括设置背景颜色、导航栏样式、文字排版等。通过实例代码，详细解释了如何创建一个具有固定高度、渐变背景、内联元素布局和动态选中效果的导航菜单，并且讨论了如何调整Banner部分的视觉效果，如背景图片的使用和定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

header{
background-color: rgba(0,0,0,0.4);
}
nav{
height:50px;
background:#696969;
}
nav ul{
list-style-type:none ;
margin:0;
float:right;

}
nav div a {
text-decoration: none;
color:#fff;
margin-left: 30px;
font-size:20px;
font-weight:bold ;
}
nav ul li,nav .logo{
display:inline-block;
line-height: 50px;
float:left ;
margin-right: 30px;
letter-spacing:1px ;

}
nav ul li a{
text-decoration: none;
line-height:inherit;
display: inline-block;
color:#fff;
}
nav ul li .active{
border-bottom: 1px solid #fff;
}
#banner{
background-color: rgba(0,0,0,0.2);
height:660px;
}
#banner .inner{
width:300px ;
text-align:center;
margin:0 auto;
position :relative;
top:160px;
color:#fff;
}
#banner .inner p{
font-size:18px;
letter-spacing: 1px;
line-height: 40px;
}
#banner .inner h1{
font-family:"Times New Roman", Times, serif;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
padding:10px 0;
}
#banner .inner button{
border:none;
padding:15px 45px;
background-color:#333;
color:#eee;
border-radius:5px;
}
#banner .inner .more{
margin-top: 220px;

}
#banner{
/*background-color:#f5f5dc;*/
/*background-image:url(img/fjtt.jpg);
background-repeat:no-repeat;
background-attachment:50% 80%;
background-size:cover;*/
background-image:url("../img/58d208f635753.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
/*background-position:50% 80%;*/
background-size:cover;
}