@charset "UTF-8";
/****************** 公共通用樣式 begin******************/
body{
color:#000;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a:hover{
text-decoration:none;
}
ul,ol{
list-style:none;
}
/**設置字體**/
@font-face{
font-family:lk;
src:url('../fonts/lk.eot') format('embedded-opentype'),
url('../fonts/lk.svg') format('svg'),
url('../fonts/lk.ttf') format('truetype'),
url('../fonts/lk.woff') format('woff');
}
[class="icon-"],[class*=" icon-"]{
font-family:lk;
font-style:normal;
}
/****************** 公共通用樣式樣式end******************/
/****************** 頁頭 樣式 begin******************/
#kq_header .navbar-kq{
/* border-bottom:1px solid #e0e0e0; */
}
/**設置logo**/
#kq_header .navbar-kq .navbar-brand{
width:200px;
height:90px;
}
/**設置菜單樣式 寫法（navbar-nav>li>a） **/
#kq_header .navbar-kq .navbar-nav>li>a{
height:90px;
/* background-color: orange; */
/**居中顯示**/
display: flex;
justify-content:center;
align-items:center;
margin-right: 10px;
}
#kq_header .navbar-kq .navbar-nav>li>a:hover{
color:#007bff;
border-bottom:2px solid #007bff;
}
/**設置 小圖高度**/
#kq_header .navbar-kq .navbar-toggler{
}
/****************** 頁頭 樣式end******************/
/****************** 表單 樣式 begin******************/
#kq_header{
background-color: orange;
}
/****************** 表單 樣式end******************/
/****************** 表單 樣式 begin******************/
#kq_list{
/* background-color: green; */
}
/****************** 表單 樣式end******************/
/****************** 頁底 樣式 begin******************/
#kq_footer{
width:100%;
height: 80px;
}
#kq_footer .container .row{
height: 80px;
line-height: 80px;
}
/****************** 頁底 樣式end******************/
HTML
<section id="kq_header" class="bg-light">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-kq">
<a class="navbar-brand d-flex justify-content-center align-items-center" href="#"><strong>
<h2>
<!-- image url -->
補打卡申請單
</h2>
</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#kq_nav" aria-controls="kq_nav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="kq_nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">補打卡申請單 <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">加班申請單</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"> 崗位異動單 </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">崗位異動單</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">崗位異動單</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">崗位異動單</a></div></li>
<li class="nav-item"><a class="nav-link " href="#">請假申請單</a></li>
</ul>
</div>
</nav>
</div>
</section>