CSS
Allen 2022-04-01 22:21:56 5721 0 0 0 0
CSS,HTML,CSS用标签ul,li制作导航栏示例源码

CSS用标签<ul><li>制作导航栏示例源码

如下

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>标题</title>

    <style>
        <div style="heigth:400px">sssss</div> ul {
            list-style: none;
            display: inline-block;
            padding-left: 0;
        }
        li {
            display: inline-block;
            width: 140px;
            heigth: 51px;
            text-align: center;
            line-height: 51px;
        }
        div.logo {
            width: 160px;
            height: 51px;
            background: url(logo.png);
            display: inline-block;
            margin-right: 10%;
        }
        div.logo,
        ul {
            vertical-align: middle;
        }
        li:hover {
            color: white;
            background-color: #11278a;
            cursor: pointer;
            font-weight: bold;
        }
        body,
        ul {
            margin: 0;
        }
        li:nth-child(1) {
            background-color: #11278a;
            color: white;
            font-weight: bold;
        }
        header {
            height: 55px;
            padding-bottom: 2px;
            border-bottom: 1px solid #e3e3e3;
        }
        nav {
            display: inline-block;
        }
    </style>

</head>

<body>
    <header>
        <div></div>
        <nav>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>Jquery</li>
                <li>vueJs</li>
                <li>AngularJs</li>
                <li>More...</li>
            </ul>
        </nav>
    </header>
</body>

</html>

来源忘了是哪了!


Tag: CSS HTML
我也要发一个   ·   返回首页   ·   返回[CSS]   ·   前一个   ·   下一个
欢迎评论
未登录,
请先 [ 注册 ] or [ 登录 ]
(一分钟即可完成注册!)
返回首页     ·   返回[CSS]   ·   返回顶部