“我的个人志”制作过程

我的个人志:

2015.12.17记

制作过程:
暂分为四个部分:
第一页:

第一页:(主页君,INDEX):
内容:视频,图画,新闻热点
第二页:(趣点屋,SHARE-life-):

第三页:(时光廊,PHOTO-wall):
内容:个人生活照,历史小故事,意境,我欣赏,自己制作
第四页:(绣我秀,ABOUT-me):
内容:个人简介。

初步大概制定时间:2015.10.08,整理于10.09

网页内容css框架类似于W3C的样子

404页面效果:

学习和收集资料中,资料还太少了,整个结构内容板块还没有定下来,要忙于考试了,不知道啥时候可以开始实现。

2016.5.6

差的真远,距离写下的话已有半年多的时间了。
还有多少个明天呢?
每一天都是这样,真是太不应该了。

 

开始与制作2016.5.30

2016.6.1

就目前的进度成果展示:

布局,背景,字体,颜色,最终确定为:

其中遇到的问题:
在导航条的设计中,中文英文为一体,但是换行出现问题,暂时是用了<br>解决,但是空标签的意义不大。
Background:URL();在图片路径显示正常的情况下,并没有显示出本来的模样,解决方法:给要设置的背景的id加了宽高。
在这个过程中:background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。

4.依旧存在的问题:

a:hover的效果不理想话:
       想要的感觉:鼠标悬停只在文字区内显示颜色。

在选择图片,制作图片,找素材,选效果,文字安排,花费的时间真的很多,也真的很累,不过没关系啊,请别放弃,继续努力吧。相信自己,不论走的多慢,只要一直往前走,总会有到达的一天,不论多晚,我都会走着,不论成果如何差,总是会有第一个的,承载了这个时间段的所有的美好。
加油吧,亲爱的自己。
为了以后,为了更美好的,为了更幸运的,请好好的努力的认真的走着,跑着,休息,和享受着。

2016.06.3

目前的进度汇总:

首页制作完毕:

主页君对应此情可待成追忆,趣点屋对应纸笔人生知之否;
时光廊对应愿有时光可回首;绣我秀对应十年佳酿香醉人。

黑色字体是解释说明这些内容的大致方向。

页脚内容补充说明。

遇到问题:

1.火狐与谷歌的显示不同,书写时一直以谷歌为主,然后用火狐测试时,发现的内容不显示,而且字距的间隔很大。百度得到的解决方法是“lang="zh-cn”,但是依然没有任何改善,查看css样式的时候,发现使用的<br>标签在火狐下的距离为:0.0166626*line-height;目前的解决方法是,我适时的限制<li>的height的值。

2.重新认识了display:inline-block;的意义和作用,理解: inline-block 像行内元素一样显示,但其内容象块类型元素一样显示。会收缩包围自己的内容。

3 .overflow:hidden;声明的真正用途是防止包含元素被超大内容撑大。overflow;hidden之后,包含元素依然保持其设定的宽度,而超大的字内容则会被容器切掉。除此之外,overflow:hidden;还有另一个作用,即它能可靠的迫使父元素包含其浮动的子元素。

明天开始写share.html页面。内容大概构思为左边目录表,右边内容区,选项卡类型,像W3C那样的感觉。
加油。
到九月份校招的时候,要写出来东西。加油,加油,加油。
明天,未来就在你手里呢。

2016.6.6

进度汇总:
目前制作的是趣点屋这块,进度很慢。

1.还在想它的布局怎么来,颜色基本确定。内容板块也确定了。

2.今天呢,就是加了个logo。感觉还不错的。

3.近期问题:
总是提不起精神来。
要快快的好起来,好好的。
绝不能放弃了。
这可是第一个独立完成的哦。资料收集了那么久,不可以的哦。
加油啊。

2016.6.8

遇到的问题:
1.图片与下一个div之间会存在间隔,解决方法:img{vertical-align:bottom; display:block;}

认识 CSS vertical-align 属性: 垂直对齐一幅图像。
   

今日定稿为:

内容归档出现问题,需要好好的构思一下,分布形式与内容。

2016.06.12

进度汇总:

美人何处的秦淮八艳部分完成;
书香之女与戏说故事的素材还没有收集好;
想要的方式:
点击左边的题目,右边的内容区做相应的跳转。原理为:选项卡的实现。

2016.6.14

进度汇总:

文字排版布局完成。javascript进行时。
获取元素时,获取多级列表,自己的方法为:

出现诸多问题,明天继续。

现如今存在的问题:获取class属性的时候出现:

很奇怪的问题。

问题解答:获取的方法没有错误,选取元素的时候选错了。

2016.6.15

改变:

