创建 CSS / HTML 侧边栏

Question

我是一个相当新的 Web 开发人员，我遇到了一个问题（部分原因可能是缺乏理解）但是我在使用 HTML 或 [= 创建侧边栏时遇到了一个糟糕的时间35=]。我的网站目前看起来如下：

这里没有太多内容，但我的困境很简单：我想创建一个侧边栏。也许放最近的更新或其他重要的事情。另外，很高兴知道我最终是否会从事网络开发工作。

代码如下：

* {
  margin: 0;
  padding: 0;
}
body {
  background: url("https://s-media-cache-ak0.pinimg.com/originals/ca/5d/a4/ca5da4df54f6fc88531cbfff469043b0.jpg");
  background-repeat: no-repeat;
}
.navbar {
  width: 100%;
  margin-top: 150px;
}
.navbar ul {
  text-align: center;
  border-top: solid 2px black;
  border-left: solid 2px black;
  border-right: solid 2px black;
  margin-left: 400px;
  margin-right: 400px;
  background: #444444;
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar ul li {
  display: inline-block;
}
.navbar ul li a {
  text-decoration: none;
  color: black;
  font-size: 30px;
  padding-left: 20px;
  padding-right: 20px;
  color: white;
  transition: 0.3s;
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar ul li a:hover {
  background: #8c8c8c;
}
.body {
  background-color: rgba(158, 158, 158, 0.6);
  margin-left: 400px;
  margin-right: 400px;
  border: solid 2px black;
  border
}
.body p {
  font-size: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 30px;
  font-weight: 600;
}

<div class="navbar">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">My Works</a>
    </li>
    <li><a href="#">Contact Me</a>
    </li>
  </ul>
</div>

<div class="body">

  <p>(paragraph related stuff)
  </p>
</div>

我对 Web 开发（以及完全编程，真的）还很陌生，但我已经查找了多个问题，尝试了很多方法，但似乎没有任何效果。我决定自己post 到这里看看是否能得到任何解决方案？

据我了解，HTML 包含一个接一个的元素。我从来没有想过如何让元素并排。这在添加图像然后在其旁边添加文本时也可能有所帮助！

如果你能帮助我，谢谢你:)

Answer 1

也许这个简单的侧边栏可以提供帮助：

http://codepen.io/Axeish/pen/GrEdMx

CSS

`
html {
  height: 100%;
}

body {
  height: 100%;
  background-color: #e2e1e0;
  overflow: hidden;
}

a, a:focus, a:active {
  text-decoration: none;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

.card {
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  padding: 20px;
  background-color: #fff;
  margin-bottom: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.center {
  width: 400px;
  height: 200px;
}

.container {
  height: 100%;
  margin-left: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
}
.container p {
  font-size: 20px;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 400px;
  z-index: 20;
  padding-top: 50px;
  padding-bottom: 100px;
  background-color: white;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.23);
}
.header .content .logo {
  padding: 10px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header .content .logo span {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 27px;
  font-weight: 200;
  color: #212121;
}
.header .content .logo img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.header .content ul.navigation {

  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 0;
}
.header .content ul.navigation li {
    padding: 10px;
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
.header .content ul.navigation li a {

  color: #212121;

}
.header .content ul.navigation li a.active {
  text-decoration: underline;
}
.header .content ul.navigation li:hover a {
  background-color: #212121;
  color: white;
}



`

Answer 2

看看这个。

*, :before, :after {
  box-sizing: border-box;
}

body {
  background: url("https://s-media-cache-ak0.pinimg.com/originals/ca/5d/a4/ca5da4df54f6fc88531cbfff469043b0.jpg");
  background-repeat: no-repeat;
}

.unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}
.unstyled a {
  text-decoration: none;
}

.list-inline {
  overflow: hidden;
}
.list-inline li {
  float: left;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 17.5em;
  background: #D13513;
}

.logo {
  font: 300 2em "Source Sans Pro", Helvetica, Arial, sans-serif;
  text-align: center;
  padding: 0;
  margin: 0;
}
.logo a {
  display: block;
  padding: 1em 0;
  color: #DFDBD9;
  text-decoration: none;
  transition: .15s linear color;
}

.main-nav ul {
  border-top: solid 1px #3C3735;
}
.main-nav li {
  border-bottom: solid 1px #3C3735;
}
.main-nav a {
  padding: 1.1em 0;
  color: #DFDBD9;
  font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;
  text-align: center;
}
.main-nav a:hover {
  color: #fff;
}


.list-hover-slide li {
  position: relative;
  overflow: hidden;
}
.list-hover-slide a {
  display: block;
  position: relative;
  z-index: 1;
  transition: .35s ease color;
}
.list-hover-slide a:before {
  content: '';
  display: block;
  z-index: -1;
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-right: solid 5px #DF4500;
  background: #3C3735;
  transition: .35s ease left;
}
.list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<body>
  <header class="header" role="banner">
  <h1 class="logo">
    <a href="#">SideNav</a>
  </h1>
  <div class="nav-wrap">
    <nav class="main-nav" role="navigation">
      <ul class="unstyled list-hover-slide">
        <li><a href="#">Home</a></li>
        <li><a href="#">My Work</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </nav>
    

  <script

创建 CSS / HTML 侧边栏

Creating a CSS / HTML sidebar

html

css

sidebar