煜龙时空项目总结

最近小组合作了一个项目,就是标题所说的煜龙时空项目,是一个航空学校招生报名的网站

http://m.shxw114.com/

 

网站分为职教板块和留学板块

 职教板块

职教板块中我负责的是招生简章这块,

页面中这部分 点击图中的按钮颜色会跟着改变

首先要给每个按钮设置点击事件,然后绑定class 起一个类名写背景色,在data中返回绑定的属性

 代码如下:

 

 页面中还有一些点击跳转到二级页面 这都是利用路由跳转完成的,

二级页面中没什么难点 就不细说了

 留学板块

留学板块中我负责的是3+1本科

 这个页面相对比较整齐 基本上都是用弹性盒子实现的,把弹性盒子学会,基本上就没什么难点了

ps:这几个页面大部分用的都是弹性盒子,不需要再用float:left 和内外边距一点一点调位置 ,相对来说方便很多

学到了什么?

1.创建项目前:在项目开始的时候,先对项目结构进行分析,安装需要用到的内容,然后搭建架构,这样能梳理我们的思路

2.创建项目后 : 1) 清除css 默认样式,

*{
  margin:0;
  padding: 0;
  list-style: none;//去掉li默认样式
  text-decoration: none;//去掉a标签下划线
 }

        2)写移动端页面考虑是否需要做适配

(function(win) {
        var docEl = win.document.documentElement;
        var time;

        function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                if (width > 768) { // 最大宽度
                        width = 768;
                }
                var rem = width / 375*100;
                docEl.style.fontSize = rem + 'px';
                ///rem用font-size:50px来进行换算

        }

        win.addEventListener('resize', function() {
                clearTimeout(time);
                time = setTimeout(refreshRem, 1);
        }, false);
        win.addEventListener('pageshow', function(e) {
                if (e.persisted) {
                        clearTimeout(time);
                        time = setTimeout(refreshRem, 1);
                }
        }, false);

        refreshRem();

})(window);
//getBoundingClientRect()；该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，
//他返回的是一个对象，即Object,有6个属性 top 、bottom、right、left、width和height
//以前getBoundingClientRect()是IE特有的，目前FF3+，opera9.5+，safari 4，都已经支持这个方法。
//onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发，
 //onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

3)学会用弹性布局,它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。

display:flex是需要在父级中使用的

flex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上；
        row（默认值）：主轴为水平方向，起点在左端；
        row-reverse：主轴为水平方向，起点在右端；
        column：主轴为垂直方向，起点在上沿；
        column-reverse：主轴为垂直方向，起点在下沿；

flex-wrap：子元素的换行方式：不换行；换行，第一行在上面；换行，第二行在上面；
        nowrap（默认）：不换行
        wrap：换行，第一行在上方
        wrap-reverse：换行，第一行在下方

flex-flow：是子元素的排列方式和换行方式的简写；


justify-content：设置子元素的水平对齐方式；
        flex-start（默认值）：左对齐；
        flex-end：右对齐
        center： 居中；
        space-between：两端对齐，项目之间的间隔都相等；
        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；

align-items：设置子元素的垂直对齐方式；
        flex-start：交叉轴的起点对齐（顶部对齐）； 
        flex-end：交叉轴的终点对齐（底部对齐）； 
        center：交叉轴的中点对齐（垂直对齐）； 
        baseline: 项目的第一行文字的基线对齐（基于内部第一行文字对齐）； 
        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度（高度占满整个容器）;

align-content：设置多个元素组成的整块的对齐方式；
        flex-start：与交叉轴的起点对齐（顶部对齐）； 
        flex-end：与交叉轴的终点对齐（底部对齐）； 
        center：与交叉轴的中点对齐（居中对齐）； 
        space-between：与交叉轴两端对齐，轴线之间的间隔平均分布； 
        space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍； 
        stretch（默认值）：轴线占满整个交叉轴（高度占满整个容器）；

ps:详细内容可以参考阮一峰的Flex布局教程https://blog.csdn.net/qq_29689343/article/details/112556133

4)学会去使用git,养成每天结束时将代码提交到git上保存的习惯,当有多人一起进行开发时,这样就能体现出使用git的好处,使我们更好的对代码进行管理.下面是一些git常用指令:

//初始化  git init
//添加到缓存区 git add .
//提交   git commit -m "提交时的描述信息"   
//检查目前的状态 检查工作区和 暂存区 和版本库   git  status    
//检查历史记录  git log
//查看目前所在的分支   git  branch   
//第一次 推送    git push -u origin master

以上就是我对这次项目的总结啦,如果有人看到的话希望对你们有帮助!