简单导航

最新推荐文章于 2023-01-14 09:01:45 发布

CodingAlarm

最新推荐文章于 2023-01-14 09:01:45 发布

阅读量938

点赞数 1

分类专栏： web前端文章标签：导航浮动

本文链接：https://blog.csdn.net/CodingAlarm/article/details/51923330

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*基础样式*/
        *{ margin: 0px; padding:0px;}
        body{font-family: "Microsoft YaHei" ;font-size:14px;}
        a{text-decoration:none; }
        /*样式*/
        .mynav{ padding:0px 20px;}
        .lx{ float: left; }
        .lx a{color: rgb(255,111,141);}
        .nav-list{ float: right; list-style: none; }
        .nav-list li{ float: left;}
        .nav-list li span,.nav-list li a{ color: #ddd; padding:0px 5px;}
        .nav-list li span+a{ margin-left:-10px;}
        .nav-list li i{ width:1px; height: 10px; background: #ddd; display: inline-block;}
        .lx,.nav-list li{height: 30px; line-height: 30px;}
    </style>
</head>
<body>

    <div class="mynav">
        <div class="lx">
            <a href="#">尚学堂联系方式 : 400-009-1906</a>
        </div>
        <ul class="nav-list">
            <li>
                <span>您好,请</span>
                <a href="#">登录</a>
                <i></i>
            </li>
            <li>
                <a href="#">免费注册</a>
                <i></i>
            </li>
            <li>
                <a href="#">学习在线</a>
                <i></i>
            </li>
            <li>
                <a href="#">关注</a>
                <i></i>
            </li>
        </ul>
    </div>
</body>
</html>

CodingAlarm

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单导航

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*基础样式*/ *{ margin: 0px; padding:0px;} body{font-family: "Microsoft YaHei" ;fo
复制链接

扫一扫