asp.net - 需要谷歌类型布局 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 Logo 搜索框和返回按钮，并删除虚线，如下图所示:

我尝试了几种不同的方法，但没有成功。谁能指导我应该采取什么方法来达到结果？

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>

搜索部分之间类似的移动要求，例如在开始的 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的风格

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

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

它的一般概念，其余需要逐步调整。