株洲小巨蛋项目开发总结
技术总结
导航栏二级下拉框
/*CSS部分*/
/*设定导航栏上按钮样式*/ #header .nav > li{ width:148px; height:70px; float:left; line-height:70px; text-align: center; background:url(../img/li_bg.png) no-repeat right 0; list-style: none; transition:all .5s ease-in; overflow: hidden; } /*鼠标悬停，弹出二级菜单*/ #header .nav >li:hover{ height:390px; } /*鼠标悬停时a标签的效果*/ #header .nav > li> a:hover{ background:url(../img/header_hover_bg.png); } #header .nav > li > a{ display:block; width:147px; height:70px; color:#535353; } /*下拉列表*/ #header .nav li>ul li{ height:44px; width:148px; line-height:44px; background-color:#dfdfdf; border-bottom:1px solid #c4c4c4; } /*二级菜单上的选项样式*/ #header .nav li ul li a{ display: block; height:44px; width:148px; background-color:#dfdfdf; color: #000; } /*鼠标悬停在二级菜单上的选项效果*/ #header .nav li ul li a:hover{ background-color:#d0d1d2; }
<！--HTML部分-->
<ul class="nav"> <li><a href="about-us.html">集团简介</a> <ul class="child-nav"> <li><a href="project-description.html">株洲小巨蛋</a></li> <li><a href="project-description/project1.html">总体规划</a></li> <li><a href="project-description/project2.html">展贸中心</a></li> <li><a href="project-description/project3.html">区位介绍</a></li> <li><a href="project-description/project4.html">配送中心</a></li> <li><a href="project-description/project5.html">国际公寓</a></li> <li><a href="project-description/project6.html">二期发展</a></li> </ul> </li> <li><a href="project-description.html">项目简介</a> <ul class="child-nav"> <li><a href="project-description/project1.html">总体规划</a></li> <li><a href="project-description/project2.html">展贸中心</a></li> <li><a href="project-description/project3.html">区位介绍</a></li> <li><a href="project-description/project4.html">配送中心</a></li> <li><a href="project-description/project5.html">国际公寓</a></li> <li><a href="project-description/project6.html">二期发展</a></li> </ul> </li> <li><a href="unit-introduction.html">户型介绍</a></li> <li><a href="latest-news.html">新闻更新</a></li> <li><a href="business-information.html">招商信息</a></li> <li><a href="contact-us.html">留言联系</a></li> <li><a href="friend-site-link.html">友情链接</a></li> </ul>
点击切换图片
<script> function onc(obj){ //获取对象 var id=document.getElementById("content-img"); //更换大图图片 id.style.backgroundImage="url('./img/abour_img"+obj+".png')";
//设定图片名为abour_img数字.png，名字中的数字与对应的a标签id相同
</script>
<!--HTML部分-->
<ul id="content-img-nav">
<!--href="javascript:void(0)"可以使a标签不跳转，页面不会刷新-->
<!--onc(this.id)函数中的 this.id 是将被点击的a标签自身的id被传到函数中，与上面的js代码结合可理解为 id=obj --> <a href="javascript:void(0)" id="1" onclick="onc(this.id)"><li><img src="img/abour_img_nav1.png"></li></a> <a href="javascript:void(0)" id="2" onclick="onc(this.id)"><li><img src="img/abour_img_nav2.png"></li></a> <a href="javascript:void(0)" id="3" onclick="onc(this.id)"><li><img src="img/abour_img_nav3.png"></li></a> <a href="javascript:void(0)" id="4" onclick="onc(this.id)"><li><img src="img/abour_img_nav4.png"></li></a> <a href="javascript:void(0)" id="5" onclick="onc(this.id)"><li><img src="img/abour_img_nav5.png"></li></a> <a href="javascript:void(0)" id="6" onclick="onc(this.id)"><li><img src="img/abour_img_nav6.png"></li></a> <a href="javascript:void(0)" id="7" onclick="onc(this.id)"><li><img src="img/abour_img_nav7.png"></li></a> <a href="javascript:void(0)" id="8" onclick="onc(this.id)"><li><img src="img/abour_img_nav8.png"></li></a>
</ul>
心态总结
此次项目开发虽没有什么大的负面心态的出现，但在这个过程中也出现了大大小小的问题。
1.太多时候只知道埋头苦干，没有分析好项目中各个页面之间的部分是否可重复使用，将自己陷入了繁琐的排版中。
2.遇到问题是虽不会退缩，但有时候没有太过钻牛角尖，虽然问题解决后有很大的成就感，但在此上面浪费了大量的时间与精力，不好。
3.当在一个问题上纠结太长时间后，心态上已出现负面状态，应转移注意力，即使调整心态，请教他人。
4.一个布局，有多种实现方式，应多多与他人交流，了解他人是任何布局的，比对自己的方式，是否他人的更加优秀。如果优秀，应加以吸收。
5.没有规划的长时间进行项目开发，越往后状态越差，思维迟缓，工作效率低下，对项目开发影响非常大，应该有一个时间规划，松弛有度，让自己的状态保持在良好上。
