浮动联系——导航条练习

最新推荐文章于 2024-08-09 17:44:17 发布

_洋

最新推荐文章于 2024-08-09 17:44:17 发布

阅读量300

点赞数

分类专栏： HTML+CSS 文章标签： css3

本文链接：https://blog.csdn.net/mantou_riji/article/details/124108388

版权

HTML+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

通过浮动使元素横向。
效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="../reset.css" />
    <style>
        .nav{
            /* width: 1246px; */
            width: 1250px;
            height: 50px;
            background-color: rgb(231,231,226);
            margin: 50px auto;
        }
        .nav li{
            height:50px;
            float: left;
            /* 设置height=line-height可以使元素垂直居中 */
            line-height: 48px;
        }
        .nav a{
            display: block;
            color: slategray;
            text-decoration: none;
            font-size: 18px;
            padding: 0 42px;
        }
        .nav li:last-child a{
            /* 这样写或者将nav的宽度修改为 width: 1246px; */
             padding: 0 44px 0 44px;
         }
         .nav a:hover{
             background-color: #3f3f3f;
             color: white;
         }
        
    </style>
  </head>
  <body>
    <ul class="nav">
      <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>

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动联系——导航条练习

通过浮动使元素横向。效果图：代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="../reset.css" /> <style> .nav{ /* width: 1246px; */ width:
复制链接

扫一扫

专栏目录