Html、CSS基礎 – 導覽列元件實作：

※ 成果範例：

※ 範例實作：

1.建立navbar_example專案：

2.建立navbar：index.html

	<!-- Start header -->
		<header class="header">
			<div class="navbar">
				<div class="container">
					<a href="#!" class="logo"></a>
					<ul class="nav">
						<li class="nav-item">
							<a href="#!" class="nav-link">HOME</a>
						</li>
						<li class="nav-item">
							<a href="#!" class="nav-link">PRODUCTS</a>
						</li>
						<li class="nav-item">
							<a href="#!" class="nav-link">FEATURES</a>
						</li>
						<li class="nav-item">
							<a href="#!" class="nav-link">CONTACK</a>
						</li>

					</ul>
				</div>
			</div>
		</header>
		<!-- End header -->

3.建立navbar樣式：style.css

/* 字體樣式 */
html,
body {
	font-family: "微軟正黑體";
}

/* 移除底線以提升美觀 */
a {
	text-decoration: none;
	/* 字體顏色調整 */
	color: #000;
}

/* ul預設樣式作歸零調整 */
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Layout */
/* 置中版型 */
.container {
	width: 960px;
	height: 100%;
	display: block;
	margin: 0 auto;
	border: 1px solid #000;
}

/* Component */
/* navbar */
.navbar {}

/* logo設定 */
.navbar .logo {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 1px solid #000;
	/* 放上照片 */
	background-image: url('../images/logo.svg');
	/* contain:全部顯示 ； cover:覆蓋*/
	background-size: contain;
	/* 只想顯示一張背景圖，不要重複背景圖片 */
	background-repeat: no-repeat;
}

/* 針對navbar裡面的nav樣式設定 */
.navbar .nav {
	border: 1px solid #000;
}

成果顯示：

※ 兩欄式排版實作：使用float

index.html：

<!-- Start header -->
		<header class="header">
			<div class="navbar">
				<!-- 用clearfix來做清除浮動的動作 -->
				<div class="container clearfix">
				</div>
			</div>
		</header>
		<!-- End header -->

style.css：

/* Utility 有功能性的元件*/
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}
/* logo設定 */
.navbar .logo {
	/* logo往左 */
	float: left;
}

/* 針對navbar裡面的nav樣式設定 */
.navbar .nav {
	border: 1px solid #000;
	float: right;
}

成果顯示：

※ 按鈕排版實作：

style.css：

/* 按鈕排版 */
.navbar .nav .nav-item {
	float: left;
	/* 用nav-item去推出按鈕間距 */
	margin-left: 32px;
}

.navbar .nav .nav-link {
	display: inline-block;
	color: #4a94ff;
	/* 按鈕高度總共是64 */
	line-height: 24px;
	padding: 20px 0;
	border: 1px solid #000;
}

/* 微互動設計 */
.navbar .nav .nav-link:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background-color: #4a94ff;
}

※ 游標移入效果實作：

style.css：

/* 微互動設計 */
.navbar .nav .nav-link:after {
	content: '';
	position: absolute;
	/* 左右畫線 */
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 0;
	width: 0;
	height: 4px;
	background-color: #4a94ff;
	/* 時間變化屬性 */
	transition: all 0.3s;
}

成果顯示：

※ 讓Logo垂直置放實作：

style.css：

/* logo設定 */
.navbar .logo {
	/* display: inline-block; */
	width: 40px;
	height: 40px;
	border: 1px solid #000;
	/* 放上照片 */
	background-image: url('../images/logo.svg');
	/* contain:全部顯示 ； cover:覆蓋*/
	background-size: contain;
	/* 只想顯示一張背景圖，不要重複背景圖片 */
	background-repeat: no-repeat;
	/* logo垂直置放 （64-40）/2=12 */
	margin-top: 12px;
	/* logo往左 */
	float: left;
}

成果顯示：

※ 修改navbar實作：

style.css：

.navbar {
	height: 64px;
	background-color: #fff;
	/* 陰影效果 */
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
	/* 如果是滿版 */
	padding: 0 16px;
}

成果顯示：

※ 最後成果：