Question

使用HTML＆amp; amp;获取如下布局的最佳方法是什么？ CSS（不能使用CSS3）？

我的主要问题是浮动在内部容器顶部中间的导航栏。

另外，您如何建议我创建导航栏？它需要圆角并翻转，但现在没有子菜单。

http://sevdev.com/mockup.png

澄清

我需要帮助定位导航栏，这样如果调整窗口大小，它就会保持在它的位置。

我不能使用CSS3，因为它是公司网站，客户使用的许多浏览器与CSS3不兼容

Answer 1

工作演示：http://vidasp.net/tinydemos/layout-demo.html

（我没有做阴影或圆角 - 这些是CSS3功能。如果你想在旧浏览器中使用这些功能，你需要解决方法，但这是另一个故事......）

Answer 2

首先，你应该从这个基本结构开始。

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css"> <!-- include your external css here -->
</head>
<body>
<div id="container">

<div id="header">
<a href="index.html"><img src="logo.jpg" alt="My Company"></a> <!-- standard practice to make logos a link back to homepage -->

<ul id="nav">
    <li>Home</li>
    <li>Products</li>
    <li>XYZ</li>
    <li>Features</li>
</ul>

<ul id="contentNav">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
</div>

<div id="content">
</div>
</div>
<script type="text/javascript" src="scripts.js"></script> <!-- include your javascript here, if any -->
</body>
</html>

获得模板后，即可开始构建CSS。虽然我不会为你整理整个页面的样式，但是会给你一些关于该做什么的指示......

为了在UL之间实现＆gt; 效果，您可以使用<li> > </li>，也可以将＆gt; 的图像放置为李项目的背景图像。如果选择前者，你需要使用填充来获得恰到好处的位置，如果你选择稍后你将需要在li项中添加额外的类来确定哪个获得背景，哪个不应该。

为了获得内部边框效果，只需给div id =“content”边框。

要使内容Nav与内容边框相交，您需要将其从绝对定位的文档流中取出。

为了让内容导航具有您想要的样式，只需将边框应用于li并使用：link：visited :: hover：focus：active pseudo-classes应用翻转效果。

Answer 3

在矩形的外线使用一个div。将此填充等于您想要的内部区域的间距。同时给这个div position =“relative”来帮助定位其他元素。（徽标和菜单应该位于此div中，但在内部div之外）
对内部区域使用div。给这个宽度=“100％”，让它自然高度。
将徽标相对于顶部和左侧绝对定位。
绝对定位菜单相对于顶部和右侧（这将在调整大小时保持原位）

对于菜单上的圆角，如果您需要完整的浏览器支持且没有垂直缩放，最简单的方法就是使用适当的背景图像。搜索“推拉门技术”，你应该找到你需要的东西。

Answer 4

对于导航栏，我会使用一个无序列表，样式就像你通常会做出你喜欢的菜单（jquery会很适合下拉等），然后在菜单之外创建一个div这样：

<div id="navregion">
    <ul id="nav">
        <li><a href="#" class="active">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
    </ul>
</div>

然后我会给#navregion一个更高的z-index，相对/绝对定位在列和/或父#div中，以及一个top：x right：y值。

Answer 5

像这样http://jsfiddle.net/U2PUw/4/

Answer 6

您的标题是一个块，内容区域是另一个块。浮动导航菜单是无序列表<ul>，其中列表项<li>已浮动。

提供标题栏position: relative;，并将导航菜单放在标题内。然后提供导航菜单position: absolute; bottom: -30px; right: 15px;。调整味道。

对于圆角，尝试使用-moz-border-radius，-webkit-border-radius和-khtml-border-radius，将IE留作奇数。如果这不好并且导航菜单字的长度固定且不需要动态翻译，请使用图像。如果这不好，你需要使用多个图像来创建适当的圆角或检查基于Jquery的圆角。

Answer 7

我倾向于使用花车，然后使用负顶部边距来实现您想要的导航布局。当浏览器调整大小时，它应该保持向右（或浮动它的任何地方）。

CSS3只会帮助你更轻松地制作圆角，它对布局没什么帮助 - 所以我不担心不使用它。

HTML：

<html>
<body>

    <div id="box">
        <div id="nav">Nav</div>
        <p>Lorizzle ipsizzle dolizzle crunk amet</p>
    </div>

</body>
</html

#box {
    background:black;
    float:left;

    margin:50px;
}

CSS：

#nav {
    margin-top:-10px;
    background:silver;
    float:right;
}

p {
 color:white;   
}

预览jsFiddle。

Answer 8

用于导航的jQuery，其余的很容易搞清楚，只要你熟悉xhtml / css / js

Answer 9

从Listamatic获取一个水平列表，并将其绝对定位在您想要的位置。

Answer 10

使用位置：固定。

<div id="nav"> ... </div>
#nav { position:fixed, top: 30px; z-index: 1000}

这是一个开始

创建如下布局的最佳方法是什么？

10 个答案: