发表于: 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,将图片设置为背景




返回列表 返回列表
评论

    分享到