我的 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%;
}
fiddle :https://jsfiddle.net/bqgpn6hj/
有更好的方法吗？提前致谢!
最佳答案
在这里查看我的 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>
关于html - Sidebar、Navigation 和Content 怎么做呢？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40466477/