关于第二次考核后的总结反思

BFC的描述

这个是考核中写的

显而易见,没有写全,触发方式有些记混了
触发方式

1. 根元素
2. 浮动元素
3. 绝对定位或固定定位元素
4. 行内块元素
5. 表格单元格
6. 表格标题
7. 弹性盒模型元素
8. 设置 overflow 属性值不为 visible

实现六芒星效果

考核中只实现了三角形,不知道等边三角形怎么实现

我将数值做了些许改变,将容器宽高改为了500px,其实本质是将三边按比例缩放

.container{width:500px;height:500px;border-radius:50%;background:lightblue;position:relative;border:2px solid white;}.star1{width:0;height:0;border-width:210px 0px 227.5px 370px;border-style:solid;border-color:transparent;border-left-color:red;position:absolute;right:-2px;top:30px;}.star2{width:0;height:0;border-style:solid;border-width:210px 370px 227.5px 0px;border-color:transparent;border-right-color:blue;position:absolute;left:-2px;top:30px;}

用户注册界面

这个界面在考核中完成较好,下面是在考核中完成的

textarea没有加上滚动条,加上样式

textarea{overflow:scroll;

即可生成滚动条

三级菜单

这个完成的好,因为上次考核考过了二级菜单,记忆深刻

div{width:100px;height:30px;text-align:center;line-height:30px;background:#ddd;color:#000;border:1px solid white;}.c2, .c3{display:none;}.c1:hover .contain1{display:block;}.c1:hover .c2{display:block;}.c1 .special:hover{background:#000;color:#fff;}.special{position:relative;}.c1 .special:hover .contain2{display:block;}.c1 .special:hover .c3{display:block;}.c1{position:relative;}.c1 .contain1{position:absolute;display:none;top:30px;left:20px;}.contain2{position:absolute;display:none;left:100px;top:0;}

轮播图

轮播图是切换页面的一个区域,要联合javascript完成,但在考核中没有将多张图片放进去,正确做法是将多张图片放进去,等学了javascript后就可以实现效果
这是考核中完成的样式

下面是修改过后的

总结:
这次考核总体不错,但也有不足的地方,比如只会用教过的知识,六芒星就很好的诠释了这点,视频老师只教了三角形,所以学习过程中要发散思维,其次,发现了一个问题,就是要自己动手实践,工科本来都注重实践,更不必说前端,所以要多多练习一些常见区域的制作