怎么样在div+css中设置一个div的框并出现滚动条

怎么样在div+css中设置一个div,给他设置宽和高,并让他出现滚动条

1、打开dw,新建一个html页面,进入html页面编辑。

2、在代码的body中间编写一个div层。

3、将这个新建好的html页面跟编写好的div利用快捷键“ctrl+s”另保存到知道的目录下。

4、点击dw的文件按钮,在弹出的下拉框中,选择“新建”。

5、在新建的窗口中,找到“css”这一栏,点击“css”新建一个css样式。

6、写样式用".pingmu{}"开始写,给它固定宽高,再添加背景色,让div自适应宽高,超过部分显示滚动条。

7、将这个css样式保存到同级目录下,如ceshi.html在c盘,css样式也保存在c盘。

8、保存好样式后,双击这个ceshi.html页面,用浏览器打开后看到100像素宽高的黑块。

温馨提示:内容为网友见解,仅供参考
第1个回答  2017-07-19
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<style type="text/css">
.div1 {
width: 500px;
height: 200px;
background: #eee;
overflow: auto;
}
</style>
<div class="div1">
百度知道是一个基于搜索的互动式知识问答分享平台,于2005年6月21日发布,并于2005年11月8日转为正式版。百度知道一直探索国际化发展,于2012年3月31日发布百度知道台湾版。“百度知道”,是用户自己根据具有针对性地提出问题,通过积分奖励机制发动其他用户,来解决该问题的搜索模式。 同时,这些问题的答案又会进一步作为搜索结果,提供给其他有类似疑问的用户,达到分享知识的效果。
百度知道的最大特点,就在于和搜索引擎的完美结合,让用户所拥有的隐性知识转化成显性知识,用户既是百度知道内容的使用者,同时又是百度知道的创造者,在这里累积的知识数据可以反映到搜索结果中。通过用户和搜索引擎的相互作用,实现搜索引擎的社区化。
百度知道也可以看作是对搜索引擎功能的一种补充,让用户头脑中的隐性知识变成显性知识,通过对回答的沉淀和组织形成新的信息库,其中信息可被用户进一步检索和利用。这意味着,用户既是搜索引擎的使用者,同时也是创造者。百度知道可以说是对过分依靠技术的搜索引擎的一种人性化完善。
</div>
</body>
</html>

第2个回答  2017-07-10

效果入下

代码如下

<html>
<head></head>

<body>

<div style="font-size:40px; color:red; font-wight:700 "></div>

<div style="width:100%" ><img src="img/1.jpg"></div>

<div style="width: 300px; height:100px; overflow-y:scroll; border: 1px solid red ">在抓捕了巫支祁以后,李子玉和高重九当天就登上了去往临高的船。李子玉从来没有见过这么大的船。虽然元老院已经进入广州多日,但是由于平时任务的繁忙,偶有时间也被好学的李子玉用来学习澳洲知识,所以一直没有机会去见识一下澳洲大船。因为李子玉和高重九是先进工作者,他们被允许在船的部分地方自由活动。李子玉和高重九一边感叹船的雄壮宏伟,一边转悠。他们走到前边甲板上的时候,迎面走来一队人,这队人全部都是短发短衣,中间为首的人的气质明显与其他人不同。这一行人就是元青团第一书记何青辰带领的前往临高参观学习的广州优秀青年代表。在抓捕了巫支祁以后,李子玉和高重九当天就登上了去往临高的船。李子玉从来没有见过这么大的船。虽然元老院已经进入广州多日,但是由于平时任务的繁忙,偶有时间也被好学的李子玉用来学习澳洲知识,所以一直没有机会去见识一下澳洲大船。因为李子玉和高重九是先进工作者,他们被允许在船的部分地方自由活动。李子玉和高重九一边感叹船的雄壮宏伟,一边转悠。他们走到前边甲板上的时候,迎面走来一队人,这队人全部都是短发短衣,中间为首的人的气质明显与其他人不同。这一行人就是元青团第一书记何青辰带领的前往临高参观学习的广州优秀青年代表。在抓捕了巫支祁以后,李子玉和高重九当天就登上了去往临高的船。李子玉从来没有见过这么大的船。虽然元老院已经进入广州多日,但是由于平时任务的繁忙,偶有时间也被好学的李子玉用来学习澳洲知识,所以一直没有机会去见识一下澳洲大船。因为李子玉和高重九是先进工作者,他们被允许在船的部分地方自由活动。李子玉和高重九一边感叹船的雄壮宏伟,一边转悠。他们走到前边甲板上的时候,迎面走来一队人,这队人全部都是短发短衣,中间为首的人的气质明显与其他人不同。这一行人就是元青团第一书记何青辰带领的前往临高参观学习的广州优秀青年代表。</div>

</body>


</html>

