CSS的内容溢出和剪裁:overflow
来源:互联网 发布:nba球员场均数据排名 编辑:程序博客网 时间:2024/05/16 10:36
CSS的内容溢出和剪裁:overflow
为什么要使用overflow:
html中经常会出现子元素的宽度或高度超过了
父元素的高度或宽度。页面上的显示内容就会超出
父元素的边框。可以通过overflow进行控制处理。
overflow介绍:
滚动条样式主要涉及到如下overflow属性:
overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,其用到的表现形式和值有以下几种
overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条
以上属性设置的值为visible、scroll、hidden、auto
visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围,都将显示滚动条。
auto 当内容超出范围时,显示滚动条,否则不显示。
overflow 可实现的功能:横向列表和纵向列表
下面将实现的功能:纵向列表
功能描述:需要将内容按列表纵向显示,超出的部分可以通过滚动框拖动显示。
实现的效果:
实现思路:
1.布局: 最外层div包含顶部标签div和列表ul,固定ul的高度为300px;
摆放超过5个li 的item;
2.CSS 设置overflow-y为auto ,overflow-x为hidden并设置相应的颜色样式;
布局图:
实现代码:
html:
<div class="rankinglist"> <div class="rankTag bgcolor_21-126-130">积分排行</div> <ul class="ranklist"> <li class="rankli integralli"> <div class="rankliitem"> <div class="info left"> <img class="gamelogoimgtop" src="../images/homepage/dangzhou.png"> </div> <div class="info middle"> <div class="middlesub"> 战无不胜 </div> <div class="clear"></div> <div class="middlesub"> <img class="gamelogoimgsmall" src="../images/homepage/dangzhou.png"> </div> <div class="middlesubdownright">2</div> <div class="clear"></div> </div> <div class="info right">NO.1</div> <div class="clear"></div> </div> <div class="h2 bgcolor_cccccc"></div> </li> <li class="rankli integralli"> <div class="rankliitem"> <div class="info left"> <img class="gamelogoimgtop" src="../images/homepage/dangzhou.png"> </div> <div class="info middle"> <div class="middlesub"> 战无不胜 </div> <div class="clear"></div> <div class="middlesub"> <img class="gamelogoimgsmall" src="../images/homepage/dangzhou.png"> </div> <div class="middlesubdownright">2</div> <div class="clear"></div> </div> <div class="info right">NO.1</div> <div class="clear"></div> </div> <div class="h2 bgcolor_cccccc"></div> </li> <li class="rankli integralli"> <div class="rankliitem"> <div class="info left"> <img class="gamelogoimgtop" src="../images/homepage/dangzhou.png"> </div> <div class="info middle"> <div class="middlesub"> 战无不胜 </div> <div class="clear"></div> <div class="middlesub"> <img class="gamelogoimgsmall" src="../images/homepage/dangzhou.png"> </div> <div class="middlesubdownright">2</div> <div class="clear"></div> </div> <div class="info right">NO.1</div> <div class="clear"></div> </div> <div class="h2 bgcolor_cccccc"></div> </li> <li class="rankli integralli"> <div class="rankliitem"> <div class="info left"> <img class="gamelogoimgtop" src="../images/homepage/dangzhou.png"> </div> <div class="info middle"> <div class="middlesub"> 战无不胜 </div> <div class="clear"></div> <div class="middlesub"> <img class="gamelogoimgsmall" src="../images/homepage/dangzhou.png"> </div> <div class="middlesubdownright">2</div> <div class="clear"></div> </div> <div class="info right">NO.2</div> <div class="clear"></div> </div> <div class="h2 bgcolor_cccccc"></div> </li> <li class="rankli integralli"> <div class="rankliitem"> <div class="info left"> <img class="gamelogoimgtop" src="../images/homepage/dangzhou.png"> </div> <div class="info middle"> <div class="middlesub"> 战无不胜 </div> <div class="clear"></div> <div class="middlesub"> <img class="gamelogoimgsmall" src="../images/homepage/dangzhou.png"> </div> <div class="middlesubdownright">2</div> <div class="clear"></div> </div> <div class="info right">NO.3</div> <div class="clear"></div> </div> <div class="h2 bgcolor_cccccc"></div> </li> <li class="rankli integralli"> <div class="rankliitem"> <div class="info left"> <img class="gamelogoimgtop" src="../images/homepage/dangzhou.png"> </div> <div class="info middle"> <div class="middlesub"> 战无不胜 </div> <div class="clear"></div> <div class="middlesub"> <img class="gamelogoimgsmall" src="../images/homepage/dangzhou.png"> </div> <div class="middlesubdownright">2</div> <div class="clear"></div> </div> <div class="info right">NO.4</div> <div class="clear"></div> </div> <div class="h2 bgcolor_cccccc"></div> </li> <li class="rankli integralli"> <div class="rankliitem"> <div class="info left"> <img class="gamelogoimgtop" src="../images/homepage/dangzhou.png"> </div> <div class="info middle"> <div class="middlesub"> 战无不胜 </div> <div class="clear"></div> <div class="middlesub"> <img class="gamelogoimgsmall" src="../images/homepage/dangzhou.png"> </div> <div class="middlesubdownright">2</div> <div class="clear"></div> </div> <div class="info right">NO.5</div> <div class="clear"></div> </div> <div class="h2 bgcolor_cccccc"></div> </li> </ul> </div>
CSS:
.nav .ranking .ranklist{ height: 300px; overflow-y: auto; overflow-x: hidden; scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/ scrollbar-face-color: #333; /**//*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/ scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/}
- CSS的内容溢出和剪裁:overflow
- CSS overflow显示内容溢出
- overflow,clip,visibility 溢出和剪裁以及可见性
- overflow溢出内容区的解释
- CSS-overflow溢出
- CSS overflow 溢出
- 探究CSS属性overflow:hidden的作用:隐藏溢出和清除浮动
- 深入理解CSS溢出overflow
- 深入理解CSS溢出overflow
- 深入理解CSS溢出overflow
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- text-overflow文本溢出的全兼容CSS代码
- css+div如何解决内容的溢出
- div块的overflow属性,自动为溢出内容区的内容增加滚动条
- overflow内容溢出时,显示省略号
- CSS使用overflow隐藏超出范围的内容
- css中overflow和position的搭配
- CSS的visibility和overflow属性
- ARM Core WFI/WFE
- 数组、集合和散列表
- Hibernate详细教程
- VOC_layer.py详解,即Python层作为输入
- 【Codeforces 138D】World of Darkraft
- CSS的内容溢出和剪裁:overflow
- Java session共享的问题
- apk加固之360加固
- 写给程序员看的小说
- 多线程情况下初始化一次(InitOnceExecuteOnce)
- Asp.net上传文件jquery.fileupload.js
- 复数运算
- d3d11 鼠标拾取
- SpringMvc实现验证码