HTML＋CSS实现大盒子在小盒子的展示范围内进行滚动展示

　　HTML＋CSS实现大盒子在小盒子的展示范围内进行滚动展示

　　１.效果展示：

　　2.主要代码:样式: overflow:auto;

　　3.如果想要消除对应的滚动条:

　　　　.out::-webkit-scrollbar{
　　　　　　display: none;
　　　　}

　　4.创建对应的盒子(div)配置对应的样式:

　　源代码:

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　<title>rowspeed</title>

　　<style type="text/css">
　　*{
　　　　padding: 0;
　　　　margin: 0;
　　}
　　.out{
　　　　position: absolute;
　　　　left: 200px;
　　　　top: 100px;
　　　　width: 300px;
　　　　height:250px;
　　　　background: skyblue;
　　　　overflow: auto;  /*实现代码所在位置*/
　　}
　　　　.conten{
　　　　position: absolute;
　　　　display: flex;
　　　　justify-content: space-around;
　　　　width: 550px;
　　　　height: 200px;
　　　　background: lightseagreen;
　　}
　　.conten>div{
　　　　width: 100px;
　　　　height: 100%;
　　　　background: yellow;
　　}

　　/*消除滚动条,消除的时候PC电脑端可以通过按下鼠标的滚轮进行左右滑动,或者笔记本电脑双指同时拖动*/
　　/*out::-webkit-scrollbar{
　　　　display: none;　　

　　}*/
　　</style>
　　</head>
　　<body>
　　　　<div class="out">
　　　　　　<div class="conten">
　　　　　　　　<div>11</div>
　　　　　　　　<div>22</div>
　　　　　　　　<div>33</div>
　　　　　　　　<div>44</div>
　　　　　　　　<div>55</div>    
　　　　　　</div>
　　　　</div>
　　</body>
　　</script>
　　</html>

 

posted @ 2020-09-17 19:35  大韦哥  阅读(3566)  评论(0)    收藏  举报