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>

HTML＋CSS实现大盒子在小盒子的展示范围内进行滚动展示的更多相关文章

  1. 微信小程序调用后台接口+热点新闻滚动展示

    1.微信JS文件,发送请求调用:  //将返回接口数据,写入Page({data})里面 //获取热点新闻,这个也是写在onload:function(){//code)里面的 wx.request( ...

  2. CSS盒子模型小剖析

    前段时间刚刚从C/S过度到B/S,提到B/S就不能说CSS,而说起CSS又不能落下盒子模型.在CSS诞生的时候就有了盒子模型的概念,网页中大部分的元素都能构成一个盒子模型,.盒子模型无非就是描述的元素 ...

  3. 小程序一个大盒子里面的盒子内容居中对其显示wxss写法

    对小程序研究感兴趣的可加(交流QQ群:604788754)入群联系群主可得到小程序教学资源. 这个案例只是想展示效果,内容部分未进行for循环绑定处理: WXML: <view class=&q ...

  4. CSS box-flex属性，然后弹性盒子模型简介(转)

    一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

  5. CSS（十四）：盒子模型

    页面布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子. 利用CSS设置好盒子样式,然后放到相应的位置 往盒子里面装内容 网页布局的本质:就是利用CSS摆盒子 盒子模型 组成 所 ...

  6. HTML5 3D Google搜索 小盒子 大世界

    HTML5真是能让人想象万千,居然动起了Google搜索的主意,它利用HTML5技术将Google搜索放到了一个小盒子里,弄起了3D搜索.随着鼠标移动,HTML5 3D搜索盒子也就转动,非常立体.点击 ...

  7. CSS从大图片上截取小图标

    一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...

  8. css盒子模型 css3盒子相关样式

    1.内边距(内边距在content外,边框内) 内边距属性: padding          设置所有边距 padding-bottom     底边距 padding-left           ...

  9. css中的几个小tip（二）

    margin的塌陷现象 (一)在标准文档流中, 垂直方向存在margin的塌陷现象 先上段代码: <style type="text/css"> .box{ width ...

随机推荐

  1. Jmeter 常用函数（6）- 详解 __P

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 和 __property 作用一样,不 ...

  2. JavaScript学习系列博客_9_JavaScript中的if语句、switch语句

    条件判断语句 - 条件判断语句也称为if语句 - 语法一: if(条件表达式){ 语句... } - 执行流程: if语句执行时,会先对条件表达式进行求值判断, 如果值为true,则执行if后的语句 ...

  3. C++ Templates (Part I 基本概念 The Basics)

    C++ 模板 (C++ Templates) 目录 C++ 模板 (C++ Templates) 第一部分 基本概念 (The Basics) 第一部分章节目录 参考资料 第一部分 基本概念 (The ...

  4. Nuxt.js 踩坑记录(3) Net.connection xxxx

    浏览器报的是Net.connection啥的错误 项目运行时报错这个 [HPM] Error occurred while trying to proxy request article from l ...

  5. android开发之edittext弹出输入框遮挡住文字。解决方法

    在ManiFest清单文件中修改被遮挡的类的EditText android:windowSoftInputMode="adjustPan|stateHidden"

  6. Volatile关键字&&DCL单例模式，volatile 和 synchronized 的区别

    Volatile 英文翻译:易变的.可变的.不稳定的. 一.volatile 定义及用法 多个线程的工作内存彼此独立,互不可见,线程启动的时候,虚拟机为每个内存分配一块工作内存,不仅包含了线程内部定义 ...

  7. 公共项目开发：我为什么用 JSDoc，而不用 ts

    公共模块,通常会被多个项目.不同的开发人员使用,所以开发公共模块时,你自己会用还不够,要让所有人都能很快的知道怎么去使用,这一点很关键.通常会从3个方面做到这点: 精心分割代码逻辑,遵循开闭原则: 变 ...

  8. CVPR2020 面向密集多角度物体检测的动态修正网络（DRN）

    论文链接:https://arxiv.org/pdf/2005.09973.pdf code:https://github.com/Anymake/DRN_CVPR2020 文章概要: 本文是中科院自 ...

  9. vue 在使用数组的时候，数组内部数据发生变化，视图却没有改变

    data(){ return{ todos: [ {name: 'aa', age: 22}, {name: 'bb', age: 23} ] } } methods:{ changeTodos(){ ...

  10. 常见的开源 License

    目录 什么是开源软件 什么是 license 商业许可证与开源许可证 对开发者的影响 开源许可证的类型 如何选择开源许可证 什么是开源软件 开放源代码的软件.假设有一天自我感觉代码能力不错,写了个小工 ...