发表于: 2018-07-09 22:57:37
1 752
今天完成的事情:
1.写桌游精灵任务。
2.CSS编辑小圆点及hover的使用。
3.巩固之前的知识,熟练使用flex盒子。
明天计划:
完成桌游精灵任务。
学习CSS半透明。
遇到的问题:
使用hover触发隐藏时遇到点小问题。
收获总结:
任务收获:
使用纯CSS书写小圆点:一种比较简单的方法
.circle { width: 10px;
height: 10px; //设置宽高相等,形成方形盒子
background: #fff; //设置背景
border-radius: 50%; //设置半角,形成圆形
border: 1px solid #fff;} //设置边框大小,形成实心或空心圆。
CSS书写三角形:
.triangle {
border: 10px solid transparent; //形成透明实心矩形框
border-top: 10px solid #fff; } //一段顶点,形成三角形
使用hover触发隐藏显示:
设置隐藏很简单,使用 display:none; 就直接能设置为不显示;
可是要如何使用hover触发显示?
需要各种选择器结合使用:
.box: hover .hidden {display:block;}
//从隐藏的元素所在的BOX 选择 触发hover,
再 选择(hidden)被隐藏了的类,使用display:block;显示为块。
今天还使用了下栅格布局
运用Bootstrap的栅格系统,首选需要准备一个class=container的div
紧接着需要一个class=row的 div,表示再挨着的div,就是列了。
通过class="col-xs-x"设置有多少列,可以设置最后这个值为1,2,。。。。
来改变列数默认最大12列,之前一直不熟悉,不知道是怎么回事情,
今天使用了下还是比较简单的。
今天主要时在写桌游精灵任务,任务比较简单,就是页面有点多,感觉
自己写的还是有点慢吧(),一天还没写完,明天结束.
评论