App下載

在html中如何加滾動(dòng)條？滾動(dòng)條的用法！

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

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

1.首先我們打開(kāi)我們的前端的開(kāi)發(fā)工具新建一個(gè) .html 文件即可，代碼如下：

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

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

2.那么接下來(lái)我們開(kāi)始設(shè)置滾動(dòng)條，我們?cè)诖a塊中加入 style 元素，在元素之后添加滾動(dòng)條的屬性 overflow: scroll 就可以實(shí)現(xiàn)一個(gè)滾動(dòng)條了，那么接下來(lái)我們來(lái)看看，代碼和截圖：

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

滾動(dòng)條

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

小結(jié)：

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


HTML CSS 編程基礎(chǔ)

0 人點(diǎn)贊