Web全栈培训班静态页面设计大赛-仿天府软件园

Hexinyan

简介

因为对页面设计不太了解，所以找了一个网站来仿照。这次找的网站是成都天府软件园的官网，是一个全屏站，仿照的是网站的首页。

演示站点：http://paopao.siriusbot.cn/3423726347/

预览图

第一屏

https://image-1259105084.cos.ap-chengdu.myqcloud.com/%E7%AC%AC%E4%B8%80%E5%B1%8F.png

第二屏

https://image-1259105084.cos.ap-chengdu.myqcloud.com/%E7%AC%AC%E4%BA%8C%E5%B1%8F.png

第三屏

https://image-1259105084.cos.ap-chengdu.myqcloud.com/%E7%AC%AC%E4%B8%89%E5%B1%8F.png

第四屏

https://image-1259105084.cos.ap-chengdu.myqcloud.com/%E7%AC%AC%E5%9B%9B%E5%B1%8F.png

第五屏

https://image-1259105084.cos.ap-chengdu.myqcloud.com/%E7%AC%AC%E4%BA%94%E5%B1%8F.png

页脚

https://image-1259105084.cos.ap-chengdu.myqcloud.com/%E9%A1%B5%E8%84%9A.png

总结

页面主要用到的知识点有：flex布局，position定位，过渡效果。

通过这次实战也学习到了很多新知识，比如过渡效果，外部字体引用，滚动条样式等。同时也巩固了课程中讲到的知识点，对讲到的知识点有了更深的理解。

最后非常感谢的就是泡泡老师，让我对静态页面开发的知识有了更加深入的了解，也期待后面的前端框架和后端部分的课程。

开发思路

下面的内容是页面的开发思路，感兴趣的大家可以看一下，有问题和更好的思路也可以留言，共同学习，一起进步！

第一屏

第一屏分为导航栏和banner两个部分。

导航栏

• 导航栏部分由左右两个div组成，使用弹出布局的方式分配两个div占据的宽度，并且在水平方向两端对齐。
• 右侧div使用space-around的方式在水平方向对齐。

banner

• banner原站是一个轮播图，由于时间问题并没有做，而是使用了背景图。

第二屏

• 第二屏首页给整个div设置高度，并且添加一张背景图。
• 布局为垂直方向。顶部添加一个div设置宽度和高度，添加logo，使用弹性布局使logo的img元素水平和垂直居中。
• 底部占据剩余空间，这里使用的是百分比来分配父元素的高度。
• 底部内容部分使用的三栏布局，左侧英文描述和右侧入口卡片固定宽度，中间自适应。
• 最后在第二屏右侧添加了点击跳转第三屏的一个功能，主要用到的元素旋转和锚点跳转的知识点。

给html元素添加 scroll-behavior: smooth; 属性可以使锚点跳转有过渡效果。也可用于返回顶部。

第三屏

• 第三屏也是垂直方向的布局，分为上中下三个部分。
• 顶部只是设置了宽度，添加一个背景颜色。
• 中间部分添加背景图片，文字描述和服务板块都是用的position定位来实现。
• 服务板块内容还是弹性布局，非常好用的布局方式。
• 底部和顶部相同，设置宽高添加背景颜色。

第四屏

• 第四屏分为左右两个部分。
• 第四屏内容比较简单，没有特殊的知识点，都是使用的常规布局方式。

第五屏

• 第五屏分为左右两个部分。
• 左侧描述部分整体包裹一个div，使用外边距调整位置。
• 右侧div设置宽度，每一个卡片都是一个item，使用弹性布局使item分散对齐。
• 右侧div使用position定位方式和左侧实现重叠效果。

页脚

• 页面先分为上下两部分。上面是主要内容，下面是版权信息。
• 上面内容部分再分为左右两部分。

转角遇到贼

不但做得好，每一块的思路讲解也很棒

执骨哟

不但做得好，每一块的思路讲解也很棒