css實作垂直導覽列和水平導覽列的程式碼-css教學-PHP中文網

css實作垂直導覽列和水平導覽列的程式碼

不言

發布： 2018-08-24 11:51:27

原創

3804 人瀏覽過

這篇文章帶給大家的內容是關於css實現垂直導覽列和水平導覽列的程式碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

#垂直導覽列的樣式

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			ul {
				list-style-type:none;
				margin:0;
				padding:0;
			}
			
			a:link, a:visited {
				display:block;
				font-weight:bold;
				color:#FFFFFF;
				background-color:#98bf21;
				width:120px;
				text-align:center;
				padding:4px;
				text-decoration:none;
				text-transform:uppercase;
			}
			
			a:hover, a:active {
				background-color:#7A991A;
			}
		</style>
	</head>
	<body>
		<ul>
		<li><a href="#home">主页</a></li>
		<li><a href="#news">新闻</a></li>
		<li><a href="#contact">联系</a></li>
		<li><a href="#about">关于</a></li>
		</ul>
	</body>
</html>

登入後複製

水平導覽列的樣式

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			ul {
				list-style-type:none;
				margin:0;
				padding:0;
				overflow:hidden;
			}
			
			li {
				float:left;
			}
			
			a:link, a:visited {
				display:block;
				font-weight:bold;
				color:#FFFFFF;
				background-color:#98bf21;
				width:120px;
				text-align:center;
				padding:4px;
				text-decoration:none;
				text-transform:uppercase;
			}
			
			a:hover, a:active {
				background-color:#7A991A;
			}
		</style>
	</head>
	<body>
		<ul>
		<li><a href="#home">主页</a></li>
		<li><a href="#news">新闻</a></li>
		<li><a href="#contact">联系</a></li>
		<li><a href="#about">关于</a></li>
		</ul>
	</body>
</html>

登入後複製

相關建議：

css實作類似圖片圖庫的圖片排序（完整程式碼）

css如何實作水紋擴散的動畫效果（純程式碼）

以上是css實作垂直導覽列和水平導覽列的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！