第3个回答  2017-06-15
.div{
    width:100%;
    height:200px;
    overflow-x:hidden;
    overflow-y:auto;
}

/*兼容IE*/
.div{
    scrollbar-face-color: #20a774;/*移动滑块颜色*/
    scrollbar-shadow-color: #20a774;/*移动滑块边框颜色*/
    scrollbar-track-color: #ccc;/*背景颜色*/
    scrollbar-arrow-color: #ddd;/*箭头颜色*/
}
.div::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #ccc;
}/* 滚动条的滑轨背景颜色 */
.div::-webkit-scrollbar
{
width: 6px;
background-color: #ccc;
}

.div::-webkit-scrollbar-thumb
{
background-color: #20a774;
}/* 滑块颜色 */

当div内的内容超过200px时才会显示滚动条,下边的代码是对滚动条的优化,希望对你有帮助。

本回答被网友采纳
第4个回答  2016-12-24
div 加滚动条的方法:

<div style="position:absolute; height:400px; overflow:auto"></div>
div 设置滚动条显示:overflow :yes
div 设置滚动条自适应显示:overflow :auto
div 设置上下滚动条显示:overflow-y :yes
div 设置上下滚动条自适应显示:overflow-y :auto
如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative本回答被网友采纳

div+ css滚动条怎样实现
1、(高度和宽度根据需要设定)注意:如果只写高度,只有垂直滚动条,只写宽度,只有水平滚动条,所以什么都不写没有效果。同样在这里,overflow设置为auto,也就是说如果你的页面高度大于300px,就会有滚动条;如果小于300像素,就不会有滚动条。同样,如果宽度大于100px,则出现滚动条;如果宽度小于100像素...

如何在div+css中设置div的宽和高,同时让他横向和纵向出现滚动条,且滚动...
<div id="abc"><\/div> 定义id为abc的这个div的CSS属性 在<head>下 <style> {width:100px;height:100px; overflow:scroll; } <\/style> overflow:scoll;的意思是总显示滚动条。滚动条的颜色,只有在IE浏览器才能显示出来。自己在color后面加颜色去试试 不太好用 scollbar-3dlight-color:scollba...

用css怎么设置div滚动条的样式,可改变大小的
在css设置可改变大小的div滚动条样式方法:1.首先新建html文档,进入代码书写界面。2.在<\/head>和<body>的里面写入代码,在<div>里面写入想要输入的内容<\/div>。3.书写外层轨道css代码。body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;\/*外层轨道*\/}...

css如何实现div随滚动条移动css左右滚动条
1。在头部定义一个div,固定高度,设置绝对位置(position:absolute),设置上边距(top:0);2.在底部定义一个div,固定高度,设置绝对位置(position:absolute),设置下边距(bottom:0);3.在中间定义一个div并自动设置滚动条(溢出:auto);设置绝对定位(position:absolute),设置top和bottom,top的值等于头d...

如何使用JS控制DIV内容的滚动条
1、首先需要新建一个HTML文档,这里设立一下基本的架构。2、再新建一个CSS文件,用link关联一下HTML文档。3、创建DIV标签,并且往里面填充内容。4、先设定一下滚动条内框的大小。5、用border先来查看是否有超出,这里可以看出超出了很多内容。6、overflow-y: scroll;overflow-x: scroll;加上这个样式...

DIV怎么设置滚动条
对div设置滚动条,设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏,接下来为大家介绍。一、CSS基础认识 - TOPoverflow-y:scroll; 总是显示纵向滚动条overflow-y:visible : 不剪切内容...

css设置滚动条
在页面中,常常要将一些内容以滚动的形式来展示,下面我们就来看看css如何设置滚动条;首先让我们创建一个HTML文件,如图所示;让我们通过记事本来编辑,书写上一个HTML的整体结构,如图所示;书写一个div模块,如图所示;接着让我们开始写css代码,如图代码;定义上div的长宽,如图红框位置;利用overflow...

如何让div里面的p出现滚动条?
如何让p里面的p出现滚动条?1、打开dw,新建一个html页面,进入html页面编辑。2、在代码的body中间编写一个p层。3、将这个新建好的html页面跟编写好的p利用快捷键“ctrl+s”另保存到知道的目录下。4、点击dw的文件按钮,在弹出的下拉框中,选择“新建”。5、在新建的窗口中,找到“css”这一栏,...

div 设置百分比 怎么不出滚动条,不设置div的宽高,怎么让div 显示滚动...
方法一:你可以 用js获取浏览器宽高,用这个宽高减去padding 、margin 宽高和一些控件的宽高,从而将这个宽高 动态赋给 div 。以下是获取浏览器或窗口的代码:\/\/ 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth)...

css设置div滚动条样式
目前只有chrome支持设置滚动条样式,给div设置伪类 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scroll...

相似回答