任务总结:
任务名称:CSS-task10
成果链接:任务十
日报链接:任务十
任务耗时:2019.7.3-2019.7.5,耗时三天
个人脑图:
官方脑图:
任务总结:
1.学到了如何使用div+css模拟原生表单,模拟单选按钮时,先将原生按钮去掉,再添加一个圆,然后使用::after在此圆的元素里面添加一个透明圆,将按钮做出空心效果,然后使用css的checked做出按钮效果,使用transform使画出的空心按钮在checked的作用下出现,模拟出单选按键的效果。
2.然后是在div中使用contenteditable="true"使得其可编辑,做出input输入框的效果,而且此输入框可以设定宽度后和最大高度后,让输入框在一定高度内显示全部内容,不会直接出现滚动条,而且到达最大高度才会出现。
3.使用div模拟下拉框,和单选按钮类似,将其原始下拉键使用appearance:none;去掉,然后贴上自己的下拉键,将其作为背景放在相应位置。
4.将bootstrap的导航栏和按钮放在一起,做出响应式的导航栏,满足ui图的设计。
5.做流程图的时候将横条使用z-index放置在最后,然后使用负margin使得每部分进行重合,去掉圆角和本身有的间隙。
评论