ul li的导航条式样

最新推荐文章于 2025-07-02 18:01:25 发布

easyboot

最新推荐文章于 2025-07-02 18:01:25 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

分类专栏： # CSS 文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/easyboot/article/details/126636525

CSS 专栏收录该内容

3 篇文章

订阅专栏

css式样

/*ul li 的导航条式样*/
#nav {
    height: 30px;
    width: 100%;
    background-color: #40B4F7; /** #c00;*/
}

    #nav ul {
        margin: 0 0 0 30px;
        padding: 0px;
        font-size: 16px;
        color: #fb435f;
        line-height: 30px;
        whitewhite-space: nowrap;
    }

    #nav li {
        list-style-type: none;
        display: inline;
    }

        #nav li a {
            text-decoration: none;
            font-family: Arial, Helvetica, sans-serif;
            padding: 7px 10px;
            color: #000;
        }

            #nav li a:hover {
                color: #ff0;
                background-color: #259BE0;
            }

在div中设置id="nav"即可

	<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between " id="nav">
					<ul class="navbar-nav flex-grow-1">
						<li class="nav-item">
							<a class="nav-link text-white" asp-area="" asp-controller="Home" asp-action="Sorting">分拣</a>
						</li>
						<li class="nav-item">
							<a class="nav-link text-white" asp-area="" asp-controller="Home" asp-action="PrintLabel">标签打印</a>
						</li> 
		 
 
						<li class="nav-item">
							<a class="nav-link text-white" asp-area="" asp-controller="Home" asp-action="SignalR">SignalR</a>
						</li>
						<li class="nav-item">
							<a class="nav-link text-white" asp-area="" asp-controller="Home" asp-action="Appsettings">Appsettings</a>
						</li>
						<li class="nav-item">
							<a class="nav-link text-white" asp-area="" asp-controller="Home" asp-action="Data">Data</a>
						</li>
						<li class="nav-item">
							<a class="nav-link text-white" asp-area="" asp-controller="Login" asp-action="Login">Login</a>
						</li>
	 
					</ul>
				</div>