感受:
当自己亲自编写代码,没有人也没有源代码视频参考的时候,明白实现的原理,但是在书写的过程中会遇到好些问题,代码是一点点的改进,虽然是一个小小的程序,但是在编写的过程中将自己的思路一点点的去实践,才发现思维与逻辑与实际效果的差别,想的效果与真实的效果是不同的,在这个时候,奇偶开始思考自己的逻辑上的错误,产生这种错误的原因是什么,在这个实践的过程中,也是锻炼自己思考的过程。虽然最后,只是一点点的功能。
不过,还是很开心的。

share.html就此完成,结束。
接下来的时间里要完成考试,可能没有时间完成接下来的任务了。
考试结束后继续。

2016.7.1

课程设计结束了,前几天在慕课网上看了两集css禅意花园,认识了jetBrains插件,可以实时更新代码,而不必要一直刷新,可是Google不能用,上不了Google,上不了Google网上商店,程序扩展不了。先解决的是Google商店的问题,寻找到了Google助手,下载了插件,满心欢的去尝试实时更新,可是webstorm老是提示我插件没有安好,请确认是否安装好。But,在我看来,插件启动了,可是为什么就是不工作呢?

在我的搜索下,我发现webstorm内置自己的服务器,如果要与chrome关联,其实是chrome与webstorm的内部服务器连接。
所以:

成功连接。

2016.7.10

坐火车带二和回家玩

2016.7.14

二和回家,开始写我的个人志

2016.7.14-2016.7.18

时光廊编写完成:
14-15确定内容模块样式,切图,找图。

16-17:css样式布局,内容确定

17-18 js效果实现:
1. 点击 按钮,的变化,以及各个模块图片的切换。

2.鼠标移入,图片从中心扩展变大

其中应用的知识点为:css的浮动与绝对定位的转换,display:none;后绝对定位转换遇到问题:

跳转到第二主题时出现图片堆叠,绝对定位转换出现问题,加限定后修改。

photo.html 就此完成,接下来要开始about.html的制作。加油!fighting!!!!

2016.7.28

我的个人志最后一个页面的制作进度汇总:

设计图片无缝滚动

绣我秀的内容:

第一个和第三个竖直滚动,第二个为视频播放:

较前面的页面,此次的页面采用的方式是:
1.先设计好板块内容的大体,然后添加内容,板块布局的方式来源于网络资源psd;
2. css方面使用较多的box-shadow;对定位,margin,padding的理解认识加深。
3.无缝滚动技术的应用;
4.网页中插入视频的学习和初步简单使用。

2016.7.30

至此结束“我的个人志”

第一个完成的作品,虽然知道没什么可以说出来的技术和美感,但是心里还是很开心的,在经过这么长的时间里,每一个页面都是用心想过的,每一个板块的也是
自己辛辛苦苦想出来的,排版色彩字体尺寸都是一点一点试出来的,所以,结果是这样,过程中真的真的学到了许多新的知识,对css,html和js有了实质性的认识。
我来说说我的每 个页面较之前的页面的进步吧。
第一个页面,页面的布局其实是来自一个我很喜欢的网站的首页:

第一个页面没有使用任何js的知识,本想在主页君,趣点屋这些列表前加图标的,可是当时候加上去发现文字与图标的底端对齐的,并不是想要的居中对齐
效果,没意识到wertical-align这个属性,所以弃而不用。

第二个页面,左边是列表,右边是内容区,点击列表项,右边区域会显示相对应的内容。此次效果的实现利用js选项卡原理实现 。

第三个页面构思布局来源于网络资源psd,效果实现是选项卡原理,鼠标移入,图片从中心向外扩大。

第四个页面较之前增加了小视频,竖直无缝滚动,轮播播放,自动播放。

时间: 2024-11-16 08:49:31

“我的个人志”制作过程的相关文章

国内某公有云 linux云主机开机初始化过程分析和他的镜像制作过程

最近学习了国内某公有云的linux云主机启动之后,在镜像内部的初始化过程,分享出来,仅供参看. 一.开机过程 可以看到开机时候按照数字顺序执行了一连串的脚本,其中也提示的该公有云厂商的名字的ucloud,最后一条显示做了清理工作.进系统一看 果然找不到这些脚本了. 二.进单用户模式找出这些脚本 想让开机的时候不让最后一步 999-clwanup.sh执行的办法很多,我采取的的办法是单用户模式,简单上个图,具体方法大家谷歌下. 成功进入单用户模式,并复制他的初始化脚本 三 初始化过程分析 (一)

[PCB制作] 1、记录一个简单的电路板的制作过程——四线二项步进电机驱动模块(L6219)

