CSS滑動門技術

陽光下的冷靜發表於2018-11-25
CSS

滑動門技術：主要用來設計導航條，使它能夠根據導航條選單文字長度自動地調節寬度，這樣可以用簡單的背景小圖來實現炫彩的導航條風格，大大減少網頁的載入內容。

如使用如下的圖to.png：

做一個小的導航條，程式碼如下：

<style type="text/css">
			a {
				text-decoration: none;
				margin: 100px;
				height: 33px;
				display: inline-block;
				background: url(img/to.png)no-repeat;
				color: #fff;
				line-height: 33px;
				padding-left: 15px;
			}
			span{
				display: inline-block;
				height: 33px;
				background: url(img/to.png)no-repeat right;
				padding-right: 15px;
			}
		</style>
	</head>

	<body>
		<a href="#">
			<span id="">首頁</span>
		</a>
    </body>

導航條的寬度主要取決如樣式的padding-left和padding-right所設定的大小，如果想要寬度更大些就可以設定的更大些。

最後實現的效果如下圖：

注意：滑動門技術必須是a裡面包含span，給a標籤制定左邊的小圓角，給span制定右邊的小圓角

相關文章