代码之家 › 专栏 › 技术社区 › Sev

创建如下布局的最佳方法?

layout css html

Sev · 技术社区 · 15 年前

使用HTML&CSS(不能使用CSS3)获得如下布局的最佳方法是什么?

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

另外,你建议我如何创建导航栏?它需要圆角和滚动,但目前没有子菜单。

_{(来源:

sevdev.com

)}

澄清

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

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

10 回复 | 直到 6 年前

Å ime Vidas Zim84 15 年前

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

(我没有做阴影或圆角-这些是CSS3的功能。如果你想在旧的浏览器中拥有这些功能,你需要解决问题,但那是另一回事…)

Moses 15 年前

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

<!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了。虽然我不会为你设计整个页面的样式,但a会给你一些关于该怎么做的提示。。。

为了实现 > 在ULs之间的效果,您可以使用 <li> > </li> 或者你可以放置 > 作为li项的背景图像。如果你选择前者,你将需要玩填充来获得正确的位置,如果你选择后者,你将需要添加额外的类到li项,以确定哪些得到背景,哪些不应该。

为了获得内部边界效果,只需给div id=“content”设置一个边界。

要使内容导航与内容边框相交,需要使用绝对定位将其从文档流中取出。

为了使内容导航具有所需的样式,只需对li应用一个边框,并使用:link:visited::hover:focus:active伪类应用滚动效果。

edeverett 15 年前

使用一个div作为矩形的外线。将此填充设置为与内部区域的间距相等。还可以使用div position=“relative”帮助定位其他元素。(logo和菜单应该位于这个div中,但在内部div之外)
在内部区域使用div。把这个宽度设为“100%”,让它取自然高度。
绝对定位标志相对于顶部和左侧。
绝对定位菜单相对于顶部和右侧的位置(这将在调整大小时保持原位)

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

calweb 15 年前

对于导航栏,我会使用一个无序的列表,像您通常所做的菜单样式一样(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索引,列和/或父级div内的相对/绝对位置,以及一个top:x right:y值。

s_hewitt 15 年前

像这样的东西 http://jsfiddle.net/U2PUw/4/

Tom 15 年前

你的标题是一个块,内容区是另一个块。浮动导航菜单是一个无序的列表 <ul> 列表项的位置 <li> 是漂浮的。

给你的头挡 position: relative; ,然后将导航菜单放在标题中。然后给你的导航菜单 position: absolute; bottom: -30px; right: 15px; . 适应口味。

对于圆角,尝试使用-moz border radius、-webkit border radius和-khtml border radius,将IE作为奇数项。如果这不好,如果导航菜单中的单词是固定长度的,不需要动态翻译,请使用图像。如果这不好,您需要使用多个图像来创建适当的圆角,或者查看基于Jquery的圆角。

Jon Hadley 15 年前

我倾向于使用浮点数,然后使用负上边距来实现所需的导航布局。当浏览器调整大小时,它应该保持在右侧(或浮动在任何位置)。

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 .

yoda 15 年前

对于jQuery的导航,只要您熟悉xhtml/css/js,其余的都很容易理解

AndreKR 15 年前

从中获取水平列表 Listamatic 把它放在你想要的位置。

Sebastian Patane Masuelli 15 年前

使用位置:固定。

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

这是个开始