Ant Design门户前端设计还原

Ant Design门户前端设计还原
基于HTML、CSS、JS、JQuery的相关知识，完成一个简单的设计网页。

一、基本介绍

能够基于HTML、CSS、JS、JQuery的相关知识，完成一个简单的设计网页。主要包含两个模块：

  • 页面布局
  • 数据渲染

【源码下载请点击】

注：目前动态渲染未完成。

二、需求分析

2.1 首页（index）

打开网站首先展示的是首页，界面如图1-1。

大致分为三个部分：

  1. 左上角的 logo及名称：需要做到文字与logo整体靠左，相互居中排列对齐
  2. 左边文字部分：文字之间应有字体大小以及行间距的区别，与上一部分的logo靠左对齐
  3. 右边图片部分：插入图片并且不使图片横向或纵向变形
图1-1

2.2 设计语言页面（language）

首页下拉滚动至设计语言页面，该页面需要做到蓝色背景图案插入与网页宽度自适应。

设计语言标题（title）应居中显示。

4种语言内容（content）：包括图片、中英文文字，需要使用json格式数据（Ant design文件夹下data中的design.js）通过jquery的ajax获取数据，从而进行页面的动态渲染

图2-1

2.3 解决方案页面（methods）

设计语言页面下拉滚动至解决方案页面，该页面需要做到背景图案插入与网页宽度自适应。解决方案标题（title）应居中显示。
中间主体内容（content）：分为左右两部分
左边（left）：需要做到背景颜色与右边区分，且左右两边区域大小一致，下部分需要实现两个点击跳转事件（Ant Design of React/Angular）
右边（right）：分为上中下三个模块，每个模块各含一部分图片、文字、learn more点击跳转事件，每部分的间隔与对齐方式应相同

图3-1

2.4 工具&资源页面（tools）

解决方案页面下拉滚动至工具&资源页面，该页面需要做到工具&资源标题（title）应居中显示。
中间3部分内容（content）的间隔相同并基于横向居中，文字之间应有字体大小以及行间距的区别，每部分样式对照图4-1。

图4-1

2.5 末页（others）
工具&资源页面下拉滚动至末页，该页面需要做到4个列表使用循环进行静态渲染，每列间隔相同并基于横向居中，文字之间应有字体大小以及行间距的区别，每部分样式对照图5-1。
底部分割线以下部分均应为带有点击事件的按钮

图5-1

三、附录

附录1 图片

所有图片均于文件夹img中，请选择对照样式图选择合适的图片使用

附录2 布局标注

1.解压标注.zip
2.双击index.html在浏览器中打开
3.双击页面中间查看标注
4.在右上角设置分辨率为1440x3641（单位px）

附录3 参考样式

HTML&CSS常用.txt中为常用的布局样式及属性，可作为参考

四、对比

图6-1