1. 程式人生 > >帶搜尋框的導航欄

帶搜尋框的導航欄

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自學教程(如約智惠.com)</title> 
		<style >
			*{
				box-sizing:border-box;
			}
			
			body {
				margin:0px;
				font-family:Arial, Helvetica, sans-serif;
			}
			
			.topnav {
				overflow:hidden;
				background-color:#e9e9e9;
			}
		
			.topnav a {
				float:left;
				display:block;
				color: black;
				text-align:center;
				padding: 14px 16px;
				text-decoration: none;
				text-align: left;
			}
						
			.topnav a:hover {
				background-color:#ddd;
				color:black;
			}
			
			.topnav a.active {
				background-color:#2196F3;
				color:white;
			}
			
			.topnav input[type=text] {
				float:right;
				padding:6px;
				margin-top:8px;
				margin-right:16px;
				border:none;
				font-size:17px;
			}
			
			@media screen and (max-width:600px) {
				.topnav a, .topnav input[type=text] {
					float:none;
					display:block;
					text-align:left;
					width:100%;
					margin:0;
					padding:14px;
				}
				
				.topnav input[type=text] {
					border:1px solid #ccc;
				}
			}
		</style>
	</head>
	<body >
		<div class="topnav">
		  <a class="active" href="#home">主頁</a>
		  <a href="#about">關於</a>
		  <a href="#contact">聯絡我們</a>
		  <input type="text" placeholder="搜尋..">
		</div>

		<div style="padding-left:16px">
		  <h2>響應式搜尋選單</h2>
		  <p>導航欄裡面有一個搜尋框。</p>
		  <p>調整瀏覽器視窗的大小, 檢視效果。</p>
		</div>

		
	</body>
</html>