兰大课题组项目经验教训与总结

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊日老子终于明面上完成了这个项目，虽然很可能后期还会时不时蹦出来一直改一直改，不过还好，好歹一年100维修费，虽然现在还没有给我。。感恩学长，直接拿自己的钱直接结算了项目。啊，感恩的心，感谢~。

网站：shugroup.lzu.edu.cn 能不能打开随缘，因为域名解析的原因，那个学长实在是不想动了。。。那就这样吧~

项目开始于4月15日啊啊啊啊啊啊啊啊啊啊啊当初学姐说做一个静态网站就行，挺简单的，国内的静态网站也都挺丑的，估计一两个星期就能做出来，结果我耗了一个多月，在几天就要2个月了。。。

碰到了蛮多情况，一个感受就是 甲方是爸爸？ 提出来的建议都要接受，除非真的不能改了，另外一个就是别随便自己加想法，你觉得这样好看（我弄了个七彩导航栏，自己特别开心，直接被毙掉了）（还有就比如我调了又调，把research页面的引用部分调到一个位置，被直接说那部分不齐）

总结。。这会是个大工程。。。

1.导航栏 有二级菜单：ul-li-ul-li:li里再套ul

<div class="banner2" >
       <ul id="navigation">
         <li><a  href="#">Home</a></li>
         <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)" ><a  href="People.html">People</a>
             <ul >
               <li><a  href="People.html">Prof. Shu</a></li>
               <li><a  href="People_Members.html">Group Members</a></li>
               <li><a  href="people--alumi.html">Alumi</a></li>
             </ul>
         </li>
         <li><a  href="Research.html">Research</a></li>
         <li ><a  href="Publication.html">Publiaction</a></li>
         <li><a  href="News.html">News</a></li>
         <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)" id="ht3"><a  href="Resource_photo.html">Resource</a>
             <ul >
                <li><a href="Resource_photo.html">photo</a></li>
                <li style="140px;"><a href="Resource_links.html">links</a></li>
             </ul>
        </li>
         <li><a  href="Contact_Us.html">Contact Us</a></li>
                     
      </ul>
</div>       

js部分：

<script>
    //显示二级子菜单
    function showSubMenu(li){
    var subMenu = li.getElementsByTagName("ul")[0];
    subMenu.style.display = "block";
      //对一级二级菜单颜色的设置
    li.style.backgroundColor="#ccc"; 
    subMenu.style.backgroundColor="#ccc"; 
   
}

//隐藏二级子菜单
function hideSubMenu(li){
    var subMenu = li.getElementsByTagName("ul")[0];
    subMenu.style.display = "none";
    li.style.backgroundColor="white"; //因为white是整体背景的颜色
  
}
</script>

css样式

#navigation{/*h5响应式 弹性盒子 让右部分的导航栏不掉下来的步骤*/
    display:flex;
    justify-content:space-between;
 //这里是因为要和logo图片沟通在一条线上-知识点：弹性盒子
  
}

#navigation,#navigation li ul{
    list-style-type: none;//ul-li-ul一开始是隐藏的
    color: #000000;
}
#navigation li{
    float: left;
    text-align: left;
    position: relative;///!!!!!
    padding-right:10px;
}

#navigation li a:link,#navigation li a:visited{//一级菜单样式的设置
    padding-left:5px;
    display: block;
    text-decoration: none;
    color:#000;
 // ！！！  
    height: 50px;
    line-height: 50px;

}
#navigation li ul li a:link,#navigation li ul li a:visited{//二级菜单的设置
    padding-left:5px;
    font: bold 15px Gerogia;
    display: block;
    white-space:nowrap;/*强制不换行*///有的时候emmm词太大啦啥的
    height:30px;
    line-height:30px;
}

#navigation li a:hover{
    
     color:#0000CD ;
     border-radius:30px;
}
#navigation li ul li a:hover{
   
    color:#0000CD ;
   
}


#navigation li a{
    font: bold 21px Gerogia;

}
#navigation li ul li{
    float: none;
}
#navigation li ul{
    display: none;
    position: absolute;       /*二级ul使用绝对定位，宽度大于一级菜单时，才不会撑大一级*/

}