酷炫Github个人首页

效果

发现和你有什么不同吗?没错,多出了上面的README.md。

欢迎访问我的 github首页:查看实际的效果

如何实现?

创建一个 和你用户名同名的仓库 即可。

右侧的统计图如何实现?

只需要在README.md中加入如下代码即可:

<img align="right" src="https://github-readme-stats.vercel.app/api?username=xmcy0011&show_icons=true&icon_color=CE1D2D&text_color=718096&bg_color=ffffff&hide_title=true" />

注意,username替换为你自己的用户名即可。除此之外,还可以增加 &theme 指定主题,具体可以参考 github-readme-stats

GitHub Readme Stats Themes

参考

个人网站一共有8个页面。首先博客的登录界面login.html:是利用html5和css3结合写出的一个超炫酷的页面,根据canvas粒子制作出背景具有动态的效果。登陆后根据存入数据进行比对,对其用户名、密码、验证码验证,只有通过验证后才能登录成功并且验证成功后可以达到全屏的效果。每一个页面分为footer body和footer三部分组成。头部主要就是标题栏,尾部是页脚,中间就是主题内容。index.html主页:主要就利用js焦点滚动式轮播插入图片和文字自行进行翻页,其他主要利用div和css进行控制每一个内容框。利用链接跳转到相对应的内容上。可以根据标题、标签、关键字等点击到另一个内容,图片和文字进行有个布局达到图文环绕的布局。再然后,就是 关于about.html页面:博主简介利用jquery焦点缩略图轮播滚动类似选项卡滑动切换。可以自动展现不同的图片。其次,是成长页面about.html:是博主对未来的美好未来的期待,利用bootstrap响应式布局进行布局,图片和文章不同布局相结合,是整体更协调。再其次,是娱乐fun.html页面,利用CSS3 transform当鼠标悬停到照片上时,图片具有放大特效,主要利用css3中scale()和rotate()进行旋转和缩放。接下来是说说moodlist.html:个人心情页面,博主可以发一些类似于微信或qq心情说说,具有时间年轮的效果,当鼠标放上某一个时具有高亮的效果。最后是留言comment.html页面,可以通过给博主留言。给博主一些意见,该留言可以有表情添加,留言框带有头像。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值