`
sdcyst
  • 浏览: 59148 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

html页面中运用CSS为层(div)元素添加滚动条

CSSHTML 
阅读更多

     当在页面中显示大量信息时，为了不使整个页面太长，常常将这些内容放在一个层中，然后再为这个层加上滚动条。这样即显示了全部的信息，又使得页面更加美观。下面是一个简单的带滚动条的层实现(其中涉及的一些CSS样式最好是能够参考一下CSS手册，可以使得整个层更加漂亮)。

 

<html>
	<head>
	<title>Div Scroll</title>
	
	<style type="text/css">
	.scroll {
		width: 50%;										/*宽度*/
		height: 200px;									/*高度*/
		color: ;										/*颜色*/
		font-family: ;									/*字体*/
		padding-left: 10px;								/*层内左边距*/
		padding-right: 10px;							/*层内右边距*/
		padding-top: 10px;								/*层内上边距*/
		padding-bottom: 10px;							/*层内下边距*/
		overflow-x: scroll;								/*横向滚动条(scroll:始终出现;auto:必要时出现;具体参考CSS文档)*/
		overflow-y: scroll;								/*竖向滚动条*/
		
		scrollbar-face-color: #D4D4D4;					/*滚动条滑块颜色*/
		scrollbar-hightlight-color: #ffffff;				/*滚动条3D界面的亮边颜色*/
		scrollbar-shadow-color: #919192;					/*滚动条3D界面的暗边颜色*/
		scrollbar-3dlight-color: #ffffff;				/*滚动条亮边框颜色*/
		scrollbar-arrow-color: #919192;					/*箭头颜色*/
		scrollbar-track-color: #ffffff;					/*滚动条底色*/
		scrollbar-darkshadow-color: #ffffff;				/*滚动条暗边框颜色*/
	}
	</style>
	
	</head>
	
	<body>
	<div align="center">
		<div class="scroll">
			<!--在此添加想要显示的内容 -->
		</div>
	</div>
	
	</body>
</html>

 

分享到：
评论
2 楼 小林java 2013-04-16  
代码不能运行
1 楼 昔日舞曲 2008-10-22  
不错
挺有趣的。。。！！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    一款好看的DIV+CSS滚动条

    在网页设计中，"DIV+CSS"是一种常见的布局方式，它通过定义HTML中的&lt;div&gt;元素样式，配合CSS（层叠样式表）来控制页面布局和视觉效果。标题提及的"一款好看的DIV+CSS滚动条"是指利用这种方法创建的自定义滚动条，它...

    div滚动条 带滚动条的div div滚动条样式

    要实现 DIV 滚动条，需要在 DIV 元素中添加 CSS 样式表，并设置 `overflow` 属性。`overflow` 属性有三个取值：`visible`、`hidden` 和 `auto`。 * `overflow: visible;`：内容超出 DIV 区域时，将自动扩展 DIV ...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    在网页设计中，当页面内容超出了可视区域的宽度时，浏览器会自动添加水平滚动条以允许用户水平滚动查看隐藏的内容。然而，滚动条本身会占用一定的空间，这可能会导致页面宽度缩小，从而影响布局的整体美观性。为了不...

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计，常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时，某个div元素（通常包含重要信息或导航）始终保持在视口顶部，...

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    div滚动条样式一览-div+css设计网

    在网页设计中，`div`元素是HTML中最常用的布局容器，它允许我们将页面内容组织成块状结构。而当这些`div`元素中的内容超出其设定的宽度或高度时，滚动条就会出现，以帮助用户浏览不可见的部分。在本文中，我们将深入...

    DIV滚动悬浮层(滚动条动，层不动)

    在网页设计中，"DIV滚动悬浮层"是一种常见的交互效果，它使得某个元素（通常是一个包含重要信息或功能的div）在用户滚动页面时始终保持在屏幕的特定位置，提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.docx

    ### DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏 #### 概述 在Web开发过程中，滚动条的样式和行为对于提升用户体验至关重要。通过CSS（层叠样式表），开发者可以自定义滚动条的外观、行为以及是否显示或隐藏。本...

    拖动div 内部有滚动条

    1. **CSS样式设定**：首先，为 `div` 设置合适的宽度、高度和溢出隐藏（`overflow: auto` 或 `overflow-y: scroll`），以便在内容过多时自动出现滚动条。同时，可能需要设置边框、内边距和外边距以美化布局。 2. **...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    在网页设计中，滚动条是不可或缺的元素，尤其是在内容超过屏幕显示范围时。HTML和CSS是构建网页的基础，其中HTML负责结构，CSS负责样式。本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式，...

    纯css控制内容随滚动条滚动，可放任意位置

    标题“纯css控制内容随滚动条滚动，可放任意位置”以及描述中的“纯CSS实现客服悬浮窗，随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器”都指向了这一技术——固定定位（fixed ...

    div滚动条优化

    "div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下，通过CSS样式和JavaScript技术来美化或定制滚动条，使其更加符合现代网页的审美标准和用户体验需求。 首先，我们要了解默认滚动条的样式通常是浏览器...

    用CSS实现跟随滚动条漂浮层代码

    总的来说，CSS的`position`属性是实现跟随滚动条漂浮层的关键。通过巧妙地设置`top`、`bottom`、`left`和`right`属性，你可以自由地定制漂浮层在页面上的位置，为用户提供更流畅的浏览体验。在实际项目中，可以结合...

    随滚动条移动的DIV层

    在网页设计与开发过程中，为了提高用户体验以及页面的交互性，常常会遇到需要制作一个随滚动条移动的元素（如提示框、广告栏等）。本文将通过分析一段具体的代码示例，详细介绍如何利用HTML、CSS及JavaScript技术...

    div不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...

    css特效 DIV_CSS图片滚动效果

    - `div`是HTML中的一个块级元素，全称为Division，意为分隔或分区。它通常用来组织网页内容，通过CSS来控制其样式和布局。 2. **CSS在图片滚动中的作用** - CSS在图片滚动效果中起到关键作用，主要负责设置图片的...

    Android手机版浏览器DIV滚动条失效解决方案

    在Android平台上，开发一款手机版浏览器时，可能会遇到一个常见的问题：在特定情况下，网页中的`div`元素的滚动条无法正常工作。这个问题通常是由于Android原生浏览器或自定义WebView组件的某些特性引起的。本文将...

    HTML5+CSS3 DIV滚动条.docx

    在这个例子中，我们将探讨如何利用 HTML5 和 CSS3 来创建和定制一个 DIV 元素中的滚动条。 首先，滚动条通常用于当一个元素的内容超过其可视区域时提供导航。在 HTML5 中，我们可以使用 `div` 标签来创建一个容器，...

    CSS单元的位置和层次-div标签

    内联样式是在HTML元素中直接添加style属性来设置CSS规则，适用于简单的样式修改。 示例代码： ```html &lt;div id="truck" style="position: absolute; left: 100px; top: 43px;"&gt; 这是一辆卡车 &lt;/div&gt; ``` 在这个...

Magicbox
Global site tag (gtag.js) - Google Analytics