尚硅谷-导航条练习

最新推荐文章于 2024-05-09 21:50:39 发布

嘻嘻哈哈二郎神

最新推荐文章于 2024-05-09 21:50:39 发布

阅读量76

点赞数

分类专栏：实战练习 CSS 文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_70320000/article/details/125699117

版权

实战练习同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

11 篇文章 2 订阅

订阅专栏

我使用的结构是ul(li(a))

1.不会把元素内容水平居中，老师使用的是为超链接a设置左右padding

2.第一次自己做的时候，无法选择链接所在的整个框作为超链接。

看了老师的视频后，明白了原因：之前自己做的时候，把整个框的宽度设置在了<li>标签中，因此超链接仍只是<a>标签中的文字，当把<a>标签的宽度和高度设置后，此时<a>把<li>撑大了，框（框是a的）可整体作为超链接。但要注意，<a>标签是行内元素，无法设置宽、高（行内元素的宽、高只受其内容的影响），所以应把行内元素<a>标签变为块元素（display：block;）

下面代码是跟着老师写的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=UL, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .navi{
            height:48px;
            width:1210px;
            margin:0 0 0 12px;
            background-color: #E8E7E3;
        }
        .navi li{
            /* 设置li向左浮动，以使菜单横向排列 */
            float:left;
            
            /* 设置li的高度 */
            height:48px;
            /* 将文字在父元素中垂直居中 */
            line-height: 48px;
            
            font-size: 14px;
            /* background-color: rgb(232,231,227); */
            
        }
        /* 设置鼠标移入的效果 */
        .navi a:hover{
            background-color:rgb(63,63,63);
            color:white;
        }
        .navi a{
            /* 将a转换为块元素，设置高、宽 */
            display:block;
            /* 设置左右padding以使文字水平居中 */
            padding:0 53.4px;
            height:100%;
            /* 去掉超链接的下划线 */
            text-decoration: none;
            color:#777;
        }
        
    </style>
</head>
<body>
    <ul class="navi">
        <li>
            <a href="javascript:;">HTML/CSS</a>
        </li>
        <li>
            <a href="javascript:;">Browser Side</a>
        </li>
        <li>
            <a href="javascript:;">Server Side</a>
        </li>
        <li>
            <a href="javascript:;">Programming</a>
        </li>
        
        <li>
            <a href="javascript:;">XML</a>
        </li>
        <li>
            <a href="javascript:;">Web Building</a>
        </li>
        <li>
            <a href="javascript:;">Reference</a>
        </li>
    </ul>
</body>
</html>

自己尝试写的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=UL, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        /* 设置navi的大小 */
        .navi{
            width:1210px;
            height:48px;
            background-color:rgb(232,231,227);
        }
        .navi li{          
            /* 设置li向左浮动，以使菜单横向排列 */
            float:left;            
            /* height:48px; */
            /* 将文字在父元素垂直居中，设置line-height时，可以不用设置height */
            line-height:48px;
        }
        .navi a{
            /* 将a转换为块元素 */
            display: block;
            padding: 0 40px;
            font-size:18px;
            color: #777777;
            text-decoration: none;
        }
        .navi a:hover{
            color:rgb(225,224,220);
            background-color: rgb(64,64,64);
        }
    </style>
</head>
<body>
    <ul class="navi">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="javascript:;">Browser Side</a>
        </li>
        <li>
            <a href="javascript:;">Server Side</a>
        </li>
        <li>
            <a href="javascript:;">Programming</a>
        </li>
        
        <li>
            <a href="javascript:;">XML</a>
        </li>
        <li>
            <a href="javascript:;">Web Building</a>
        </li>
        <li>
            <a href="javascript:;">Reference</a>
        </li>
    </ul>
</body>
</html>