摄影分享网站之导航栏

一. 图片展示

        

 

二.内容构成

        该导航栏由一个大div标签里面包裹三个小div，分别用来放置logo,和搜索框加按钮，最后一个放置导航链接 ，链接里实现下拉菜单。

1.logo

        logo部分比较简单，把图片放入设定好大小的div中，使用float属性向左浮动显示：

/* css部分
style{
        .nav .logo {
            float: left;
            margin-left: 230px;
            margin-right: 140px;
        }
        
        .nav .logo img {
            width: 100px;
            height: 98px;
        }
}

/* html部分
<div class="logo">
    <img src="../项目1：摄影分享网站/image/img/logo.png" alt="芜湖">
</div>

2.搜索框

        和logo部分相差不大，简单设置即可。

/*css部分---------------------------------------
    .nav .search {
            float: left;
            margin-top: 30px;
        }
        
        .nav .search input {
            width: 322px;
            height: 37px;
        }
        
        .nav .search button {
            width: 41px;
            height: 41px;
            margin-left: 5px;
        }
/*html部分--------------------------------------
<div class="search">
      <input type="text" value="请输入搜索内容">
      <button>搜索</button>
</div>

3.导航栏菜单+下拉列表菜单

        使用ul无序列表，每个li标签放置一个a链接(实际网页搜索中不会被降权)，同样也设置浮动，不然会竖列显示，同时记得清除标签产生的远点和下划线。

<div class="list">
     <ul>
          <li><a href="index.html">首页</a></li>
          <li class="droplist"><a href="view.html">风景片</a></li>
          <li class="droplist"><a href="foods.html">美食篇</a>
               <div class="dropdown-content">
                    <a href="#">川菜</a>
                    <a href="#">粤菜</a>
                    <a href="#">徽菜</a>
                    <a href="#">湘菜</a>
               </div>
         </li>
         <li class="droplist"><a href="person.html">人物篇</a></li>
                
         <li><a href="contact.html">联系我们</a></li>
   </ul>
</div>

在css代码中，1.设置下拉内容 (默认隐藏) 2.清除下拉列表产生的点和设置边距 3.鼠标移上去后修改下拉菜单链接背景颜色 4.在鼠标移上去后显示下拉菜单

/* 下拉内容 (默认隐藏) */
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #ffffff;
            min-width: 30px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }
        /* 下拉菜单的链接 */
        
        .dropdown-content a {
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        /* 鼠标移上去后修改下拉菜单链接背景颜色 */
        
        .dropdown-content a:hover {
            background-color: green
        }
        /* 在鼠标移上去后显示下拉菜单 */
        
        .droplist:hover .dropdown-content {
            display: block;
        }