一、搜索栏样式及核心要点
1、实现效果
上一篇博客中 , 完成了顶部提示栏 ,
本篇博客开始完成下面的 搜索栏布局 ;
2、自动伸缩搜索栏实现
在上面的基础上 , 如果 缩小浏览器的宽度 , 搜索栏也会跟着缩小...内容高度 , 即可设置文字垂直居中 ;
css 样式实例 :
.search-login {
/* 右侧按钮布局 */
/* 右侧按钮需要设置到左侧 使用绝对定位进行设置 */...垂直居中 */
line-height: 44px;
}
5、搜索栏盒子
搜索栏盒子 高度是 44 像素 , 宽度一定不要设置 , 让该盒子自适应自动缩放宽度 ;
该容器中 , 只需要利用中间部分内容即可...圆角半径为 15 像素 ;
总的高度是 44 像素 , 搜索栏的盒子高度 30 像素 , 设置该高度后 , 需要设置 7 像素的 上边距 , 使得该搜索栏可以垂直居中 ;
如果为中间搜索栏盒子设置一个...;
/* 文本水平居中 */
text-align: center;
/* 文本颜色白色 */
color: #fff;
}
.app ul li:nth-child(