CSS之reponsive navigation bar

最新推荐文章于 2022-05-08 17:42:25 发布

晨识草

最新推荐文章于 2022-05-08 17:42:25 发布

阅读量588

点赞数

分类专栏： web 文章标签： css web

本文链接：https://blog.csdn.net/lichen_yun/article/details/75154380

版权

web 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

navigation bar可以直接利用html的ul实现，其中，如果要实现reponsive，即当屏幕的大小发生改变的时候，navigation部分会进行自适应的变换，则需要用到如@media screen and (max-width: 900px)的设置来对不同屏幕大小的nav显示进行设置
（1）index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <ul class="nav">
            <li><a href="#home" class="active">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#sports">Sports</a></li>
            <li><a href="#about">About</a></li>
        </ul>
        <div class="content">
            <h1>Welcome!</h1>
            <div class="news">
                <h2>News Article</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
                Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. 
                Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
            </div>
            <div class="sports">
                <h2>Sports Article</h2>
                <p>The National Basketball Association (NBA) is North America's premier professional men's basketball league, 
                composed of thirty teams. It is an active member[1] of USA Basketball (USAB), which is recognized by the
                International Basketball Federation as the National Governing Body (NGB) for basketball in the United States.</p>
            </div>
        </div>
    </body>
</html>

（2）style.css

/* 
* @Author: Lin
* @Date:   2017-07-15 12:30:55
* @Last Modified by:   Lin
* @Last Modified time: 2017-07-15 13:20:18
*/
body {
    margin:0; /*浏览器会默认给body设置margin值*/
}
ul.nav {
    list-style-type:none;
    background-color:#EEEEEE;
    width:23%;
    position:fixed;
    height:100%;
    overflow:auto;
    margin:0;
    padding:0;
}
li a {
    display: block;
    color:black;
    text-decoration:none;
    padding:8px 16px;
}
ul.nav li a.active {
    background-color:rgb(100, 64, 189);
    color:white;
}
ul.nav li a:hover:not(.active) {
    background-color:#BBBBBB;
    color:white;
}
div.content {
    margin-left:23%;
    padding:1px 16px;
    height:1000px;  /*因为1000超出屏幕大小，所以会出现滚动条*/
}

div.news, div.sports {
    background-color:rgb(250, 241, 215);
    margin:5px;
    padding:5px;
}
p {
    background-color:white;
    padding:15px;
    margin:5px;
}
p::first-letter {
    font-size:xx-large;
    color:red;
}
h1 {
    text-align:center;
    text-shadow:3px 3px coral;
}
/*对不同屏幕大小的显示进行设置*/
@media screen and (max-width: 900px) {
    ul.nav {
        width: 100%;
        height: auto;
        position: relative;
    }
    ul.nav li a {
        float: left;
        padding: 15px;
    }
    div.content {margin-left: 0;}
}

@media screen and (max-width: 450px) {
    ul.nav li a {
        text-align: center;
        float: none;
    }
}

（3）运行结果为：
这里写图片描述

晨识草

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS之reponsive navigation bar

responsive navigation barnavigation bar可以直接利用html的ul实现，其中，如果要实现reponsive，即当屏幕的大小发生改变的时候，navigation部分会进行自适应的变换，则需要用到如@media screen and (max-width: 900px)的设置来对不同屏幕大小的nav显示进行设置（1）index.html<!DOCTYPE htm
复制链接

扫一扫