App下載

在html中如何加滾動條?滾動條的用法!

猿友 2021-05-31 17:53:09 瀏覽數(shù) (10524)
反饋

隨著經(jīng)濟(jì)和科技的發(fā)展,互聯(lián)網(wǎng)的大趨勢造就了很大的就業(yè)機(jī)會,而且在我們?nèi)粘5纳钪写蠹叶喽嗌偕贂g覽一些網(wǎng)站和網(wǎng)頁吧!那么今天呀,我們就來說說在html中如何加滾動條?和一些有關(guān)于滾動條的用法!的經(jīng)驗分享!


1.首先我們打開我們的前端的開發(fā)工具新建一個 .html 文件即可,代碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滾動條</title>
	</head>
	<body>
		<div >
            W3cshool,一款可以讓大家免費編程學(xué)習(xí)的平臺。
			</div>
	</body>
</html>

在代碼完成后進(jìn)行預(yù)覽,我們發(fā)現(xiàn)這個代碼生成的一個結(jié)果是沒有滾動條的。


2.那么接下來我們開始設(shè)置滾動條,我們在代碼塊中加入 style 元素,在元素之后添加滾動條的屬性 overflow: scroll 就可以實現(xiàn)一個滾動條了,那么接下來我們來看看,代碼和截圖:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滾動條</title>
		<style>
			div{
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div style="overflow: scroll;">W3cshool,一款可以讓大家免費編程學(xué)習(xí)的平臺。
			
		</div>
	</body>
</html>

滾動條

這樣子我們就可以清晰的看出來在文本中顯示了一個滾動條,當(dāng)然如果還要設(shè)置左右滾動或者上下滾動的話,也是可以做到的。我們可以在HTML滾動條樣式代碼中學(xué)習(xí)到更多的有關(guān)的知識噢!


小結(jié):

那么今天的一個有關(guān)于在html中如何加滾動條?和滾動條的用法!就到這里啦!有感興趣的小伙伴還可以在Web前端入門視頻中進(jìn)行學(xué)習(xí)噢!希望今天分享的對你有所幫助。


0 人點贊