English 中文(简体)
采用CSS的液压布
原标题:Fluid width layout using CSS
  • 时间:2009-11-10 14:15:32
  •  标签:

我正试图把一页放在一页上,上面有一个横跨页的头盔。

头盔包含菜单,看着这样的东西(ASCII, 见下文)。

<------ Fixed Width ----------> <----------- Variable Width (Depends on Screen Width) -->

-----------------------------------------------------------------------------------------
  LOGO HERE (Fixed Width)     |    Menu One  |  Menu Two | menu Three | Menu Four      
                              |              |           |            |                
----------------------------------------------------------------------------------------- 

我以超文本方式设计了这一点:

<div id="topMenu">
    <div id="topMenuLogo"><!-- flash logo stuff here --></div>
    <div id="topMenuContainer">
       <div id="topMenuTopBar" class="right-align">
           <div class="useroption floatleft">Action 1</div>
           <div class="useroption floatleft">Action 2</div>
           <div class="spacer">&nbsp;</div>
       </div>
       <div id ="topMenuNavBar">
           <div id=topmenuMenuContainer">
              <ul>
                 <li>Menu One</li>
                 <li><!-- Other menus follow below ...... --></li>
              </ul>
           </div>
        </div>
       <div class="spacer">&nbsp;</div>
    </div>
    <div class="spacer">&nbsp;</div>        
</div>

CSS舱位位位位位位位位位位位位数与型位位数相匹配的轨道位位数(8:1px;clear: both;}

我想能够写上述文字,以便该网页能够动态地扩展,以适应屏幕,而不论该决议如何。 该标志有固定的宽度,因此不会改变,但我希望最高级计量要素能够根据屏幕动态调整其宽度。 基本而言,这一要素将包括:

  1. A topMenuContainer element that expands or contracts depends on the screen resolution
  2. A. 甲型六氯环己烷 在MenuContainer要素内浮动的权利

  3. 位于MenuContainer的表层左侧的上层MenuNav Bar

如果有人能够以我所描述的方式显示为上述超文本幻灯所需的特别安全局,我将非常感谢。

最佳回答

这应当是你关于一般性布局问题的第1号资源,如:

http://layouts.ironmyers.com/

你们会发现,你可能希望在其现场做任何科安会布局。 如果你不知道CSS,你可以检查3所学校的教师:

http://www.w3schools.com/css/

问题回答

暂无回答




相关问题
热门标签