本文探讨了前端开发中头部导航的样式设计与实现，包括CSS的使用、颜色搭配、字体大小及行高设置，以及输入框的交互效果。通过实例展示了如何创建一个响应式的头部搜索栏，重点讲解了HTML结构、CSS样式和JavaScript交互的配合，为网页提供良好的用户体验。
header_search
*{
margin:0;
padding:0;
text-decoration: none;
list-style: none;
}
.head{
width:100%;
height:100px;
background: #000;
font-size: 16px;
line-height: 100px;
color:white;
}
.head span{
font-size: 45px;
margin-left: 20px;
float: left;
}
.head ul{
float:left;
font-weight: bold;
}
.head ul li{
float: left;
width: 100px;
text-align: center
}
.head ul a{
color:white;
display: block;
transition: 0.3s;
}
.head ul a:hover{
background-color: white;
color:black;
}
.head input{
background: #333;
border:none;
width: 200p
x;
height: 30px;
border-radius: 15px;
color:white;
font-size: 18px;
}
.head input:active{
border:none
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
