新浪导航栏源码分享

小波

1年前发布

280

文章目录[隐藏]

源码如下：
完整源码

源码如下：

HTML部分

<head>
    <title>新浪网导航站</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        @font-face {
            font-family: 'iconfont';
            src: url('iconfont.ttf?t=1681302160536') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: inline-block;
            /* border: 1px solid red; */
            color: #ff8500;
            margin-top: 1px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div>
            <div class="left">
                <a href="#">设为首页</a>
                <a href="#">设计新浪网</a>
                <a href="#">移动客户端<div class="ib right"><span class="iconfont">&#xeb04;</span></div></a>
            </div>
            <div class="right">
                <a href="#">登录</a>
                <a href="#">微博<div class="ib right"><span class="iconfont">&#xeb04;</span></div></a>
                <a href="#">博客<div class="ib right"><span class="iconfont">&#xeb04;</span></div></a>
                <a href="#">邮箱<div class="ib right"><span class="iconfont">&#xeb04;</span></div></a>
                <a href="#">网站导航</a>
            </div>
        </div>
    </div>
</body>

CSS部分

.nav {
    height: 40px;
    line-height: 40px;
    border-top: 3px solid #ff8500;
    border-bottom: 1px solid #edeef0;
}

.nav>div {
    width: 1000px;
    margin: 0 auto;
}

.nav a {
    color: #4c4c4c;
    text-decoration: none;
    display: inline-block;
    height: 40px;
    padding: 0 20px;
    font-size: 12px;
    /* border: 1px solid rgb(111, 0, 255); */
}

.nav a:hover {
    background-color: rgb(237, 238, 240);
    color: #ff8500;
}

ib {
    display: inline;
}
.left {
    float: left;
}
.right {
    float: right;
}

文字符号：

iconfont.ttf

下载

7z文件

813B

完整源码

新浪导航栏.zip

下载

zip文件

2.0K

1人已评分

赞赏