发表于: 2017-03-14 22:55:01
1 702
今天完成的任务:1.学会使用:checked、:after来为单选按钮添加样式。
2.学会为下拉菜单添加样式。
明天计划的事情:明天要讲小课堂,今天做ppt花了点时间。争取明天用响应式方法完成任务10。
遇到的困难:1.花了一上午的时间解决了单选按钮,下拉菜单的样式问题。比如在这个代码中,利用对input默认样式设置display:none;进行隐藏,然后对。size-radioInput添加一个与按钮一模一样的样式,然后运用对.size-radio使用伪类:checked并且对.size-radioInput使用:after样式来实现单击按钮出现样式的问题,然后再对.size-radio中的子标签添加。size-radio:checked+.size-radioInput:after来完成对单选按钮添加样式。
<label class="size-label">
<input class="size-radio" type="radio" name="demo-radio">
<label class="size-radioInput">
<span></span>
</label>
对口箱
</label>
<label class="size-label">
<input class="size-radio" type="radio" name="demo-radio">
<label class="size-radioInput">
<span></span>
</label>
飞机盒
</label>
在此过程中可能会遇到出现多选按钮的情况,只需要在input框中的name属性添加相同的名称就行。
下拉框的样式添加和单选按钮样式的添加有点相似。也是先清除原先样式,然后直接在选择框最右边添加图标,再利用margin对图标进行设置就行。
收获:主要还是学习了使用:checked、:after来为单选按钮添加样式。学会为下拉菜单添加样式。
在做小课堂ppt的过程中才知道原来table中的table标签只能设置margin,不能设置padding;而单元格td只能设置padding,不能设置margin;这就是为什么不能用table布局九宫格的理由。
由于task10还没做完,就不上传了。
评论