发表于: 2017-04-15 21:16:46

1 611


今日完成的任务:

1.完成了任务15-1的第一个页面

2.学习了如何使用css设计轮播图

基本过程如下:

1.基本布局:

将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,

相框设置1个图片的大小并设置溢出隐藏,以保证正确显示一个照片。

2.设置动画:

然后使用css3动画,通过对photos进行位移,从而达到显示不同的图片,每次偏移一个图片的宽度,即可显示下一张图片。

4张图片,需要切换3次.

根据需要可以对各个图片添加相应的序号和图片简介。

其中比较重要的是 animation属性:使用简写属性,将动画与 div 元素绑定

3.学习了column-count实现多列的方法

column-count:3;

column-gap 属性规定列之间的间隔

column-gap:40px;

column-rule 属性设置列之间的宽度、样式和颜色规则。

column-rule:4px outset #ff0000

明日计划完成的任务:

完成任务十五,开始js的任务

遇到的困难:

对轮播图实现点击轮换还不会。

column-count对div的控制似乎不怎么好


<div style="column-count:3">

   <div>1<div>

   <div>2<div>

   <div>3<div>

</div>

2中的一些元素会留在1中

收货:学会了css3的一些属性


返回列表 返回列表
评论

    分享到