24、导航菜单仿写

最新推荐文章于 2023-05-17 14:50:43 发布

五仁卤鸡翅

最新推荐文章于 2023-05-17 14:50:43 发布

阅读量223

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106931621

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
导航菜单仿写

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

导航菜单仿写

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
// 设置nav
.nav{
     width:1210px;
     height:48px;
     background-color:#fff;
     margin:100px auto;
}
/* 设置nav中的li 向左浮动*/
.nav li{
    float:left；
    // 设置li的高度
    height:48px;
    // 设置line-height和height高度一样，效果就是垂直居中
    line-height:48px;
}
/* 设置文字*/
.nav a{
    /*将a转换成块元素，控制上下padding*/
    display:block;
    text-decoration:none;
    color:#777777;
    font-size:18px;
    
    /*设置左右padding*/
    padding:0 39px;
}
.nav li:last-child a{
    padding:0 42px 0 41px;
}
/* 设置鼠标移入效果*/
.nav a:hover{
    background-color:#3F3F3F
}
           
</style>
<body>
/*
  创建导航条结构
*/
<ul class>
   <li>
     <a href="#">HTML/CSS</a>
   </li>
   <li>
     <a href="#">Browser Sider</a>
   </li>
   <li>
     <a href="#">Server Side</a>
   </li>
   <li>
     <a href="#">Programming</a>
   </li>
   <li>
     <a href="#">Web Buildding</a>
   </li>
   <li>
     <a href="#">Reference</a>
   </li>
</ul>

</body>
</html>