網頁固定側欄的做法

業餘草發表於2015-07-09
網頁

固定側邊的做法有很多種，今天為大家介紹一種非常簡單的做法。整個html文件只有23行程式碼就搞定了。

網上也有很多做法，但是都太過複雜，一大堆程式碼。而且有的很採用一些jquery的一些外掛。

側欄的做法和頂部、頁尾都大致雷同。掌握其中的一種，其他的都很容易實現。常見的例子有：新浪微博的選單欄，新浪體育的右側二維碼掃描等功能都是這樣的實現。

這種固定特定部位，而不隨滾動條滾動的做法，見下面程式碼：

<!DOCTYPE html>
<html>
	<head>
		<title>測試</title>
		<style>
			#left{
				position:fixed;
				top:100px;
				right:0px;
			}
			.content{
				height:1700px;
				border:1px solid red;
			}
		</style>
	</head><!-- 歡迎大家關注我的部落格！如有疑問,請加QQ群：454796847共同學習！ -->
	<body>
		<div id="left">
			<img src="1.png"/>
		</div>
		<div class="content"></div>
	</body>
</html>
執行效果如下：歡迎大家關注我的部落格！如有疑問,請加QQ群：454796847共同學習！ 

相關文章