CSS：导航菜单的制作

最新推荐文章于 2023-09-01 17:58:35 发布

波西塔塔Y

最新推荐文章于 2023-09-01 17:58:35 发布

阅读量535

点赞数

分类专栏：网页设计文章标签： css

本文链接：https://blog.csdn.net/u012881559/article/details/75120169

版权

网页设计专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这是我自己学习前端的一些记录
扣扣群：629902405
群里会分享一些学习资料，欢迎大家前来交流学习。

在制作过程中，出现了一些小问题，因为，我没有设置列的div的高度，所以它会跟着ul的大小变化，导致背景色会变化，而且我不能设置ul的外边距，也会导致背景色有变化，所以我设置了ul的内填充，我想这是因为div的内容填充的问题。
最后我给ul设置内填充padding解决这个问题。也许还有刚更好的解决，还请大家多多指教。
导航菜单的制作

css代码


            *{
                color:#000000;
                padding: 0;
                margin: 0;
                font-size: 16px;
            }
            #mainbody{
                width: 1024px;
                margin: 0 auto;
            }
            a{
                margin-left: 20px;
                display: block;
                text-decoration: none;
                color:black;
                /*background-image: url(../img/btnBg.png);*/
                /*background-repeat:no-repeat;*/
                width: 120px;
                height:30px;
                text-align: center;
                background-color:gainsboro;
                line-height: 30px;
            }
            a:hover{
                background-color: orangered;
                color: white;
                height:40px;
                margin-top:-10px;
                line-height: 40px;

            }
            ul{list-style: none;}
            .menurow{
                margin:10px;
                width:100%;
                height:200px;
                background-color: blanchedalmond;
            }
            .menurow li{
                float:left;  /*li设置浮动之后，脱离文档流，会使ul标签失去高度和宽度，所以需要对劜设置宽和高，才能对ul进行整体背景设置*/
                margin-top: 20px;
                }
            .menurow ul{
                height:50px;
                border-bottom: 5px solid orangered;
                padding-left: 30px;
                 }
            .menucol {
                margin: 10px;
                width:200px;
                background-color: blanchedalmond;

            }
            .meuncol_ul{
                width: 100%;
                padding:50px 0;
                border: opx solid black;
                }
            .menucol a{
                margin: 30px auto;
            }

html文档

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>垂直导航</title>
        <link rel="stylesheet" href="../css/caidan.css" />
    </head>
    <body>
        <div id="mainbody">
        <div class="menurow">
            <ul >
                <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>
        <div class="menucol">
            <ul class="meuncol_ul">
                <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>
                <li><a href="#">产品展示</a></li>
                <li><a href="#">售后服务</a></li>
                <li><a href="#">联系我们</a></li>               
            </ul>
        </div>
        </div>
    </body>
</html>