现在是1月14日,今天有在主体内容添加图文列表。
在开始之前看下目前的布局,上面是“顶部导航”,导航栏左侧是蓝色填充的头像图标,右侧是有填充的设置图标,这两个图标可以点击,但点击之后没有响应,因为根本没有子页面可以跳转,嘿嘿,我还不会。
导航栏中间是“仁·义·礼·智·信”五个字,代表我对孩子的期望。
在导航栏下面是主体部分,引用了自设的css文件,设定内容间距上下0px,左右15px,px是像素的意思。
主体里面首先放了七张孩子帅气的照片,按照3000毫秒一张的速度进行轮播,在图片下面中间的部位有随图片变动的小圆点,之所以说得这么详细,是因为小圆点虽然看起来简单,但也是单独的一组代码,搞定它可花了我一番功夫,请原谅我这个小白。
图片轮播碰到的问题还有图片不显示,这点在添加自己的图片并修改代码里的图片地址后就好了。
最大的问题是刚开始它竟然只能手动左右拖动,不自动轮播,一直显示第一张图片,这个问题反复复制粘贴好几次都不行,仔细对照视频里的代码和操作也不行,最后在网络上搜索了一段代码才ok,和之前的代码做比对仅仅差几个字母,结果大为不同。
今天用图文列表的方式做“任务栏”、“进行中的任务”和“积分兑换”三个部分,这三个名字不咋滴,先用着,后续再找类似“混沌神殿”之类的名字填上去。
做图文列表碰到的问题有背景色和边框之间没有间距,主体是有设定左右留15px的空白。又是反反复复好几遍试不同代码,最后发现原来整段代码放在了body的下面,既主体之外了,所以间距的设定不起作用,调整位置后ok。
明天要做的是调整图文列表每一栏的高度,可以显示更多的内容。
加油!
ฅ۶•ﻌ•
网友评论