Question

我将Jpeg与此请求相关联，以便更好地说明我的问题（https://drive.google.com/file/d/0B7gjrjsUBWeTTDA1S1JpeFAwWFE/view?usp=sharing）。我是CSS和HTML的新手，我想推动自己（我正在做的事情是为了好玩）。我正在使用Skeleton Boilerplate制作类似于GMAIL收件箱的仪表板。

我将有一个我已经制作的主标题（菜单）。我现在要弄清楚的是如何处理垂直导航和第二个标题？

我是否将垂直导航设为列表？如何将第二个标题排在垂直导航的右侧？我想我只是在寻找策略。对不起，关于这是一个noob问题。任何输入都会有帮助。

Answer 1

一些想法：

jsFiddle Demo

对于谷歌友好的搜索引擎优化，将导航包含在<nav></nav>标签内，并使用锚标签作为菜单项，无论是否在列表结构内：

<ul><li><a html="#">Menu Item</a></li></ul>

使用DIV将您的页面分成几个块。将每个谨慎的部分（阻止？部分？）放入DIV中。或者，使用Twitter的bootstrap（它做同样的事情）。

这样的事情：

<body>
<div id="wrap">
    <div id="header">
    </div><!-- #header -->
    <nav id="sideNav">
        <ul>
            <li>Menu Item</li>
            <li>Menu Item</li>
            <li>Menu Item</li>
        </ul>
    </nav><!-- #sideNav -->
    <div id="subhead">
    </div><!-- #subhead -->
    <div id="container">
        <article>
        </article>
    </div><!-- #container -->
</div><!-- #wrap>
</body>

要并排导航菜单<li>项目，您可以使用：

ul li {display:inline;}

要将导航设置为左侧的样式，并使用右侧的子标题和内容，以下内容将启动您：

#wrap {width:100%;}
#header  {width:100%;height:80px;}
#sideNav {float:left;width:15%;min-height:500px;}
#subHead {margin-left:15%;width:85%;height:80px;}
#container {margin-left:15%;width:85%;min-height:500px;}

使用float时，了解float:left（或右）将从页面流中删除DIV非常重要。这就是subHead和container位于sideNav旁边的方式。但是，当使用浮动时，跟随DIV可能位于浮动的div之上。 *（请参阅下面的 all-about-floats 链接中的Great Collapse部分）*因此，您必须了解＆＃34;清除浮动＆＃34;在父级：

#wrap {width:100%;overflow:auto;}

还有更多，但这会让你开始。

或者，了解bootstrap，其中为您做了很多和，确保您的网站适合移动设备（又名＆＃34;响应＆＃34;。）

参考文献：

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

https://css-tricks.com/all-about-floats/

https://css-tricks.com/almanac/properties/w/width/

如何处理具有固定垂直和水平导航的页面

1 个答案: