当前位置：网站首页>W3School导航栏练习

W3School导航栏练习

2022-07-27 12:48:00 【不好意思，此人不存在】

W3School导航栏练习

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <link rel="stylesheet" href="/layout/css/reset.css">
    <style> /* 设置nav的大小 */ .nav{
      width: 1210px; height: 48px; background-color: #E8E7E3; margin: 100px auto; } /* 设置nav中li */ .nav li{
      /* 设置li向左浮动，使菜单横向排列 */ float: left; /* 设置li的高度 */ /* height: 48px; */ /* 将文字在父元素中垂直居中 */ line-height: 48px; } /* 设置a的样式 */ .nav a{
      /* 将a转换为块元素 */ display: block; padding: 0 39px; /* 去除下划线 */ text-decoration: none; color: #777777; font-size: 18px; } .nav li:last-child a{
      padding: 0 46px 0 45px; } /* 设置鼠标移入效果 */ .nav a:hover{
      background-color: #3f3f3f; color: #E8E7E3; } </style>
</head>
<body>
    <!-- 创建导航条的结构 -->
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Brower 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>
效果图：

在这里插入图片描述

原网站

版权声明
本文为[不好意思，此人不存在]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_44278908/article/details/113921029

边栏推荐

猜你喜欢

随机推荐