如何添加侧边栏和中心页面,使其与导航栏

时间:2016-07-24 02:58:23

标签: html css

我尝试在我的网站上添加中心页面和侧边栏,但唯一的问题是div标签合并,导航栏的背景颜色接管侧边栏,即使样式代码是分开的,也是一个例子

<!DOCTYPE html>
<style>
body {margin:0;}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: solid;
    background-color: #000000;
    width: 100%;
  display:inline-block;

}

li {
    float: left;
}
 .dropbtn {
    background-color: #0E8E0A;
    color: white;
    padding: 19px;
    font-size: 16px;
    border: none;
     overflow:hidden;
    cursor: pointer;
}

 .dropbtnR {  
    background-color: #15428A; 
    color: white;
    padding: 19px;
    font-size: 16px;
    border: none;
     overflow:hidden;
    cursor: pointer;

}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
span {

}
</style>
<!-- saved from url=(0039)http://www.theamannetwork.net/beta.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>
.float-left-area  {
          width: 70%;
          float: left;
          }

.float-right-area {
          width: 30%;
          float: left;
          }

.inner-left   {
          padding: 5px 5px 5px 5px;
          margin-right: 10px;
          border: #999999 1px solid;
          min-height: 60px;
          }

.inner-right      {
          font-size: 11px;
          padding: 5px 5px 5px 5px;
          border: #999999 1px solid;
          min-height: 60px;
          }

.clear-floated    { clear: both; height: 1px; font-size: 1px; line-height: 1px; padding: 0; margin: 0; }
</style>
<
</head>
<body>

<ul>
 <br>
<div class="dropdown" style="float:left;">
  <button class="dropbtn">≡</button>
  <div class="dropdown-content" style="left:0;">
    <a href="http://www.theamannetwork.net/beta.html#">the </a>
    <a href="http://www.theamannetwork.net/beta.html#">cake </a>
    <a href="http://www.theamannetwork.net/beta.html#">is a lie</a>
  </div>
</div>

  </br>
  <div class="dropdown-content">
    <a href="http://www.theamannetwork.net/beta.html#"><img src="./beta_files/Twitter.png"> </a>
    <a href="http://www.theamannetwork.net/beta.html#">random link </a>
    <a href="http://www.theamannetwork.net/beta.html#">SOMTHING IDK </a>
  </div>
</div> 

  <center><a class="navbar-brand" href="http://www.theamannetwork.net/beta.html#"><img src="./beta_files/banner.png" alt=""></a></center>


<div class="float-left-area">
<div class="inner-left">

some random content

</div>
</div>

<div class="float-right-area">
<div class="inner-right">

some random content

</div>
</div>

<div class="clear-floated"></div>

</ul></body></html>

如何添加中心页面和侧边栏以及合并

1 个答案:

答案 0 :(得分:0)

你是否想沿着这些方向做点什么?

&#13;
&#13;
var update={};
update[req.body.field]=req.body.value;
Model.update(
    {"email":req.user.email},
    {$set:update},
    function (err,success) {
        if(err) return handleError(err);
    }
)
&#13;
&#13;
&#13;