搜索栏制作总结

发布于:2021-11-30 09:46:56

1.实现搜索logo和搜索框水*布局:


div.searchDiv{
width:400px;
margin:50px auto; //使定宽块状元素水*居中
}
img.logo{

//利用绝对定位固定logo的位置(相对于已定位的父元素,这里是body元素)
position:absolute;
left:0px;
top:30px;
z-index:-1; //使图层置于底层
}

(注:logo为内联元素,搜索框为块状元素,一般是不能一起水*摆放)


2.设置border:1px solid transparent:可以使父元素背景完整显示,更美观


3.若搜索框中有明显的分层现象,可以考虑内联元素和块状元素交叉摆放来实现,即将需要在下一层显示的内联元素放入块状元素中(这里利用的是块状元素自占1行或多行的性质,行数由块状元素的高度决定)


?


以下是搜索栏的源代码和效果图:
















最新更新

猜你喜欢