Question

我的CSS有问题。我正在建立一个我想制作自己的CSS的网站，我试着自己制作但我无法理解它。

我的目标是看起来像这样的网站但目前看起来像这样：

我尽我所能。我现在正在使用一些CSS，但它不是我想要的。

    html {
  background: #ECF0F1;
}
.sidebar {
  width: 20%;
  height: 100%;
  float: left;
  background: #043D5D;
  position: fixed;
  top: 50px;
  left: 0;
}
.sidebar p{
  margin-left: 10px;
  color: #FFF;
}
.nav{
  float: left;
  position: fixed;
  width: 100%;
  height: 50px;
  background: #043D5D;
  top:0;
  left:0;
}
.nav .logo img{
  height: 40px;
}
.content{
  width: 80%;
  height: 100%;
  float: left;
  top: 55px;
  position: fixed;
  margin-left: 21%;
}

小提琴：https://jsfiddle.net/bqgpn6hj/

有更好的方法吗？提前谢谢！

Answer 1

在这里查看我的jsfiddle：https://jsfiddle.net/bqgpn6hj/1/

我希望它对你有用。

以下代码：

body {
  background: #ECF0F1;
}
.clear {
  clear:both;
}
.nav {
  width:100%;
  float: left;
  background:red;
}
.logo{
  width: 20%;
  float:left;
}
.search {
  width:78%;
  float:left;
  padding: 10px 1%;
  text-align:right;
}
.sidebar {
  width: 16%;
  background: green;
  float:left;
  padding: 2% 2%;
}
.content {
  width: 80%;
  float:left;
  position:relative;
  background: yellow;
  height: 466px;
}
.subbar {
  background: gray;
  height: 200px;
}
.content .bottom {
  position:absolute;
  bottom:0px;
  background: blue;
  width:90%;
  padding: 5%;
}

和HTML

<body>    
     <div class="nav">
          <div class="logo">
              <img src="http://placehold.it/40x40">EasyMusic
          </div>
          <div class="search">
              <input type="text">
          </div>
     </div>
     <div class="clear"></div>
     <div class="sidebar">
          <div class="subbar" id="1">
            <p>Sidebar, links here</p>
          </div>
          <div class="subbar" id="2">
            <p>Bottom</p>
          </div>
     </div>
     <div class="content">
          <p>Content, everything here</p>
          <div class="bottom">
            bottom
          </div>
     </div>
      <div class="clear"></div>
    </body>

边栏，导航和内容怎么做？

1 个答案: