BFC的描述
这个是考核中写的
显而易见,没有写全,触发方式有些记混了
触发方式
- 根元素
- 浮动元素
- 绝对定位或固定定位元素
- 行内块元素
- 表格单元格
- 表格标题
- 弹性盒模型元素
- 设置 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后就可以实现效果
这是考核中完成的样式
下面是修改过后的
总结:
这次考核总体不错,但也有不足的地方,比如只会用教过的知识,六芒星就很好的诠释了这点,视频老师只教了三角形,所以学习过程中要发散思维,其次,发现了一个问题,就是要自己动手实践,工科本来都注重实践,更不必说前端,所以要多多练习一些常见区域的制作
