0

益米主页总结(1)

在做益米的主页时，又学到了很多新知识：CSS3动画，SEO，JS事件处理等等。设计师很给力，我也在努力重构出他想要的效果。最终页面：益米，让校园生活轻松自在 开始设计师是做好一个模块就丢给我。所以我刚开始也是一个模块一个模块的重构。做完5个模块后总设计图就发给我了。然后就是直接把HTML和LESS拼接在一起。大概的样子就出来了。不过第一次这么做也出现了一些问题，记录一下： 模块命名最好在项目开始的时候就定义好各种基本模块的名字，比如：1<div class="module-container"></div> 然后确定好容器的宽度，以及在总页面中是怎么呈现。后来定义的是这样：1.module-container {width: 1110px;margin: 0 auto;} 实际中这个并不是最外层的容器。需要另外一个div来包裹，设置宽度啊背景啊什么的：1.w100p {width: 100%;min-width: 1200px;background-color: #EDF4F9;} 然后秉承着padding和宽度分离的原则，在w100p类之下再设置一个内边距，来控制内容在一整个区块中的上下距离：1.p100 {padding: 100px 0;} 其实我没有量设计图的距离…就让内容看起来是居中的。不过让内容垂直居中其实有很多办法，以后再讲。 CSS3 动画动画都单独放在一个CSS里面。