小巨蛋项目技术总结与心态总结

标签：

心态总结：沉得住气，方成得了器。收获多少，常不在于付出多少，而是受外力使然或偶然因素所致。不要希望付出什么，就一定要得到什么，坚持不懈专注某事，若失之东坡，且收之桑榆。凡事须看远些，急功未必近利，有时成功的脚步来的很慢。需要耐心聆听与等候。别梦想一些完全做不到的事情，只要走在路上，尽头定有风景。

打代码要一步一步打，不要一步登天，有事情是要说出来的，不要去等着对方领悟，等到最后只能是伤心和失望。在这个项目中我发现沟通也是很重要的，理清思路然后再写代码。不要一看到项目就想立刻把他做出来，要一边想着应该怎样做才能有效完成项目。写代码要加注释，页面要整洁，清晰。

不要依靠，不要祈求，依靠只会使自己懦弱，祈求也是一种安慰。自身的强大才是硬道理。

技术总结：公共部分代码

/*公共部分 开始*/

*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}

.fl {
float: left;
}
.fr {
float: right;
}
.clear {
clear:both;
}
a {
text-decoration: none;
}
/*公共部分 结束*/

下拉菜单代码

HTML5

<ul class="nav">
<li><a href="">集团简介</a>
<ul class="child-nav">
<li>
<a href="">株洲小巨蛋</a>
</li>
<li>
<a href="">总体规划</a>
</li>
<li>
<a href="">展贸中心</a>
</li>
<li>
<a href="">区位介绍</a>
</li>
<li>
<a href="">配送中心</a>
</li>
<li>
<a href="">国际公寓</a>
</li>
<li>
<a href="">二期发展</a>
</li>
</ul>
</li>

</ul>

CSS

#header .nav > li:hover {
height: 400px;
}
#header .nav > li:last-child {
background: none;
}
#header .child-nav li {
height: 41px;
line-height: 41px;
text-align: center;
background-color: #dfdfdf;
border-bottom: 1px solid #c4c4c4;
}
#header .child-nav li:hover {
background-color: #d0d1d2;
}
#header .nav > li > a {
display: block;
width: 147px;
height: 70px;
line-height: 70px;
text-align: center;
}

鼠标移上变换图片

html5

<div id="cover">
<p id="cover-title">查看大图</p>
<p id="cover-name">株洲小巨蛋总体规划</p>
</div>

CSS

#cover {
position: relative;
z-index: .5;
width: 657px;
height: 209px;
margin: -313px auto 100px;
color: #ffffff;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all .2s;
}

#cover-title {
padding-top: 80px;
font-size: 28px;
}

#cover:hover {
margin: -313px auto 100px;
opacity: 1;
}

代码前面加浏览器前缀，浏览器兼容

例：-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;

小巨蛋项目技术总结与心态总结

标签：

原文地址：http://www.cnblogs.com/adda/p/5798307.html