<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> |