当前位置：网站首页>Imitation of Baidu search results top navigation bar effect

Imitation of Baidu search results top navigation bar effect

2022-07-01 09:00:00 【Intimes】

HTML Achieve the top navigation bar effect of imitation Baidu search results , The effect is as follows ：

Let's go straight to the code ：

<html>
<head>
<style>
*{margin:0;padding:0;}
#wrap{
width:100%;
height:80px;
background-color:white;
border: solid 1px #eee;
position:sticky;
top:0px;
z-index:1000;
-moz-box-shadow: 0 0 10px #ccc; 
-webkit-box-shadow: 0 0 10px #ccc; 
padding-shadow: #f7f7f7 5px 5px 30px 5px ;
blur:1;
//opacity:0.8;filter:alpha(opacity=80);
}
form{
width:500px;
height:40px;
margin: 0 auto;
margin-top:20px;
}
#text{
width:396px;
height:40px;
display:block;
float:left;
}

#sub{
width:100px;
height:40px;
display:block;
float:left;
background-color:#3385FF;
border: solid 1px #3385FF;
color:white;
cursor:pointer;
}
.box{
width:80%;
height:250px;
line-height:250px;
margin:0 auto;
color:white;
fontsize:100px;
text-align:center;
}
#a1{background-color:white;}
#a2{background-color:#cff09e;}
#a3{background-color:#cff09e;}
#a4{background-color:#cff09e;}
#a5{background-color:#cff09e;}
#a6{background-color:#cff09e;}


</style>
</head>
<body>
<div id="wrap">
<form>
<input type="text" id="text" value=""/>
<input type="submit" id="sub" value=" Search for "/>
</form>
</div>

<div class="box" id="a1">1</div>
<div class="box" id="a2">2</div>
<div class="box" id="a3">3</div>
<div class="box" id="a4">4</div>
<div class="box" id="a5">5</div>
<div class="box" id="a6">6</div>


</body>
</html>

原网站

版权声明
本文为[Intimes]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202160116370232.html

边栏推荐

猜你喜欢

随机推荐