手写一个侧边栏
CSS:
* {
margin: 0;
padding: 0;
}
.content {
position: absolute;
height: 100%;
width: 100%;
}
.head {
width: 100%;
height: 5%;
background-color: rgb(26, 27, 27);
}
.main {
display: flex;
justify-content: space-between;
height: 95%;
}
.left {
width: 10%;
background-color: #fff;
}
.right {
width: 90%;
background-color: cadetblue;
}
.left ul li {
list-style: none;
padding-top: 10px;
text-decoration: none;
width: 100%;
text-align: center;
color: darkgray;
}
HTML:
<div class="content">
<div class="head"></div>
<div class="main">
<div class="left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div class="right"></div>
</div>
</div>