菜单栏 | 易学教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单栏</title>
    <!-- CSS样式 -->
    <style type="text/css">
        .menu {
            width: 694px;
            height: 50px;
            /*设置元素水平居中*/
            margin: 50px auto 0;
            /*去除内联元素间隙*/
            font-size: 0;
            /*去掉ul自带的.格式*/
            list-style: none;
            padding: 0;
        }
        /* 利用后代选择器，选取ul中的li元素 */
        .menu li {
            /*将元素转换为行内块元素*/
            display: inline-block;
            width: 98px;
            height: 48px;
            /* 设置边框：宽度 边框线类型 颜色 */
            border: 1px solid red;
            /* 设置字体大小 */
            font-size: 16px;
            /*将边框合并*/
            margin-right: -1px;
            /* 文本居中 */
            text-align: center;
            /* 设置行高 */
            line-height: 48px;
        }
        .menu a {
            font-family: "Microsoft YaHei UI";
            color: pink;
            /*去掉a元素的下划线*/
            text-decoration: none;
        }
        /*鼠标位于元素位置时改变元素样式*/
        .menu li:hover {
            background-color: orange;
        }
        /* 鼠标移动(:hover)到文字时的样式 */
        .menu a:hover {
            color: #fff;
        }
    </style>
</head>
<body>
    <!-- 利用无序列表做菜单栏 -->
    <ul class="menu">
        <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>
</body>
</html>
来源：CSDN
作者：I Believe in
链接：https://blog.csdn.net/lsy01/article/details/104316656
标签
菜单栏