发表于： 2019-06-24 22:04:12
1 849
今天完成的任务：
完成了任务七的布局，第二个页面头部还是使用了老方法先自动分配好，第二部分音频播放器哪里使用了弹性居中以及垂直居中各占一边的写法把它们区分开加上外边距。音频播放器之前使用的是图片插入模式完成了任务，今天使用的是加一个子元素，然后用边框圆角，加上背景色这个时候橙色的椭圆形就展现出来了，接下来就是加上三角形了，那么怎么样才能实现呢，其实很简单，再加一个子元素，然后里面把三角形的代码写出来就可以了，记得要在父元素加上弹性垂直居中。
盒子：hover出现时的小图标，使用了雪碧图学，以前是四个图片拼合在一起。在自适应了屏幕像素时，小图片的宽不能和盒子对齐，把像素单位都改成一致进行调试，
遇到的问题：
使用了混合宏把首页和投票页使用的三角形，把它有混合宏相当于做一个简单的模板，这样可能更好理解些。然后字定义一个参数，用括号括起来，千万要记住不能给参数固定一个参数值，我之前就把它的值固定了，可能刚刚使用不太懂，要知道这个参数是用来在编写主页用来自定义的。还有第二个错误用法不对，调试的过程中出现了报错，我调用了两个一样不同的值，调用时只能写一个，并用括号把内容包裹好，里面想要定义的参数。
@mixin triangle-x($value_t,$value_l,$value_b,$color){
width: 0;
height: 0;
border-top: $value_t solid $color;
border-left: $value_l solid transparent;
border-right: $value_b solid transparent;
}
调用后：
.triangle-t{
@include triangle-x(10px,5px,5px,rgba(255,255,255,0.5));
margin-left:$value-gap;
}
明天计划的事情：
学习任务八导航栏的制作方法
收获：重构了任务七的布局，修改了代码反复使用的情况。使用占位、混合等方式省略了没有必要的代码，明白了混合使用的好处，上面写了。这个任务总的来说都用三个符都用过了一遍，包括变量等，也是对初学者的考验，收获了以前不会的技能，
返回列表
评论