新浪导航栏案例,常见也很简单的前端小案例。
显示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪导航栏练习</title>
<style>
.nav {
height: 50px;
border-top: 3px solid #ff8500; /* 盒子上边框 */
border-bottom: 1px solid #edeef0; /* 盒子下边框 */
}
.nav a {
height: 50px;
display: inline-block; /* 行内元素转行内块元素 */
line-height: 50px; /* 行高等于盒子高,文字垂直居中 */
text-decoration: none; /* 下划线取消 */
padding-left: 18px; /* 左内边距 */
padding-right: 18px; /* 右内边距 */