uikit布局头部菜单正文和尾部自适应网页效果代码-html代码-BFW代码库

uikit布局头部菜单正文和尾部自适应网页效果代码

代码语言：html

代码描述：uikit布局头部菜单正文和尾部自适应网页效果代码

代码标签： uikit 布局

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- UIkit CSS -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/uikit.min.css">

    <!-- UIkit JS -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uikit.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uikit-icons.min.js"></script>

    <style>
        html, body {
            height:100%;
        }
        
        #page-wrapper {
            min-height: calc(100% - 20px);
            margin-bottom: -60px;
        }
        #page-wrapper:after {
            content: "";
            display: block;
        }
        #page-footer, #page-wrapper:after {
            height: 60px;
        }
        #page-footer {
            background-color: #f5f5f5;
        }
    </style>




</head>

<body>
    <div id="page-wrapper">
        <div class="uk-navbar-container" uk-sticky>
            <div class="uk-container uk-container-expand">
                <div class="uk-navbar">

                    <div class="uk-navbar-left">
                        <div class="uk-navbar-item">
                            SITE TITLE
                        </div>
                    </div>

                    <div class="uk-navbar-right">
                        <ul class="uk-navbar-nav">
                            <li class="uk-active"><a href="">MENU1</a></li>
                            <li class="uk-parent"><a href="">MENU2</a></li>
                            <li><a href="">MENU3</a></li>
                        </ul>
                        <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#offcanvas" uk-toggle></a>
                    </div>

                </div>
            </div>
        </div>

        <div class="uk-container uk-container-expand uk-visible@m">
            <ul class="uk-breadcrumb">
                <li><a href="">Home</a></li>
                <l.........完整代码请登录后点击上方下载按钮下载查看