编程学习网 > WEB开发 > 大学生web前端设计大作业指导(含示例源代码)
2021
09-14

大学生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前端内容欢迎持续关注编程学习网

扫码二维码 获取免费视频学习资料

Python编程学习

查 看2022高级编程视频教程免费获取