前言 现在,很多人手上都有一两个电子设备,但是却很少有人清楚其中比较关键的部分(PCB电路板)是如何制作出来的.我虽然懂点硬件,但是之前设计的简单系统都是自己在万能板上用导线自己焊接的(如下图左),复杂的都是模块拼接的(如下图右):      工作中原理图和PCB也有专门的工程师来制作,因此我对这一块了解比较少.而最近闲来无事,又因为手头上确实少一个四线二项步进电机驱动模块.起初是在淘宝上找了很久才找到一个适合的,结果实验了一下午还是不行:又考虑自己在万能板上焊接,可是发现该模块外围需要10个左

HTML5 3D爱心动画及其制作过程

之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这个3D爱心动画的实现过程,可以一起来看看. 当然你也可以先看一下DEMO演示 这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码. HTML代码: <div class=’heart3d’> <div class=’rib1′&

从零开始教你制作cocos2dx-3.0 版本FlappyBird(可上架版本)(包括添加广告等)完整制作过程

本文原创:转载请注明地址:http://blog.csdn.net/zp522123428/article/details/29357851 一.coco2dx-3.0环境搭建 这个网上很多参考教程也属于基础部分我就不再敷述,这里给大家提供csdn博客上的大家可以参考一下,我大概看了一下比较全面了: 参考地址:http://blog.csdn.net/aa4790139/article/details/8086635 二.coco2dx-3.0下创建项目 1.进入coco2dx-3.0的目录下,

VS2010安装包制作过程

1.新建一个安装项目. 2.添加项目输出 . 3.点击项目名称setup1,可在属性列表中设置各属性,可设置author(作者),manufacturer(公司名称)productname(产品名称) 4.点击“用户的“程序”菜单”,在右边的空白处点击创建快捷方式. 5.生成安装包 并指向主输出. 6.可在上面菜单中进行安装和卸载操作. VS2010安装包制作过程

怎样在几何画板中查看课件制作过程

几何画板主要以点.线.圆为基本元素,通过对这些基本元素的变换.构造.测算.计算.动画.跟踪轨迹等,构造出其它较为复杂的图形.是数学.物理教学中强有力的工具.对于一个几何画板初学者来说,要想学会得心应手的运用几何画板来制作课件辅助教学,是需要了解几何画板课件制作过程的.那么怎样查看几何画板课件制作过程呢? 可利用几何画板自定义工具查看课件制作过程,下面将作详细介绍. 1.打开几何画板,执行“文件”——“打开”,打开要学习的范例课件文件:     在几何画板中打开范例课件文件示例 2.执行“显示”—

峰盛包装:食品包装袋的制作过程

包装袋充斥在我们生活中的方方面面,而在各大超市中我们常常看到各种各样的食品包装袋,有人就会想这些漂亮的袋 子是怎么做出来的呢?下面就让汇盈包装为您介绍食品包装袋的制作过程! 其实,食品包装袋的制作过程分为5个过程: 1.食品包装袋设计:在公司接到客户的包装订单后,公司可以根据客户对袋子的要求设计一个符合产品特性.漂亮. 吸引消费者购买欲望的袋子版面图案,因此,当您要求汇盈设计袋子版面时,你可以浏览我们的“汇盈包装提供免费的 食品包装袋设计”. 2.制版:当确定好袋子的设计图稿后,就要根据图稿的一

基于 Windows GDI 的屏幕录像软件制作过程

我知道,标题不响亮一点你们是不会点进来看的(奸笑),好了言归正传,博主一直都想自己写一个屏幕录像软件,相信大家都用过屏幕录像软件了,专业级别或者商业级别的屏幕录像软件都是自己写驱动来获取显卡数据,或者自己写 Hook 来勾住一些图形函数来获取图形数据等等,不过博主没有这个能耐,唯一可以用的就是 Windows 自带的 GDI 函数了,以前看过一本游戏开发相关的书籍,里面讲解了如何使用 GetDIBits 函数来快速获取 HDC 里面的颜色数据,比起 GetPixel 快了上百个数量级不止,博主灵

机房收费系统(VB.NET)——超详细的报表制作过程

之前做机房收费系统用的报表是Grid++Report,这次VB.NET重构中用到了VisualStudio自带的报表控件.刚开始当然对这块功能很不熟悉,不过探究了一段时间后还是把它做出来了. 下面把在VisualStudio(我用的是VisualStudio2013,如果与您使用的版本不同,过程中如有不符还请考虑实际情况)中制作报表的过程尽可能详细地记录下来,供初学者学习参考. 做事要有全局观,先看一下成品,做好的报表如下图: 其实能够达到这样的效果需要做两方面的工作:添加报表控件ReportV