鍍金池/ 問答/HTML5  HTML/ 如何設(shè)計(jì)一個(gè)頁面的底部導(dǎo)航？

如何設(shè)計(jì)一個(gè)頁面的底部導(dǎo)航？

最近遇到一個(gè)需求，做一個(gè)有底部導(dǎo)航的頁面，頁面上的內(nèi)容要求一屏展示（盡量不要有滾動(dòng)），同時(shí)還要兼容1366768 、1440900、1920*1080這些屏幕，能不能用代碼來實(shí)現(xiàn)呢？
首先底部的導(dǎo)航欄只要將頂部的導(dǎo)航欄用定位定在頁面的底部就可以了。（導(dǎo)航欄可以再菜鳥聯(lián)盟中查到*各種的都有）

然后，兼容1366768 、1440900、1920*1080這些屏幕的話一般就是寫媒體查詢用三個(gè)節(jié)點(diǎn)就可以了
媒體查詢的具體代碼為：

        @media screen and (min-width: 1000px) and (max-width:1367px){/*兼容1366*768*/
            .body{
                background: #000;
            }/*這里是樣式*/
        }
        @media screen and (min-width: 1367px) and (max-width:1441px){/*兼容1440*900*/
            .body{
                background: #000;
            }/*這里是樣式*/
        }
        @media screen and (min-width: 1441px) and (max-width:1920px){/*兼容1920*1080*/
            .body{
                background: #000;
            }/*這里是樣式*/
        }
回答
編輯回答
女流氓

【CSS】固定在底部的頁腳

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
        }
        main {
            flex: 1;
        }
        header { text-align: center; height: 3em; }
        main, footer {
            display: block;
            padding: .5em calc(50% - 400px);
        }
        footer {
            background: linear-gradient(#222, #444);
            color: white;
        }
2017年3月17日 00:07
編輯回答
愿如初

position:fixed

2017年12月10日 19:29
編輯回答
怣痛

這個(gè)就是一個(gè)div固定在底部的問題

這個(gè)關(guān)鍵的css知識點(diǎn)在于position:fixed

https://blog.csdn.net/lanmanc...
https://www.cnblogs.com/Rinpe...

2017年5月4日 02:46
編輯回答
命于你
    首先底部的導(dǎo)航欄將頂部的用相對定位position:fixed;定位在頁面的底部就可以了。導(dǎo)航欄可以到菜鳥聯(lián)盟查到*各種的都有
    其次是要兼容1366768 、1440900、1920*1080這些屏幕一般使用媒體查詢
    具體代碼如下：
    @media screen and (min-width: 1000px) and (max-width:1367px){/*兼容1366*768*/
        .body{
            background: #000;
        }/*這里是樣式*/
    }
    @media screen and (min-width: 1367px) and (max-width:1441px){/*兼容1440*900*/
        .body{
            background: #000;
        }/*這里是樣式*/
    }
    @media screen and (min-width: 1441px) and (max-width:1920px){/*兼容1920*1080*/
        .body{
            background: #000;
        }/*這里是樣式*/
    }
2018年4月29日 21:14