发表于： 2017-03-27 23:21:13
1 705
今天完成的事情：
1、今天完成了任务7的页面3，学会了如何处理半透明。
2、写了任务8页面1的header和footer；
3、再次学习了下box-shadow属性用来添加阴影。
4、根据自己的理解对任务7的3个页面进行了链接跳转。
5、学会了visibility属性的用法。
6.学习了css3动画的使用。
明天计划的事情：
1、在任务8的页面1的主题部分使用bootstrap的网格系统布局。
2、对图片部分采用bootstrap的轮播，虽然在任务7中简单的套用了一下，但是印象还不深，再次学习下，加深印象。
遇到的问题：
1、对于bootstrap的js部分的在线引用似乎没起到作用，暂未解决。头部代码如下，其中的jquery和js部分在webstorm中报错。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="task7_3.css">
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>task7_3</title>
</head>
收获：
1、对于页面三div中的背景透明内容不透明，利用css3的RGBA能有效的完成效果。因为它不会对其他元素造成影响。而使用opacity，但是此时子元素的透明度会继承父元素的opacity，会导致其中的元素也是透明的，所以如果要实现效果的话，需要建立一个空的div放置背景层设置透明，并进行绝对定位来实现效果。
2.对visibility属性默认值为visible（可见），设置hidden（不可见，但仍然会占用位置），collapse（当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。），inherit（从父元素继承值）。
3.css3动画，是使元素从一种样式变化为另一种样式，使用百分比或者（from、to）来规定变化的时间。使用@keyframes来创建动画并绑定到一个选择器。还必须定义动画的名称和时长。因为默认时长是0，当不设置的时候，动画效果显现不出来。
返回列表
评论