Question

我们正在为我们的课程完成我们的网站项目的最后过程，我正在尝试制作我们网站的视图文档页面，它应该看起来像附加的油漆图像。

View Page prototype image; follow the link because stackoverflow needs reputation to embed images :/

我已经有了一个页眉和页脚，我将从我制作的主页中使用它。我现在尝试做的就是创建内部div部分，如图中所示，我希望它们就像那个垂直部分。我一直在网上搜索样品，但我无法找到我需要的样品。

基本上左侧div喜欢的部分是创建的文档将显示为链接的位置，以便用户可以从中进行选择以进行查看。我们正在制作的网站几乎是一个协作网站，工程师团队登录到该网站，系统会将他们与他们注册的团队名称相匹配，每个团队都有自己的私人工作空间的视图页面doc即im在尝试创建现在的过程中。所以每个团队在左侧都会有不同的链接，所以它的动态是一个动态的＆＃34;或者＆＃34;改变＆＃34; div部分。这就是为什么我说它应该像导航栏，但不是同时一个，因为它取决于每个团队的私人创建文件数量。

在中间，当他们点击链接从主页或此视图页面中的此类导航栏中查看时，他们可以查看文档。

右边是我们计划进行团队聊天的地方。我相信这是我们插入插件团队聊天的地方吗？除非从头开始一个简单的事情：D？

这里是目前为止的页眉，页脚和中间div部分的HTML代码。 CSS遵循

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>doc view</title>
    <link rel="SHORTCUT ICON" HREF="images/logo.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="css/homepageStyle.css" rel="stylesheet">
    <script src="javascript/jquery.js"></script>
    <script src="javascript/bootstrap.min.js"></script>
    <!-- Bootstrap JavaScript -->
</head>

<body>
    <header>
        <div class="container">
            <a href=""><img class="logoImage" border="0" alt="logo" src="images/logo.gif"></a>
        </div>
    </header>
    <div class="ContentSection1">
        <div class="container">
            <div class="col-lg-5 col-sm-6">
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="col-lg-12">
            </div>
        </div>
    </footer>
</body>

</html>

CSS：

header {
    padding: 20px 0;
    background: url(../images/HPbg.jpg) no-repeat 100% 0%; 
    text-align: center;
}

footer {
    padding: 25px 0;
    background-color: #99CCCC;
    text-align: center;
}

.logoImage { 
    position: absolute;
    left: 47%;
    top: 3.5%;
    z-index: 1;
}

.ContentSection1 {
    padding: 50px 0;
    background-color: AliceBlue ;
}

body, html {
    width: 100%;
    height: 100%;
}

提前感谢！

Answer 1

您可以使用bootstrap网格：

HTML：

<header>
   ....
</header>
<div class="col-md-12">
  <div class="col-md-2 col-sm-2 left"> ... </div>
  <div class="col-md-8 col-sm-8 center"> ... </div>
  <div class="col-md-2 col-sm-2 right"> ... </div>
</div>
<footer>

CSS：

header {
    height: 50px;
    background-color: green; 
}
.left {
    background-color: yellow;
    height:80px; /* not mandatory */
}
.center {
    background-color: blue;
    height: 100px; /* not mandatory */
}
.right {
    background-color: gray;
    height: 50px; /* not mandatory */
}
.col-md-12 {
    height: 100px; /* not mandatory */
    padding: 0px;
}
footer {
    background-color: teal;
    height: 50px;
}

Answer 2

此外，您可以简单地执行此操作。

 func simplePing(pinger: SimplePing!, didReceivePingResponsePacket packet: NSData!)

如何在左侧创建VERTICAL Divs和类似nav的栏？

2 个答案: