发表于: 2016-05-11 22:49:41
0 1416
今天完成的事情:
http://119.10.57.65:880/ptt07/
1,完成了task7的扫尾
2,完成了task8,稍微了解了下CSS3的动画效果,利用hover做的
3,完成了部分task9,input属性图标更改,开始摸不着头脑,@小舅子指导下完成了,明天扫尾,最后修改的时候换成雪碧图来做。
明天计划的事情:
1,上午看看大家的日报
2,完成task9后先不开始task10 开始从task1开始修改
3,周末两天要请假出游,要找找路线,有没有师兄/师姐推荐~~
遇到的问题:
1,动画效果和input标签样式都不是自己想出来的,而是在师兄和看他人代码的情况下完成的。。。。自己没想出来
收获:
1,关于hover的用法
a, .class div p:hover
b,改变其他元素
A:hover B{ 改变 B 的样式 }
这样的话A得是B的父级,像这样:
<div class="A">
<div class="B"></div>
</div>
这种写法不兼容ie6(ie6只支持a链接伪类)
2,<input type="radio">同一组单选要设置相同name
3,在做TASK9的时候,radio的图标绘制,抄了学姐的代码。
先给原来input设置隐藏和绝对定位脱离文档流,让其看不见,但依然在文档中且不占据原来位置,不能使用display:none,
在input中定义一个span,用来绘制圆,放到原来点的位置。
.main-body input[type = "radio"] + span { /*选择type为radio的input和后面的<span>*/
box-sizing: border-box; /*改变圆大小的时候不会改变宽? 暂时还没明白*/
display: inline-block; /*span是空的行元素没有宽度,变为块设置宽度*/
width: 16px;
height: 16px;
margin: 0 20px;
border: solid 1px #1d7ad9;
border-radius: 50%; /*绘制圆*/
}
.main-body input[type= "radio"]:checked + span { /*选择选中过的input*/
box-sizing: border-box;
display: inline-block;
width: 16px;
height: 16px;
margin: 0 20px;
border: solid 7px #1277dc;
border-radius: 50%;
}
4,task9中 select的处理
a,设置内边距
b,设置字体大小
c,设置边框线
d,清楚浏览器自带的样式
e,将图片设置为背景
评论