基于CSS+HTML菜鸟自己研究的居中导航栏透明双下拉框

最新推荐文章于 2021-06-07 11:20:04 发布

原创

最新推荐文章于 2021-06-07 11:20:04 发布 · 置顶 · 2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #导航栏 #透明下拉框 #居中

本文介绍了如何使用CSS和HTML创建居中导航栏，并实现了透明下拉框的效果。通过简单的代码示例，展示了如何进行布局和样式设置，以及下拉框的定位。欢迎提出修改建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，居中导航栏做出来的效果

效果：
: [link](https://mp.youkuaiyun.com).
.](https://i-blog.csdnimg.cn/blog_migrate/ed6a86264dc7d168f7f211ad422099d7.png)

2.透明下拉框

透明导航栏：
在这里插入图片描述
图中效果是我用最简单最笨的方式写出来的，也是作为平时的练习，建一个完整的网站，因为是自己拼凑的，所以两个并排下拉框是使用绝对定位来改变位置的,所以需要自己调节left,top的值，直接上代码段。

css样式

    <style>
    * {
   
    margin:0; padding:0;}
ul, li{
   
   
  list-style:none;
}
a {
   
    
    text-decoration:none;
}
.nav {
   
    
padding-left:15%;
list-style-type:none;

overflow:hidden;
width: 100%;
height:40px;
background-color:rgb(184, 0, 0);
padding-top: 1px ;
font-size: 17px;
    }
    /* 上面代码设置总体的长度高度，如果在网页中是会自适应的*/
.nav ul li {
   
    float:left;}
.nav ul li a {
   
   

  z-index:10;
     width:180px; 
     height:40px;
      text-align:center; 
      line-height:30px; 
      display:block;