mei0515的博客

该个人网站一共有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页面，可以通过给博主留言。给博主一些意见，该留言可以有表情添加，留言框带有头像。

根据个人需求我的设计是一个html5响应式个人简历的介绍。根据导航条各个方面的介绍总共分为7个页面。除了主页面之外有6个子页面。主要利用所学的hhtml5 和css3等方面的知识。例如：css3导航条的使用、对话框、图片与文字的环绕布局、Glyphicons 字体图标、border边框不同的使用、progress-bar进度条的使用、h5轮播、iframe内联框架、h5新表单的元素的使用和验证等等知识点。每一个页面的结构分为头部(导航条)、主体内容（各方面介绍）和尾部（版权声明）三部分，使页面整洁分明，条理清晰。 本设计最大的特点是html5响应式设计，根据不用屏幕的大小适用于不同的平台，跨平台，节省开发成本，使得浏览速度更快更高效。

该方法是利用jquery当鼠标滑过缩略图时，进行焦点定位，显示你鼠标所经过的图片，该效果还有动画渐变效果，利用透明度来显示动画渐变过程。还有动画定时，当鼠标没有进行任何动作，动画效果会自动播放。