设计稿长这样
``
然后,直接贴代码吧,越菜的人,记录的越多
// html
<div class="scroll">
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="block"></div>
</div>
// css
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
background: #081936;
overflow: hidden;
}
.scroll {
width: 1010px;
margin: 0 auto;
height: 600px;
background: #0a2b4e;
padding: 10px 0 10px;
position: relative;
}
.scroll::before {
content: '';
display: block;
position: absolute;
right: 30px;
width: 1px;
background: #1f426c;
bottom: 10px;
top: 10px;
}
.scroll::after {
content: '';
display: block;
position: absolute;
right: 0px;
width: 1px;
top: 10px;
bottom: 10px;
background: #1f426c;
}
.block {
position: absolute;
top: 10px;
right: 0;
bottom: 10px;
width: 0;
}
.block::before {
content: '';
display: block;
position: absolute;
height: 1px;
background: #1f426c;
width: 20px;
right: 0;
top: 0;
}
.block::after {
content: '';
display: block;
position: absolute;
width: 20px;
right: 0px;
height: 1px;
bottom: 0px;
background: #1f426c;
}
.wrap {
width: 1000px;
padding-right: 20px;
height: 100%;
overflow-x: hidden;
box-sizing: border-box;
border: 1px solid #1f426c;
border-right: 0;
padding-top: 20px;
bottom: 20px;
}
.box {
width: 95%;
margin: 0 auto;
height: 200px;
background: #254e8f;
margin-bottom: 30px;
}
.wrap::-webkit-scrollbar {
width: 10px;
height: 10px;
padding: 0 10px;
}
.wrap::-webkit-scrollbar-track {
background: #0a2b4e;
border-radius: 2px;
}
.wrap::-webkit-scrollbar-thumb {
background: #a4bace;
border-radius: 10px;
}
.wrap::-webkit-scrollbar-thumb:hover {
background: #c7d6e3;
}
.wrap::-webkit-scrollbar-button {
background-color: transparent;
height: 20px;
}
然后这是实现效果
记录一下