大学生web前端设计大作业指导（含示例源代码）

web前端网页设计课程是高等院校计算机、信息管理、电子商务和其他相关专业的一门重要的基础课程，在考核方向上大多数会以大作业的形式考核，本文就带大家了解一下怎么去做这个类型的大作业

首先HTML网页大作业一般做5-10个页面

网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件）以及制作报告（策划书），基本期末作业所需的知识点全覆盖。

单列布局水平居中

水平居中

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）

使用inline-block 和 text-align实现

.parent{text-align: center;}

.child{display: inline-block;}

优点：兼容性好；

不足：需要同时设置子元素和父元素

使用margin:0 auto来实现

.child{width:200px;margin:0 auto;}

优点：兼容性好

缺点: 需要指定宽度

使用table实现

.child{display:table;margin:0 auto;}

优点:只需要对自身进行设置

不足:IE6,7需要调整结构

使用绝对定位实现

.parent{position:relative;}

/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/

.child{position:absolute;left:50%;transform:translate(-50%);}

不足：兼容性差,IE9及以上可用

实用flex布局实现

/*第一种方法*/

.parent{display:flex;justify-content:center;}

/*第二种方法*/

.parent{display:flex;}

.child{margin:0 auto;}

缺点：兼容性差，如果进行大面积的布局可能会影响效率

一般的还可以做响应式，保质保量完成

以上就是“大学生web前端设计大作业指导（含示例源代码）”的详细内容，想要了解更多web前端内容欢迎持续关注编程学习网