w3c导航栏

最新推荐文章于 2022-07-29 17:02:56 发布

路飞小朋友

最新推荐文章于 2022-07-29 17:02:56 发布

阅读量182

点赞数

分类专栏：布局练习

本文链接：https://blog.csdn.net/wozhangyi/article/details/106828154

版权

布局练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

代码示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>

    <link rel="stylesheet" href="./reset.css">
    <style type="text/css">
        ul{
            width: 1210px;
            height: 48px;
            margin: 100px auto;
            background-color: #DDDDDD;
        }

        ul li{
            float: left;
        }
        ul a{
            display: block;
            text-decoration: none;
            color: #585858;
            padding: 0 39px;
            font-size: 18px;
            line-height: 48px;
        }
        a:hover{
            color: white;
            background-color: #1883ba;
        }
    </style>
</head>


<body>

<ul>
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">Browser Side</a></li>
    <li><a href="#">Server Side</a></li>
    <li><a href="#">Programming</a></li>
    <li><a href="#">XML</a></li>
    <li><a href="#">Web Building</a></li>
    <li><a href="#">Reference</a></li>
</ul>

</body>

</html>

遇到的问题
我使用了font: 18px '微软雅黑' 属性连写，结果文字始终无法垂直居中，花了好几个小时才明白
属性连写 font: 18px '微软雅黑' 没有加行高，系统默认给了个行高，覆盖了原本的行高，导致始终无法垂直居中

路飞小朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
w3c导航栏

代码示例<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="D
复制链接

扫一扫