HTML5+CSS3项目总结

 

经过一个月的学习,我基本掌握了HTML5的一些标签的用法和特性,以及一些CSS3的属性的特点和用法。

在本周安排的为期四天的第一阶段的课程的项目实训中,我基本能够熟练运用学到的知识,完成页面的速度和质量有明显的提高,经过自己加班加点的书写,在第三天中午就完成了所有项目的整体内容。不过,我知道网页的优化书写是没有终点的,并不是说完成了整体内容就算了事了,在做的过程中,明显有很多内容并没有特别细致的完善。我对自己的项目成果也不能满意。所以又用了1天的时间去修改完善细节部分的内容,对于部分小的图标进行了一些调整,比如PC端主页中的index中的“分享到QQ空间”,“分享到新浪微博”的图标都用了从原网站上找的雪碧图进行了细致的替换和调整。对网页中的一些效果也进行了改进,比如PC端new页面中右侧的上下自动滚动的动态板块中,加入了动画元素,视觉上完成了动态上下滚动的效果。

本次项目的实践过程中,也遇到了一些问题。比如做PC端页面的过程中,由于匆匆赶进度,对一些内容布局存在一些问题,直接导致了PC端主页index页面的轮播图效果在后面想添加的时候出现了问题,导致在最后项目展示的之间砍掉了相应的代码。由于感觉工作量比较大,初期工作的过程中,并没有仔细对布局进行细致的注释说明,导致后面的修改和添加出现了一些困难。

其中,本次项目遇到的最大的问题应该就是第一次涉及具体的移动端网页布局。虽然经过项目经理的讲解,能够对移动端布局有了一些了解,不过在真正书写的时候还是感觉到一些问题。后面通过向同事请教才渐渐明白了移动端布局的一些原理。

总结一下自己本次项目的成果,最大的感触就是自己的成果还是比较粗糙的,自己只是本着完成项目的想法,做完了项目,并没有对自己提出更高的要求,比如一些很明显的可以做hover效果的地方,自己只是轻描淡写了一下,并没有花时间去深入研究用户体验的内容,这对于一个前端工程师来说已经是一种工作态度的问题了。后面看了其他同事的项目成果,自己才明白过来,其实可以添加很多hover效果很蒙版效果进去,这是我应该反思的地方。

第一阶段的实训已经结束,明显感觉到自己落下了很多东西没有深入挖掘,比如Bootstrap的理解,less和sass在书写CSS项目中的运用,以及flex弹性盒子的运用等方面的内容都存在很多欠缺。这些都是我接下来要花时间来深入完胜的地方。对于接下来进入的JavaScript相关的内容,我应该鼓足勇气,坚持掌握每一点每一滴内容,不能让自己有知识盲区,只有这样才能成为一个合格的前端开发工程师。

时间: 2024-07-30 14:06:35

HTML5+CSS3项目总结的相关文章

HTML5+CSS3静态页面项目-PayPaul的总结

学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及理论知识的辅助来提高代码水平.首先是做几个HTML5+CSS3静态页面布局的练习,查缺补漏知识点并且总结在实践过程中遇到的一些错误.页面的设计稿主要是网络上找来了的,也尝试自己切图.测量位置.获得内容的属性等等,假装自己真的在完成一个项目. 第一个页面是从设计达人这个平台上找来的,这个平台的页面设计

HTML5+CSS3静态页面项目-BusinessTheme的总结

因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图了,具体的设计文件可以在文末的Github地址中下载.第一次的总结是以我对页面架构的理解,按照代码实现顺序讲解的,那这一次就按照遇到的问题总结性地记录吧.欢迎大家看完我的作品和总结以后,提出宝贵的建议!谢谢大家! 经过上一次的练手,这次的练手就更加从容了,不仅仅是为了查缺补漏,也是为了解决问题的同时

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的BBS练练手,技术更新快,也要学的快,跟的上时代,才涨的了工资. 技术的选择 jQuery Mobile  Phone Gap  等都是比较成熟的框架为什么我不用这些框架呢? 因为我考虑到底层的技术应用和练习 . 我的选择是:Html5+css3+angularjs+jquery HTML5+CSS

运用HTML5+CSS3+Zepto构建移动web网站!

手机微站.HTML5+CSS3(rem)+jQuery+Zepto+iScroll+Swipe综合开发手机网站. 移动端web网站(手机网站).mobile网站模版.HTML5网站 面向手机端的html5开发框架有很多,如何找到适合自己的一个呢? 1.jQuery Mobile jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球主流的移动平台.

9款超绚丽的HTML5/CSS3应用和动画特效

1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航. 在线演示 源码下载 2.HTML5/CSS3 3D纸片折叠动画 今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效,尽管它目前很少能在项目中应用,但从源码中我们可以学到很多HTML5 3D动画的制作知

使用Html5+CSS3的优势

一:大多浏览器支持,低版本也没问题     我看点这方面的资料,是为了做手机应用网站(有三个方案,这个是备用方案),可以开发响应式网站,可以脱离开发平台进行跨平台.     在Html5网页中引入Modernizr,就能让IE支持HTML5新元素.     HTML5样板文件快速开发(html5boilerplate.com) 二:布局.标签省时省力   [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片 <header> <!--语义相当于&l

让你的HTML5&amp;CSS3网站在老IE中也能正常显示的3种方法

起初,IE其实也是一款非常有进取心的浏览器.但经过一段时间的蛰伏后,它已经成为了我们生活中的一道障碍.微软现在又重新开始向其它浏览器发起挑战,但事实情况是,新版的现代IE浏览器一直滞后于谷歌浏览器和火狐浏览器.我们还不得不想办法兼容早期的IE浏览器.下面提到的三种方法能快捷轻松的让你的HTML5&CSS3网站在微软的主要浏览器中也能神奇的运行! htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元

HTML5+CSS3视频教程_从入门到精通 HTML开发框架 HTML视频教程 HTML

HTML5+CSS3视频教程_从入门到精通  HTML开发框架  HTML视频教程  HTML实战 跨平台开发技术-HTML5+CSS3从入门到精通(配两实战项目,兼顾PC版&&移动版网页+手游开发) 课程分类:HTML5+CSS3 适合人群:初级 课时数量:79课时 用到技术:html5 涉及项目:北风淘淘网站开发.北风酷跑游戏开发 咨询qq:2059055336 HTML5+CSS3从入门到精通详细查看:http://www.***/goods-487.html 课程简介: 本课程将从