大学生web前端设计大作业指导(含示例源代码)(web前端网页设计作业)

网友投稿 632 2022-06-11


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;}

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

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:web前端干什么的?为什么要学习web前端(web前端是学什么的)
下一篇:福利放送!无版权web前端设计素材网站分享
相关文章

 发表评论

暂时没有评论,来抢沙发吧~