我需要google字体布局css

Question

我有以下名为search.aspx的aspx页面：

 <div id="wrap">
        <div id="menu">
            <div id="t_menus" runat="server">                
                <div id="left">
                    <div class="Menu_Top">
                    </div>
                    <div id="a">
                    </div>
                    <div class="MenuBtm">
                    </div>
                </div>                
                <div id="bottom_menu">
                    <div class="MenuTop">
                    </div>
                    <div id="bottommenu">
                    </div>
                    <div class="MenuBtm">
                    </div>
                </div>
            </div>
        </div>       
        <div id="column_two">
            <div id="right_top" class="right_top">                
                <asp:Panel ID="SrchPanel" runat="server" EnableViewState="False" Wrap="False">
                    <div id="logo">
                        <asp:ImageButton ID="logo" runat="server" ImageUrl="/images/l.gif" />
                    </div>
                    <div id="SrchDivMid">
                        <asp:textbox id="txtS" runat="server" MaxLength="50" value="Search"></asp:textbox>
            <asp:button id="btnFind" runat="server" Text="Find" />
                    </div>                    
                    <div id="returnInfocenter">
                        <asp:HyperLink ID="return" runat="server" Text="Return"></asp:HyperLink>
                    </div>
                </asp:Panel>                                
            </div>
        </div>
        <div class="contentCont">
            <div id="content">
                <iframe id="iFrame" name="iframe" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" src=""></iframe>
            </div>
        </div>
     </div>

它所做的是使用css创建简单的google类型布局，如下图所示：

​

​

我想让它像这样显示...当用户点击菜单时，它会加载带有数据的iframe。我希望css徽标搜索框和返回按钮出现，虚线像这样删除：

​

我尝试了几种不同的方法，但都不起作用。有没有人可以指导我，我应该采取什么方法来达到这个结果？

Answer 1

这将是棘手的，当用户点击菜单项，页面布局从样式1更改为样式2中提到的照片。

最初，您需要三个主要的div元素

<div style="float:right;width:70%">Search Section</div>
<div style="float:left;width:28%">menu section</div>
<div style="clear:both"></div>

当菜单项单击所有需要转换的div结构时，如下所示

<div style="width:100%">Search Section</div><!-- goes to top !>
<div style="float:left; width:28%">menu section</div>
<div style="float:right; width:70%;>iframe result section</div>
<div style="clear:both"></div>

在搜索部分之间需要类似的转换，例如在start div结构中，如下所示

<div style="width:100%; padding:10px 0px; text-align:center;">Logo</div>
<div style="width:100%; padding:2px 0px; text-align:center;">Search Box</div>
<div style="width:100%; padding:2px 0px; text-align:center;">Search Links</div>

单击菜单时，这些div的shift样式如下

<div style="float:left;padding-left:10px; width:25%;">Logo</div>
<div style="float:left;padding-left:10px; width:50%;">Search Box</div>
<div style="float:left; width:20%;>Links</div>
<div style="clear:both;"></div>

您可以创建类，并在单击菜单项时用另一个类替换一个类，以改变页面布局的样式。

它的一般概念是，rest需要逐步调优。