悬浮导航栏

悬浮导航栏

响应式布局

响应式布局

动感的页面

动感的页面

FEATURES

悬浮导航栏 更加美观

位于页面顶端时,导航栏给人一种与轮播图融为一体的观感。滑动后,导航栏内边距缓慢收窄,悬浮于顶部。

bootstrap的导航栏在小屏幕下不够完善:展开导航选项后,只能通过再次点击折叠按钮才能将其折叠。我用一个简单的方式解决了问题,使其有更好的体验。

导航栏效果演示
手机设备下的显示效果

响应式布局 适配多种显示设备

一个网页能够兼容多种终端——响应式布局可以为使用不同显示设备的用户提供更加舒适的界面和更好的用户体验。

得益于CSS3的Media Query和Bootstrap的栅格布局系统,我不仅对桌面显示器,笔记本电脑和平板做了适配,而且对移动设备的布局做了进一步的细分:从大屏幕手机(575px),iPhone 8P(414px),iPhone 8 & iPhone X(375px),到iPhone 5(320px)都做了相对应的布局优化,扫码可查看移动端布局。

动感的页面 有趣

如您所见,页面加入了一些有趣的动画,赋予了页面活力和不俗的显示效果。

还有一些小细节:多处使用box-shadow来营造视觉上的层次感,图片经过压缩优化,登录和注册有简单的验证,用动图更加直观地展现所述之处,把简版履历融入页面当中,利用二维码使查看移动端布局变得便捷, 还可以点击 来查看代码。

一张用来表示有趣和活力的照片

ABOUT ME

吴铎旌 wú duó jīng

QQ: 791469415
邮箱: wdj1@foxmail.com

你好,谢谢你的到访!

我是一名计算机专业的应届毕业生。前端开发是我正在用功学习的方向,虽然资历尚浅 ,但是我相信每天进步一点,再遥远的目标都能慢慢变得触手可及。

怕什么真理无穷,进一寸有一寸的欢喜。