标签：
这一次项目确实做得比较累，同时也是对我们一种非常强的锻炼。
首先，做项目给我的第一印象就是页面多，代码乱，效果多。
这次做项目我特别注意的就是效率上的提高，说实话除了一些比较难的效果（没学JS之前比较难做出来），其他页面大家都是可以做出来的。那么大家的差距到底在哪里？第一个首先就是页面视觉效果，有的同学做的效果一看上去就不顺眼，而有的同学做的页面却非常精美，看起来跟设计图一样。其次就是效率，效率很大程度上决定着我们的工作强度，我认为现在就要注重于这一点并有所总结。
技术总结：
先从总体效率说起，效率上我们最重视的应该是页面内容的重复利用。例如我们这次做的项目所有页面的头部和底部都是一模一样的情况下，我们就没必要每个页面都重新写，做完一个直接套就可以了。在我看来，做项目之前先把设计的页面全部看清楚，理清思路是非常必要的一个准备工作。
那么怎么理清思路？首先我们比较确定页面之前的相似之处，尽可能全部找出来并做出一个框架页面，这个框架页面通过添加内容就可以变成其他的页面，这样才能将效率最大化。另外，也有一个网页内容组件化的概念，道理都差不多，例如一个按钮做好了以后发现其他页面也可以套用这个按钮的时候，我们就可以将这个按钮组件化放到公用css去套用，简而言之就是为了避免重复去做同一件事情，保留更多的时间用去做效果、优化等。
页面样式统一化：
同样的道理，当我们重复性地去设置一样的样式的时候，就会想到用统一样式。
例如，我们发现各个页面的字体大部分都是12px的灰色微软雅黑字体，就可以设置全局样式：
body{font-size: 12px;font-family: "微软雅黑";color: #ccc;}
这样就可以避免我们重复性地设置相同的样式，提高开发效率的同时也对代码的性能优化有重要意义。
这里我也分享一下我经常会用到的一些基本样式
设置页面外边距为0（不同浏览器可能会有不同的外边距，也可以直接用reset.css） 全体微软雅黑字体：
body{margin: 0;font-family: "微软雅黑";}
设置清除浮动的快捷类：
.clear{clear: both;}
当发现页面大部分a标签都没有下划线，并且鼠标悬停有下划线效果时：
a{text-decoration: none;}
a:hover{text-decoration: underline;}
当然，这些都不是固定不变的，具体还是要看当前项目的总体样式而定。
技术总结的最后说一下页面效果的轮播吧，相信轮播图大部分网站都会有，是我们必须要掌握的。
目前我们还没有学习到js，所以做出比较完美的轮播图比较牵强，所以我在这里只分享我做过的一些比较简单的点播图（就是通过点击改变背景）
基本的HTML结构：
<input type="radio" name="check" id="c1" checked> <input type="radio" name="check" id="c2"> <input type="radio" name="check" id="c3"> <div class="bg">
<label for="c1">1</label>
<label for="c2">2</label>
<label for="c3">3</label>
</div>
通过点击label元素使得需要的单选按钮被选中，然后通过伪类和兄弟选择符改变div的背景即可：
#c1:checked ~ .bg{background: url(bg1.jpg);}
#c2:checked ~ .bg{background: url(bg2.jpg);}
#c3:checked ~ .bg{background: url(bg3.jpg);}
技术上的总结我觉得也没有太多可以总结的，这次项目我们大多都是做基本的页面布局，动态交互效果虽然也有做，不过太难的做不到，太简单的也没什么好说的。用纯CSS做交互效果果然还是太牵强了。相信我们学习JS后这些问题将不再是问题。
还有一个就是我用切换背景的方法去实现类似于鼠标悬停触发效果的技术
在这次项目中有一个页面的效果是鼠标悬停到特定区域图标（不规则且分开的），会触发相应的图标发光，如果用纯CSS去做会比较勉强，所以我想到了直接整个背景图片切换的方法，省去了不少麻烦，而且效果看起来也没什么区别，不过最致命的缺点就是不能做过渡动画效果，因为这样一来就会发现背景是变化的，在这里我只分享一下代码：
<div id="unitmap"> <a href="" class="cloth"><div class="area" id="ac1"></div></a> <a href="" class="cloth"><div class="area" id="ac2"></div></a> <a href="" class="cloth"><div class="area" id="ac3"></div></a> <a href="" class="cloth"><div class="area" id="ac4"></div></a> <a href="" class="cloth"><div class="area" id="ac5"></div></a> <a href="" class="cloth"><div class="area" id="ac6"></div></a> <a href="" class="cloth"><div class="area" id="ac7"></div></a> <a href="" class="cloth"><div class="area" id="ac8"></div></a> <a href="" class="conventioncenter"><div class="area" id="acc1"></div></a> <a href="" class="home"><div class="area" id="ah1"></div></a> <a href="" class="dinner"><div class="area" id="ad1"></div></a> <div id="themap"></div> </div>
#unitmap{
position: relative;
width:879px;height: 290px;
margin: 140px auto 0;
}
#themap{
position: absolute;
width: 879px; height: 290px;
background: url(../images/unitmap879-290.png);
}
#ac1{left: 1px;top: 64px;width: 48px;height: 204px;} #ac2{left: 74px;top: 64px; width: 47px;height: 154px;} #ac3{left: 121px;top: 205px;width: 70px;height: 13px;} #ac4{left: 190px;top: 64px;width: 48px;height: 154px;} #ac5{left: 264px;top: 64px;width: 47px;height: 154px;} #ac6{left: 418px;top: 64px;width: 47px;height: 154px;} #ac7{left: 491px;top: 64px;width: 47px;height: 154px;} #ac8{left: 538px;top: 204px;width: 44px;height: 14px;} #acc1{left: 311px;top: 192px;width: 107px;height: 33px; } #ah1{left: 725px;top: 53px;width: 71px;height: 168px;} #ad1{left: 701px;top: 221px;width: 95px;height: 47px;} .cloth:hover~#themap{background: url(../images/unitclothmap.png);} .conventioncenter:hover~#themap{background: url(../images/unitcentermap.png);} .home:hover~#themap{background: url(../images/unithomemap.png);} .dinner:hover~#themap{background: url(../images/unitdinnermap.png);}
心态总结：
这次项目我的心态还是非常好的，很多时候我常常会坚持着做完特定数目的页面才休息，在开发过程中我除了写代码外，还花了比较多的时间去思考，思考怎么样才能做得更快，怎么样才能做出更好的效果，哪些代码是不必要的，等等这些问题我都是非常重视的。
就在今天，我做了一个小时的页面后电脑还死机了（课室的电脑有还原精灵），我也就爆了个粗就继续重新做了，其实第二次做会快很多，因为做过一次之后思路会清晰很多，至少我又花了半个小时就搞定了。确实做这一行我也发现，一定要沉得住气，以后我们还可能遇到更恶心的事情呢，保持良好的心态才是正确之道。
不过要提到我做这个项目时出现的一些不好的心态，也不是没有的。那就是嫌麻烦，不是怕麻烦到别人，而是不想把效果做得这么完美，往往在想怎么更快更好地做，我觉得这样有好有坏吧，好的不用说，锻炼我提高效率的能力，坏的方面就是影响到了我对有难度的效果挑战的锻炼吧。很多时候我都更加喜欢走捷径，对此我的总结就是，这要看情况而定。如果这个效果有锻炼的价值，我就更加应该去完美地实现它，而不是利用其它技术代替它，逃避它，当然一些按钮图标，在兼容性上，截图也是没办法的事。
我一直都是比较冷静的一个人，所以心态方面其实很难有所波动，只希望自己在下次做项目的时候也可以一直保持良好的心态，努力提高自己的技术吧。
标签：
原文地址：http://www.cnblogs.com/deoem/p/5797091.html
