个人主页

web前端开发 基础实验1

吕梦扬 软42
2014013452
lmy1229@126.com

1.实验要求

1.1 基础要求

结合课上所学HTML/CSS基础,设计实现自己的个人主页,需要包含若干内容.具体要求如下:

提高要求

2.完成与实现

网页设计

总体设计参照下图

web structure

根据设计实现的网页如下:

Demo

网页的自适应设计

网页的自适应分为两种:

  1. 网页上的元素的大小随着屏幕宽度的改变实时改变, 通过在CSS中设置width = 100%width = 80vw等语句来实现. 在这种情况下, 只是元素的大小在改变, 整体的布局并没有改变, 而是保持原样
  2. 网页的CSS中使用了@media语句来进行自适应布局. 当前的规则是:

本网页对于小屏幕的重新布局主要体现在导航栏div.nav上. 当屏幕宽度太小时, 页面中的文本内容可以换行, 对于视觉效果的影响比较小. 但是导航栏上的元素如果换行,就会对页面产生较大的影响. 因此, 在本网页上, 当网页察觉到环境是小屏幕时, 就会禁用掉div.nav上的原本3个元素, 启用sidebar. 当用户点击导航栏上的按钮时, sidebar会从网页的外部移动到网页中,替代原本导航栏的作用. 实现效果如下

Portable Device Demo 1 Portable Device Demo 2

浏览器兼容性

经过测试, 本网页能够在Safari,ChromeMicrosoft Edge浏览器上完美运行, 在FirefoxInternet Explorer 11上完美显示界面,但是在移动端上某一些CSS动画无法正确播出, 但是不影响使用

3.未来展望

  1. FirefoxInternet Explorer 11上部分CSS动画没有播放过程直接显示结果,且在homeworks界面用于显示作业报告的iframe的高度计算有问题. 这些bug需要修复
  2. 现在的网页还很原始, 所有页面都是通过html写死的. 这样既不方便也不利于网页的课扩展性. 将来需要使用新学到的技术继续完善个人主页

4.发布地址

本网页发布于lmy1229.github.io, 网页源码在这里