风华岁月。�
2019-06-04 13:21
采纳率: 50%
浏览 1.1k
已采纳

HTML关于导航栏布局问题

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>碧桂园官网</title>
<style type="text/css">
    *{margin:0 auto;}
    header{                         /*整个导航栏的高度设定*/
        width:100%;
        height:90px;
        background: red;
    }
    header>img{                    /*logo的位置*/
        width:200px;
        height:90px;
        margin-left:100px;
    }   
    header>div>ul>li>a{                  /*导航栏超链接中字体去下划线、加粗、颜色、间隔*/
        text-decoration:none;
        color:#999;
        font-weight:bold;
        border-right:dotted thin;
        padding-right:10px;
        padding-left:10px;
        font-size:15px;
    }
    .header_nav{                  /*整个导航栏的位置*/
        width: 100%;
        display:inline;
        position:absolute;
        padding-top:40px;
        padding-left:300px;
    }
    .header_nav ul li{              /*ul去点和横向排列*/
        list-style:none;
        display:inline;
    }
    .header_nav>ul>li>ul{        /*二级菜单位置、隐藏*/
        position:absolute;
        padding-top: 40px;
        display: none;
    }
    .header_nav>ul>li>ul>li>a{     /*二级菜单样式*/
        font-weight: bold;
        color: black;
        text-decoration: none;
    }

    .header_nav>ul>li:hover>ul{     /*鼠标经过时显示二级菜单*/
        display: block;
    }

</style>

<header>
    <img src="logo.PNG" alt="logo"/>
    <div class="header_nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于碧桂园</a>
                <ul>
                    <li><a href="#">公司介绍</a></li>
                    <li><a href="#">企业文化</a></li>
                </ul>
            </li>
            <li><a href="#">产品与服务</a></li>
            <li><a href="#">新闻中心</a></li>
            <li><a href="#">投资者关系</a></li>
            <li><a href="#">人力资源</a></li>
            <li><a href="#">社会责任</a></li>
        </ul>
        </div>
</header>

</head>

<body>
</body>
</html>



图片说明
我模仿碧桂园官网的导航栏自己做了一个
但是在布局那里出现了一个问题,CSS样式中header nav这个样式(我注释是整个导航栏的位置)
我用了width:100%的话,浏览器窗口缩小时导航栏时不会变的,但是在全屏时他右边会有一段空白,像图①那样
但是我如果不用width:100%的话,浏览器窗口缩小后导航栏就会被挤在浏览器边缘右边那里了,像图②那样。

请问应该要怎么设置才能让浏览器全屏的时候右边不会有空白,缩小后导航栏不会被挤在一堆。

还有我想做一个鼠标经过一级导航栏时会显示二级导航栏的功能,大佬们可以上百度搜以下碧桂园的官网看那个效果,我做了出来了,但是那个黑色透明背景我不会做,能指点以下吗?

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 葉幺 2019-06-12 12:03
    已采纳

    可以在父宽中写上样式如最大宽度并且居中如{max-width:1000px;margin:0 auto;}

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • weixin_39111216 2019-06-04 17:19

    float:left 然后ul li 就可以了

    评论
    解决 无用
    打赏 举报
  • 北巷小哥驾到 2019-06-06 17:32

    引入插件 不要自己写了

    评论
    解决 无用
    打赏 举报
  • qq_21644253 2019-07-07 01:59

    在header下一层再套一层div将其高度和header一样,宽度设置为比你的img+与img同级的div的宽度和大就行

    图片说明
    看看这个例子,先试试这看缩小窗口自会变吗,去掉一层div再试试,这是行内元素的原因

    评论
    解决 无用
    打赏 举报
  • 前端呆头鹅 2020-06-09 09:22
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题