首先确定项目框架,分为四个部分,首先是html,这里是网页的内容,网页的基础;然后是css,这是网页的布局样式,将网页内容按照我们想要的方式进行排版;然后是js,这是网页的动画效果,毕竟网页的灵魂还是在于js,有动画用户才能有很好的体验感;最后是资源文件,网页中用到的图片视频等,都放到了这里。
因为有的页面部分可能会出现在好几个页面上。在这个项目里,页面顶部的导航栏部分出现每个页面中,而且底部也是经常使用的。所以就将这两者都单独写一个html文件,用到的样式也都写到css中,也就是header.css和footer.css。这样可以进行复用,省去很多重复工作。
每个页面的整体布局是最复杂的最花时间的,因为要不停地调整运行,查看再调整。很多标签放一起进行设置,虽然方便,但是问题也比较多。比如段落可以放一起设置内边距padding和外边距margin。列表根据class来设置字体颜色和大小。对于大的标签,设置高度和宽度,以及背景,都使用的百分比布局。进行层次嵌套的设置,这样更加方便具体。
82张图片,10个CSS文件,7个JS文件,11个HTML文件,布局动画丰富,注释详细。