<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >DIV#searchcontainer {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
位置:固定;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
宽度:100%;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
身高:100%;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
z-index:100;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
显示:块;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
背景:紫色;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
左:-100%; </font><font style= "vertical-align: inherit;" >/ *最初将搜索容器放在视图之外* /</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
上:90px; </font><font style= "vertical-align: inherit;" >/ *向下移动容器,以便在显示搜索时标题仍然可见* /</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
padding-top:50px;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
不透明度:0;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
游标:十字准线;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
text-align:center;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
font:bold 16px 'Bitter' ,sans-serif; </font><font style= "vertical-align: inherit;" >/ *使用谷歌字体* /</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
-webkit-transform:scale(.9)translate3d(-0,-50px,0);</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
transform:scale(.9)translate3d(-0,-50px,0);</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
-webkit-transition:-webkit-transform .5s,opacity .5s,left 0s .5s;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
过渡:变换.5s,不透明度.5s,左0s .5s;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
div#searchcontainer div {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
填充:5px;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
白颜色;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
div#searchcontainer form {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
不透明度:0;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
-webkit-transform:translate3d(0,50px,0);</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
transform:translate3d(0,50px,0);</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
-webkit-transition:全部.5s 0s;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
过渡:全部.5s 0s;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
div#searchcontainer form input [type =“text”] {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
宽度:90%;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
顶部:0;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
左:0;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
z-index:99;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
填充:10px;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
border:none;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
边框底部:2px实心灰色;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
大纲:无;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
font-size:3em;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
背景: #eee;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
}</font></font><font></font>
<font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
DIV#searchcontainer.opensearch {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
左:0;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
不透明度:1;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
-webkit-transform:scale(1)translate3d(0,0,0);</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
transform:scale(1)translate3d(0,0,0);</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
-webkit-transition:-webkit-transform .5s,opacity .5s,left 0s 0s;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
过渡:变换.5s,不透明度.5s,左0s 0s;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
div#searchcontainer.opensearch form {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
不透明度:1;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
-webkit-transform:translate3d(0,0,0);</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
transform:translate3d(0,0,0);</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
过渡:全部.5s .5s;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
过渡:全部.5s .5s;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
@media(max-width:480px){</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
div#searchcontainer form input [type =“text”] {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
宽度:95%;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font>
|