Allen 2022-04-01 22:21:56 5579 0 0 0 0

網站名稱：CSS用标签ul，li制作导航栏示例源码

網站地址：

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

[SEO信息] [Alexa信息]

-->>直達網站

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>

来源忘了是哪了！

【版權聲明】
本文爲轉帖，原文鏈接如下，如有侵權，請聯繫我們，我們會及時刪除
原文鏈接：unknown

Tag: