day05-导航条及下拉框练习

最新推荐文章于 2024-08-17 12:45:11 发布

蔡大爷的小甜心

最新推荐文章于 2024-08-17 12:45:11 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/qq_43361287/article/details/109404948

版权

HTML5 和 CSS3 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在引用reset.css去除浏览器默认样式的基础上，利用HTML5和CSS3设计导航条和下拉框。文章提到了使用图标字体库中的向下箭头，并提供了在iconfont阿里巴巴矢量图标库下载资源的指导。

摘要由CSDN通过智能技术生成

导航条

本文是在引用了reset.css文件去除浏览器默认样式的情况下进行的渲染，可参考day02-layout盒模型中浏览器的默认样式模块下的reset.css链接自行下载使用
本文引用的向下箭头、定位表为图标字体，可自行在iconfont阿里巴巴矢量图标库自行下载，可参考day03-布置练习中导航条模块下的使用示例进行使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="../05daohangtiao/iconfont.css">
    <style>
        body {
            background-color: seagreen;
            font-size: 12px;
        }

        .zong {
            width: 1060px;
            height: 31px;
            background-color: rgb(227, 228, 229);
        }

        .zong .daohangtiao {
            width: 990px;
            height: 30px;
            overflow: hidden;
            margin: 10px auto;
            line-height: 30px;
            border-bottom: 1px solid rgb(221, 221, 221);
        }

        .zong .daohangtiao .denglu {
            float: left;
            padding: 0 7px;
        }

        .zong .daohangtiao .denglu .shanxi {
            padding: 0 7px;
            float: right;
        }

        .zong .daohangtiao .denglu span {
            color: rgb(241, 2, 21);

        }

        .zong .daohangtiao .denglu a,
        .zong .daohangtiao .denglu .inconfont {
            float: left;
            color: #999999;
            text-decoration: none;
        }

        .zong .daohangtiao .neirongqu {
            float: right;
        }

        .zong .daohangtiao .neirongqu .bufen {
            padding: 0 7px;
        }

        .zong .daohangtiao .neirongqu .bufen .inconfont {
            font: 12px;
            line-height: 30px;
        }

        .zong .daohangtiao .neirongqu li {
            float: left;
            color: #999999;
        }

        .zong .daohangtiao .neirongqu li a {
            text-decoration: none;
            color: #999999;
        }

        .zong .daohangtiao .neirongqu .dianhong a:hover,
        .zong .daohangtiao .neirongqu .zhihong a {
            color: rgb(241, 2, 21);
        }

        .zong .daohangtiao .neirongqu .shenglue {
            white-space: nowrap;
            width: 2em;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="zong">
        <div class="daohangtiao">
            <div class="denglu">
                <a href="javascript:;">
                    <span class="iconfont">&#xe8c4;</span>
                    <div class="shanxi">陕西</div>
                </a>
            </div>
            <ul class="neirongqu">
                <li class="bufen dianhong"><a href="javascript:;">你好，请登录</a></li>
                <li class="bufen zhihong shenglue"><a href="javascript:;">免费注册</a></li>
                <li class="shugang">|</li>
                <li class="bufen dianhong"><a href="javascript:;">我的订单</a></li>
                <li class="shugang">|</li>
                <li class="bufen dianhong">
                    <a href="javascript:;">我的京东</a>
                    <span class="iconfont">&#xe612;</span>
                </li>
                <li class="shugang">|</li>
                <li class="bufen dianhong"><a href="javascript:;">京东会员</a></li>
                <li class="shugang">|</li>
                <li class="bufen zhihong">
                    <a href="javascript:;">企业采购</a>
                    <span class="iconfont">&#xe612;</span>
                </li>
                <li class="shugang">|</li>
                <li class="bufen">
                    <a href="javascript:;">客户服务</a>
                    <span class="iconfont">&#xe612;</span>
                </li>
                <li class="shugang">|</li>
                <li class="bufen">
                    <a href="javascript:;">导航网站</a>
                    <span class="iconfont">&#xe612;</span>
                </li>
                <li class="shugang">|</li>
                <li class="bufen"><a href="javascript:;">手机京东</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

下拉框

下拉框

本文是在引用了reset.css文件去除浏览器默认样式的情况下进行的渲染，可参考day02-layout盒模型中浏览器的默认样式模块下的reset.css链接自行下载使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="../05daohangtiao/iconfont.css">
    <style>
        body {
            background-color: seagreen;
            font-size: 12px;
        }

        .zong {
            width: 1060px;
            height: 31px;
            background-color: rgb(227, 228, 229);
            border-bottom: 1px solid rgb(221, 221, 221);
        }

        .zong .daohangtiao {
            width: 990px;
            height: 30px;
            /* overflow: hidden; */
            margin: 0px auto;
            line-height: 30px;

            position: relative;
            z-index: 1;
        }

        .zong .daohangtiao .denglu {
            float: left;
            padding: 0 7px;
        }
        .zong .daohangtiao .denglu .zuoshang {
            width: 57.95px;
            height: 29.99px;
            
            
        }

        .zong .daohangtiao .denglu .zuoshang .shanxi {
            padding: 0 7px;
            float: right;
        }

        .zong .daohangtiao .denglu .zuoshang span {
            color: rgb(241, 2, 21);
        }

        .zong .daohangtiao .denglu .xialakuang {
            display: none;
            width: 310px;
            height: 440px;
            border: 1px solid rgb(221, 221, 221);
            background-color: rgb(255, 255, 255);
            position: absolute;
            top: 31px;
        }

        .zong .daohangtiao .denglu a,
        .zong .daohangtiao .denglu .inconfont {
            /* float: left; */
            color: #999999;
            text-decoration: none;
        }
        /* hover绑定给denglu，在鼠标移入下拉框时也处于选中状态 */
        .zong .daohangtiao .denglu:hover .zuoshang{
            border: 1px solid rgb(221, 221, 221);
            border-bottom: 2px solid rgb(255, 255, 255);
            background-color:rgb(255, 255, 255);
            position: absolute;
            z-index: 9999;
        }

        .zong .daohangtiao .denglu:hover .xialakuang {
            display: block;

        }

        .zong .daohangtiao .neirongqu {
            float: right;
            position: relative;
        }

        .zong .daohangtiao .neirongqu .bufen {
            padding: 0 7px;
        }


        .zong .daohangtiao .neirongqu .bufen .inconfont {
            font: 12px;
            line-height: 30px;
        }

        .zong .daohangtiao .neirongqu li {
            float: left;
            color: #999999;
        }

        .zong .daohangtiao .neirongqu li a {
            text-decoration: none;
            color: #999999;
        }

        .zong .daohangtiao .neirongqu .dianhong a:hover,
        .zong .daohangtiao .neirongqu .zhihong a ,
        .zong .daohangtiao .denglu a:hover{
            color: rgb(241, 2, 21);
        }

        .zong .daohangtiao .neirongqu .shenglue {
            white-space: nowrap;
            width: 2em;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="zong">
        <div class="daohangtiao">
            <div class="denglu">
                <div class="zuoshang">
                    <a href="javascript:;">
                        <span class="iconfont">&#xe8c4;</span>
                        <div class="shanxi">陕西</div>
                    </a>
                </div>
                <div class="xialakuang"></div>
            </div>
            <ul class="neirongqu">
                <li class="bufen dianhong"><a href="javascript:;">你好，请登录</a></li>
                <li class="bufen zhihong shenglue"><a href="javascript:;">免费注册</a></li>
                <li class="shugang">|</li>
                <li class="bufen dianhong"><a href="javascript:;">我的订单</a></li>
                <li class="shugang">|</li>
                <li class="bufen dianhong">
                    <a href="javascript:;">我的京东</a>
                    <span class="iconfont">&#xe612;</span>
                </li>
                <li class="shugang">|</li>
                <li class="bufen dianhong"><a href="javascript:;">京东会员</a></li>
                <li class="shugang">|</li>
                <li class="bufen zhihong">
                    <a href="javascript:;">企业采购</a>
                    <span class="iconfont">&#xe612;</span>

                </li>
                <li class="shugang">|</li>
                <li class="bufen">
                    <a href="javascript:;">客户服务</a>
                    <span class="iconfont">&#xe612;</span>
                </li>
                <li class="shugang">|</li>
                <li class="bufen">
                    <a href="javascript:;">导航网站</a>
                    <span class="iconfont">&#xe612;</span>
                </li>
                <li class="shugang">|</li>
                <li class="bufen"><a href="javascript:;">手机京东</a></li>
            </ul>
        </div>
    </div>
</body>

</html>